WordPressを使う以前から他のブログサービスも使用している、ローカル・ブロガー小梅太郎です。
今回は＠niftyが提供する「ココログ」についてですが、前回、ブログ記事本文中の小見出しについて色々と検討したので、それを元にココログでも小見出しを使ってみました。
まずは、ココログの管理画面のデザイン・タブから「現在のテンプレートを編集」の「カスタムCSSを編集」に進みます。
ココログのこの項目では、スタイルシート(CSS)を追加してブログのデザインをカスタマイズすることができます。
CSSで指定するIDやClassの具体的な名称や内容は、実際に使用しているテーマのHTMLやCSSを確認しないといけませんが、今回は新たにクラス名を付けて対応しようと思うので、新規作成の扱いですね。
今回は、小見出しは頭にボーダーを付けるだけの、次のようなパターンにしようと思います。
（下の小見出しが、今回の設定した内容の小見出しです）
ココログの本文に小見出しを設定する
先ほどのココログの管理画面の「カスタムCSSを編集」で、新たに次のCSSを追記しました。
h4.komidashi {
font-size: medium;
font-weight: bold;
border-left: 5px solid #9b0000;
padding: 0 0.5em;
}
クラス名は”komidashi”として、今回はh4タグで指定しました。
paddingはボーダーと小見出しテキストとの余白ですね。
（paddingの値の記述方法については、自分の備忘録として下記に補足しました）
そして、記事を作成する時に、次のように書くと設定が適用されます。
<h4 class=”komidashi”>小見出しタイトル</h4>
実際のココログブログでの表示はこんな感じです。
う〜ん、アンダーラインがあってもいいかな？
※今回ココログのブログで適用した記事はこちらです。
「ニュースより／ロリータファッションイベント・無農薬野菜土曜市場・高齢者住宅工事始まる・OSS美術展」
【関連記事】
「今さら聞けない、本文中の小見出しはどうすればいいの？」
補足〜今さら聞けないpaddingやmarginの値をまとめて指定する記述方法
自分のための備忘録ですが、値の数による上下左右の指定方向の順番は次のようになってますね。
上下左右 padding: ●
上下・左右 padding: ● ●
上・左右・下 padding: ● ● ●
上・右・下・左 padding: ● ● ● ●