前回はWordPressにディフォルトで用意されているHTMLタグを使って、ユーザーにも検索エンジンにも読みやすい記事の作り方をご案内しました。
今回はオリジナルのCSSファイルを作って、サイトの見え方をちょっと変えてみるテクニックをお伝えします。
CSSファイルはWordPressの各テーマごとセットになっているものですが、ここではこのサイトで使っている「simplicity2」をカスタマイズしてみます。
尚、「simplicity2」はバージョン2.5.2です。古いバージョンをお使いの方はバージョンアップした方がいいですよ。
＊バージョンアップして気付いたのですが、ページの更新時に「更新日を変更するかしないかの選択」が標準でついてます。
定義リスト（dl）をCSSファイルに加える
定義リスト（dl）はディフォルトのCSSでは「最近のコメントウィジェット」のスタイルにあります。
コードは次のようになっています。
dl.recent-comments {
width:100%;
margin: 20px auto;
}
dl.recent-comments dt{
text-align: left;
clear: left;
float: left;
width: 46px;
white-space: nowrap;
margin-top: 3px;
}
dl.recent-comments dd{
margin-left: 0;
margin-bottom: 20px;
}
dl.recent-comments dd .recent-comment-author{
font-weight: bold;
}
dl.recent-comments dd .recent-comment-content{
font-size:14px;
}
.recent-comment-title{
clear: both;
}
これはサイドカラムの「最近のコメント」のスタイルですから、投稿ページの本文には使えません。
本文用の<dl>のスタイルを作ってみましょう。
まずclass属性の指定無しでつくってみます。
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
実際にテキストを入れて表示させると次のようになります。
- 定義リストdlとは
- <dt>に書かれた項目についての内容を<dd>に記述します。
<dt><dd>はセットになります。 - 横並びと縦並び
- <dt>と<dd>は横に並べるパターンと縦に並べるパターンがあります。
ブラウザによってディフォルトの設定があり、ほとんどは縦並びだと思いますが、横並びにしたりpaddingの設定や背景色などの変化をつけることができます。
- 横並びリスト
- <dt>を左寄せにして、widthを30％に設定したパターンです。
- 下枠をつける
- 下にボーダーをつけ色をグレーに設定しました。
コードは以下です。
.dl01 dt,
.dl01 dd{
padding: 15px;
}
.dl01 dt{
display: block;
float: left;
width: 30%;
}
.dl01 dd{
padding-left: 30%;
border-bottom: 1px solid #ddd;
margin-left: 0;
}
ディフォルトで<dt>は太字になっているので、特に指定はしていません。
<dd>に「margin-left: 0;」を記述しているのは、理由は分からないですが右に少しずれるので、これで普通に表示されます。
<dt>の幅を変えるのは「width: 30%;」の数値を変え、<dd>の「padding-left: 30%;」の数値を合せると変更が出来ます。
class属性の名前「.dl01」は「.dl-style」とかでも構いません、任意に設定して下さい。
- 背景色をつける
- 縦配列にして<dt>に黄色の背景色をつけました。
- ボーダーは無し
- 下のボーダーを取り除きました。
コードは以下です。
.dl02 dt,
.dl02 dd{
padding: 15px;
}
.dl02 dt{
display: block;
background: #ff0;
}
.dl02 dd{
padding-left: 15px;
}
色のコードはWEB色見本 原色大辞典を参考にして下さい。
文字の大きさや色を変える
文字の色や大きさを変えて文章や単語に注目してもらうのは有効な方法です。
WordPressのディフォルトでは「赤」は投稿画面にありましたが、他の色もCSSファイルに設定しておきます。
まず、色のコードを確認しておきましょう。
- ダークレッド（darkred）：#8b0000
- ネイビー（navy）：#000080
- ダークグリーン（darkgreen）：#006400
- 文章をダークレッドで表示する
- 文章をダークグリーンで表示する
色を変えたい部分を<span class=”darkred”>ここに文章</span>と「span」で囲みます。
文字の大きさは細かく指定する方法もありますが、ここでは「大」と「小」の２種類あればほとんど問題ないので次のようにしてみました。
- 文字を小さくした文章
- 文字を大きくした文章
使い方はやはり「span」タグを使って<span class=”small”>ここに文章</span>とします。
文字をダークレッドで大きくする時は<span class=”large darkred”>ここに文章</span>とすると
このようになります
コードは以下のとおりです。
/*文字色の設定*/
.darkred {color: #8b0000;}
.navy {color:#000080;}
.darkgreen {color:#006400;}
/*文字の大きさの設定*/
.small {font-size: 0.8em;}
.large {font-size: 1.2em;}
追加のCSSは「子テーマ」に記述する
CSSファイルに追加のスタイルを記述する場合は、「子テーマ」の「style.css」に記述します。
「simplicity2-child」フォルダの中の「style.css」をテキストエディタで開き、追加分のスタイルを記述します。
コメント