こちらで順調にカスタマイズできれば、メインブログにも当てはめる予定です。
記事内の見出し装飾をカスタマイズしてみました
標準の見出し装飾でも、記事を編集することは可能です。とはいえ、使い慣れたデザインには愛着もあるので変更することにしました。
こんなこともあろうかと、見出し装飾のCSSは控えてあります。
失敗例・総合CSSの追記では全体に適応されてしまう
CSS/HTMLの変更には詳しくないので、一番安易な方法から試してみました。【blogger】管理画面より、下記の項目を選択して編集画面へ
- テーマ
- カスタマイズ
- 上級者向け
- CSSを追加
CSS追記画面に、見出し装飾を変更するコードを追加しました。
背景が黄色、文字が黒という<h2>[見出し]用の装飾です。
意図した変更ができなかった
結論からいうと、この方法では記事内の装飾が変更できません。ブログのトップページに配置されている<h2>は変更されましたが、記事内は標準の装飾で上書きされます。
これを解消するためには、記事内の装飾のみを変更する必要があります。
見出し装飾の変更はHTML編集から実施する
【blogger】管理画面より、下記の項目を選択して編集画面へ- テーマ
- HTMLの編集
- 600行付近 /* ---------- 記事ページのh2,h3,h4 */
- 各見出しに装飾コードを上書きする
項目に説明書きがあったので、容易に編集する内容が特定できました。
参考例・見出し<h2>と小見出し<h3>の装飾内容
現時点での見出し<h2>の記事内装飾コードはこちら
.entry-content h2 {
margin: 1.3em 0 !important;/*段落 上下の余白*/
background: #fff2cc;/*背景色*/
padding: 0.5em;/*文字まわり（上下左右）の余白*/
font-size: 1.5em;/
}
この程度の変更でしたら、標準の配色変更のほうが早いかもしれない。
小見出し<h3>の装飾はこちらです。
.entry-content h3 {
margin: 1.3em 0 !important;/*段落 上下の余白*/
padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景色*/
border-left: solid 6px #6aa84f;/*左線*/
border-bottom: solid 2px #d7d7d7;/*下線*/
font-size: 1.2em;/
}
【まとめ】ZELOの見出し装飾は変更できる
見出し装飾の変更、予想よりあっさり成功しました。
標準デザインはモノクロ風味ですが、配色と見出し装飾をカスタマイズするだけで印象が変わります。
これはメインブログへの導入確実ッ!!
一通り触ってみた課題
現時点で気になった点は、- 記事内 文字の大きさ、簡易変更できない
- 記事内 添付ラベルの一部しかリンク化されていない
- 全体 画面表示に対して、表示される幅が少ないような気がする
どうにもならなかったら、作者さんに聞いてみよう。
コメント