独自CSSの編集　～WordPressでブログを始める～

前回の「hueman テーマのカスタマイズ　詳細設定編」の記事

CSSの編集

よく使うタイトル行やコードの記述など全てのページで統一したスタイルで表現したほうが分かりやすいものについては、毎回投稿時にHTMLを編集をするのも大変なのでオリジナルCSSを記述しておく。

そして投稿の編集画面でオリジナルCSSで作成したclassを指定してスタイルを確定してゆく。

style.cssの編集

以前作成した子テーマのstyle.css（スタイルシート）にオリジナルのCSSを追記する。

WordPressのメニューより外観ー＞テーマの編集

右上の「編集するテーマを選択」で子テーマを選択、テーマファイルは「スタイルシート（style.css）」を選択すると子テーマのstyle.cssが読み込まれるので１４行目以降にオリジナルのCSSを記述してゆく。

タイトル行

↑のような左に牡丹色のライン、下にグレーのラインのタイトル行のCSS※

/* 左と下にボーダー（タイトル用） */
div.r_tiltle {
margin: 2em 0em 1.5em 0em; /* 上、右、下、左　枠外とのマージン */
padding: .25em 0 .5em .75em; /* 上、右、下、左　枠内でのマージン */
border-left: 6px solid #e7609e; /* 牡丹色ぼたんいろ */
border-bottom: 1px solid #afafb0; /* 銀鼠ぎんねず */
}

HTML側では、

<div class="r_tiltle">タイトル行</div>

と先程付けた名前をclassで指定する事によりスタイルが設定される。

こちらについては投稿時にテキストモードでHTMLをゴリゴリ編集する方法もあるがプラグインを使ってビジュアルモードから簡単に挿入する方法もある。

タグを挿入するプラグインについては別記事で。

コードの表示のCSS

その他には上でも使ったコード部分を表すCSSは以下の通り。

/* 背景色 × 点線で囲む（コードの表示） */
div.r_code{
margin: 1.5em 0em 2em 0em; /* 上、右、下、左の枠外とのマージン */
padding: .5em .75em; /* 枠内でのマージン　上下左右 */
white-space: nowrap; /* 折り返さない */
overflow-x:auto; /* X軸はスクロールバーを必要に応じて表示させる */
overflow-y:hide; /* Y軸はスクロールバーを表示させない */
background-color: #f8fbf8; /* 白磁はくじ */
border: 1px dashed #afafb0; /* 銀鼠ぎんねず点線で囲む */
color: #1f3134; /* 百入茶ももしおちゃ */
}

その他

上記を応用してコマンド行用やイタリック体のCSSなども作成して「ファイルの更新」ボタンを押すと保存される。

ちょっとハマったのが試行錯誤の最中にCSSを変更して記事のプレビューをしても変更したCSSが反映されない事が度々あった。

F5のリフレッシュをしても反映されない。

公開した記事であればChromeの別ウィンドウで開いてF5を押せば反映されるのだけれども未公開記事のプレビューだとCSSの変更がタイムリーに反映されない。

履歴の消去でキャシュをクリアして開き直して反映させていたけど、もしかしたらもっと良い方法があるのかも。

次回の「コメントの設定」の記事に続く