元IT土方の供述

はてなブログで表を作成する方法とデザインをカスタマイズする方法を紹介しますの!

スポンサーリンク

スポンサーリンク

スポンサーリンク

f:id:UrushiUshiru:20190327041430j:plain

 

みんなー!うしるだよー☆

 

今回はねえ!はてなブログでExcelみたいな表を作成する方法と

 

その表に色を付けたりスクロールバーを付けたりカスタマイズする方法を紹介しちゃうよ!

 

刮目して見てね♡

 

 

ブログに表(テーブル)を貼り付けたい!

f:id:UrushiUshiru:20190327022715j:plain

ブログに表を貼り付けた例

 ブログで記事を書いてるとExcelみたいな表(テーブル)をブログ記事に導入したいときがあると思います。

今回は、表(テーブル)をはてなブログで導入する方法を紹介します。そして画像のようにセルに色を付ける方法と、スクロールバーを設置する方法を紹介します。

 

え?貼り付けたいなんて思ったこと無いって!?そんなあ・・・

 

はてな記法モードで作成する方法

ここでは、はてな記法モードで作成する方法を紹介します。

 

f:id:UrushiUshiru:20190327024508j:plain

はてなブログの管理画面にアクセスして「設定」⇒「基本設定」⇒「編集モード」に移動して「①はてな記法モード」を選択して「変更する」をクリックしてはてな記法モードに変更します。

 

f:id:UrushiUshiru:20190327024406j:plain

上記のように、半角の縦棒(バーティカルバー)「|」で文字を挟んで表を作成します。

見出しのセルは「|*文字|」といった感じで文字の先頭に「*」を入力します。

 

f:id:UrushiUshiru:20190327000748j:plain

表はこんな感じで表示されます。

しかし、はてな記法でいちいち入力していく方法を面倒くさいので、まずやらない方法です。

次に紹介するExcelから貼り付ける方法がおすすめです。だって七面倒臭いもの・・・。

 

うしるきゅん的には、はてな記法モードでわざわざ書いていく方法はおすすめしないの・・・

 

Excelから貼り付ける方法

Excelから貼り付ける場合は以下のツールを使用します。

styleme.jp

 

 

f:id:UrushiUshiru:20190326233802j:plain

Excelで作った表をドラックして「Ctrl」+「C」(Macの場合「command」+「C」)キーを同時に押してコピーします。

 

f:id:UrushiUshiru:20190326233816j:plain

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)にアクセスして、「Ctrl」+「V」(Macの場合「command」+「V」)キーを同時に押してペーストします。

 

f:id:UrushiUshiru:20190326235327j:plain

①CSS出力しない」にチェックを入れ「②変換」をクリックします。

 

f:id:UrushiUshiru:20190326234055j:plain

上記のようなポップアップが表示されるので「×」を押して閉じます。

 

f:id:UrushiUshiru:20190326234100j:plain

HTMLコードとして出力されるのでコピーします。

 

f:id:UrushiUshiru:20190327000340j:plain

記事の「HTML編集」に貼り付ければ完了です。

 

f:id:UrushiUshiru:20190327000748j:plain

プレビューで確認するとこんな感じで記事に表示されます。

 

ほ~ら簡単でしょ!

 

表をカスタマイズ

カスタマイズをしてない表は、色が付いてないのでなんか質素で寂しい感じがします。

Excelみたいにセルに色を付けるために以下のブログを参考に導入していきます。

www.snow0303.com

 

/* 表 */
.entry-content table {
width:auto; /* 大きさを自動に */
}
.entry-content table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.entry-content table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: #B0DFFF; /* 背景色 */
text-align: center; /* 中央揃え */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}
.entry-content table td { /* 普通のセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
padding: 0.5em; /* 文字周りの余白 */
width:auto;/* 大きさを自動に */
white-space:nowrap; /* 文字を折り返さない */
}

上記の表のデザインをカスタマイズするCSSコードです。上記のコードを使用すればセルの色や線の太さ細かく設定することが出来ます。

見出しのセルの色を変更するのには「#〇〇〇〇〇〇」という6桁の値で表されるカラーコードを変更して色を変更します。

普通のセルの色は17行目から21行目の「.entry-content table td {~}」で囲われる部分に「background: #〇〇〇〇〇〇;」を挿入し、カラーコードを指定します。

セルの色については、以下のページを参照し指定したい色のカラーコードに適宜変更してください。

html-color-codes.info

 

f:id:UrushiUshiru:20180416005536j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

③変更を保存」をクリックして設定を保存します。

 

スマホ版(Proのみ)

スマホ版にも適用する場合は、上記のコードを「<style type="text/css">~<style>」で囲います。

 

f:id:UrushiUshiru:20180416171142j:plain
はてなブログの管理画面にアクセスして「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に上記の「<style type="text/css">~<style>」で囲ったCSSコードを貼り付けます。

 

スクロールの導入

f:id:UrushiUshiru:20190327004654j:plain

表が縦に長いとはみ出る

表をカスタマイズするCSSのみだと、横に長い表だと横にはみ出てしまいます。

ちなみに、スマホ版の場合は、カスタマイズするCSSのみでもきちんとはみ出ないようにスクロールされるので、導入はPC版のみで問題ありません。

 

はみ出るのはうしるきゅんのビッグマグナムだけで十分なんだぞ!

 

/* スクロール */
#table-scroll01 {
box-sizing: border-box; /* スクロール用の箱*/
overflow-x: scroll; /* 横スクロール */
 -webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}

 上記のコードを使用することで表をスクロールできるようにし、横にはみ出さないようにすることが出来ます。

 

これではみ出るのがうしるきゅんのだけで済むね!

 

f:id:UrushiUshiru:20180416005536j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

③変更を保存」をクリックして設定を保存します。

 

<div id="table-scroll01">
<table>
<thead>
<tr>
<th> </th>
<th>うしるきゅん   </th>
<th>うしるおじさん  </th>
<th>風子       </th>
<th>ユキ       </th>
<th>シャル      </th>
</tr>
</thead>
<tbody>
<tr>


【省略】

</tr>
</tbody>
</table>
</div>

上記のように、表のHTMLコードを「<div id="table-scroll01">~</div>」で挟み込めば完成です。

 

  うしるきゅん    うしるおじさん   風子        ユキ        シャル      
年齢 永遠の17歳 ひ・み・つ💛 17歳 16歳 12歳
身長 162cm 170cm後半 155cm 159cm 144cm
誕生日 ひ・み・つ💛 ひ・み・つ💛 9月27日 10月30日 3月23日

上記の表ようにスクロールバーが表示され横スクロールすることが出来ます。

 

表とGoogleMapを使った応用方法も紹介してるから試してみてね♡

 

まとめ

みんなー!ほ~ら簡単だったでしょ!?

 

うしるきゅんの記事を参考にして導入して見てね♡

 

チャオ♡

 

ちょっと!待ちなさいよアンタ!!

 

あぁん?なんでござるかシャルたんよ

 

この記事で使ってきた表を見て思い当たる節はないの!?何回もヒントはあったはずよ!

 

ぜ~んぜん無いでござるよ!(ドヤァ)

 

ふざけんじゃないわよ!このヘンタイ!!

 

うしるきゅんは変態じゃないやい!仮に変態だとしても変態という名の紳士だよ!!

 

そんなことはどうでもいいのよ変態!

 

この記事を上げる4日前の3月23日は私の誕生日だったのよ!ほら!私にプレゼントとか祝いの言葉は無いのかしら?

 

これだけは断言する!

 

無いね!

 

ざけんなあああああああああああ!!

 

 

最後まで読んでいただきありがとうございました♡