目次
目次
ゴール
本記事ではブログの章構成および表のデザインの変更する方法をまとめます。
例として章構成および表のデザインを下の画像のようなものにすることを目指します。
【章構成のデザイン】
【表のデザイン】
必要なもの
| 必要なもの | 価格(円) | ||
|---|---|---|---|
| 1 | PC | ピンキリ | |
| 備考 | インターネット接続可能なこと | ||
| 2 | WordPressのアカウント | 無料 | |
| 備考 | 持っていない場合は、こちらを参照→WordPressのインストール方法 | ||
デザインの変更方法
HTMLのデザインはCSS(Cascading Style Sheets;カスケーディング・スタイル・シート)によって定めれれています。
ですので、ブログのデザインを変更する場合はCSSファイルの内容を変更していくことになります。
テーマごとにCSSファイルは定められていると思いますが、今回の記事ではSimplicity2を例としてまとめたいと思います。
CSSファイルの編集するにはWordPressの左側のメニューにある外観->テーマの編集を選択し、スタイルシート style.cssを選択します。
また、このとき編集するテーマが”Simplicity child”であることにも注意してください。
本ブログでは
/* Simplicity子テーマ用のスタイルを書く */
の下にデザインを設定するコードを追加していくことにします。
章構成のデザインの変更
style.cssの追加コード
下記のコードをstyle.cssに追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* 大項目(h2)のデザイン設定 */ .article h2 { border-left: 20px solid #191970; /* 左ボーダーを20px幅の実線、色#191970 */ background-color: #4169e1; /* 背景色を#4169e1 */ color: #ffffff; /* 文字色を#ffffff */ padding:5px 0px 3px 10px; /* 空白[上][下][左][右] */ font-size:24px; /* 文字サイズ24px */ } /* 中項目(h3)のデザイン設定 */ .article h3 { border-left: 15px solid #191970; /* 左ボーダーを15px幅の実線、色#191970 */ border-bottom: 3px solid #191970; /* 下ボーダーを3px幅の実線、線色#191970に */ padding:0px 0px 0px 20px; /* 空白[上][下][左][右] */ font-size:19px; /* 文字サイズ19px */ } /* 小項目(h4)のデザイン設定 */ .article h4{ border-left: 10px solid #191970; /* 左ボーダーを10px幅の実線、色#191970に */ border-bottom:2px dashed #191970; /* 下ボーダーを2px幅の破線、線色#191970に */ padding:0px 0px 0px 20px; /* 空白[上][下][左][右] */ font-size:16px; /* 文字サイズ16px */ } /* h5のデザイン設定 */ .article h5{ font-size:15px; /* 文字サイズ15px */ } |
デザイン確認
デザインを確認するために、下のtestDesign.htmlをブログ投稿画面で確認してみてください。
|
1 2 3 4 5 6 7 8 |
<h2>大項目(h2タグ)</h2> 大項目内容 <h3>中項目(h3タグ)</h3> 中項目内容 <h4>小項目(h4タグ)</h4> 小項目内容 <h5>サブ小項目(h5タグ)</h5> サブ小項目内容 |
すると、下の様に表示されるはずです。
表のデザインの変更
style.cssの追加コード
下記のコードをstyle.cssに追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* 表のデザイン */ .table { /* 文字サイズを12px */ font-size:12px; } /* 表のタイトルのデザイン */ .table th{ background-color: #00008b; /* 背景を#00008bに */ color: #ffffff; /* 文字の色を#ffffffに */ } /* 備考タイトルのデザイン */ .table td.remark{ background-color: #00008b;/* 背景を#00008bに */ color: #ffffff;/* 文字の色を#ffffffに */ width: 30px;/* 表の幅を30pxに固定 */ } /* 備考欄のデザイン */ .table td.remark2{ background-color: #f0f8ff;/* 背景を#f0f8ffに */ } |
デザイン確認
デザインを確認するために、下のtestDesign.htmlをブログ投稿画面で確認してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<table class="table" border="1"> <tbody> <tr> <th width="8"></th> <th colspan="2">必要なもの</th> <th width="100">価格(円)</th> </tr> <tr> <td rowspan="2">1</td> <td colspan="2">PC</td> <td width="100">ピンキリ</td> </tr> <tr> <td class="remark">備考</td> <td class="remark2" colspan="2">インターネット接続可能なこと</td> </tr> <tr> <td rowspan="2">2</td> <td colspan="2">WordPressのアカウント</td> <td width="100">無料</td> </tr> <tr> <td class="remark">備考</td> <td class="remark2" colspan="2">持っていない場合は、こちらを参照→<a href="http://kumitaserver.dip.jp/shiguregaki/blog/?p=181#main1">WordPressのインストール方法</a></td> </tr> </tbody> </table> |
すると、下の様に表示されるはずです。
以上!