ワードプレスでも、HTML式のホームページでも、やはり「見だしのデザイン」は気になりますよね。
私・ミナト香選もいろいろデザインを服のようにコーディネートしては「ああでもない」「こうでもない」と試行錯誤しています。
今回はシンプルですがちょっと可愛い見だしデザインを作ることができましたので、備忘録として記録しつつご紹介いたしますね。
見だしデザイン：サンプル
こちらの見だしデザインを作ってみました。小見だしに合いますね。
当サイトでは「h4」として使っていますが、お好みで。
ちなみに当サイトのサイドバーで実際に使っていますので、ご参照ください。
⇒【こぼれ記事書房・トップ】
見だしデザインの持ち帰り方
注意点
- 「h4」の部分は用途によって「h3」などに書き換えてくださいね。
- 場合によっては先頭のマークがウィジェットタイトルの文字がかぶらないように、CSSでの調整が必要です。調整場所、方法はご使用のWordPressテーマによって若干異なります。
当サイトでは「MH Magazine Lite」を使っておりますが、文字位置調整場所が解らず苦労しました。そのカスタマイズについては後日記述いたします。
CSSサンプル記述
下記をそのまま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 27 28 29 30 |
/* h4にした小さな見出し */ h4{ position: relative; color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 1.7em; border-bottom: 3px solid #B92A2C; } h4:before{ content: "●"; font-size: 180%; position: absolute; color: #B92A2C; top: -0.2em; left: 0.3em; height: 12px; width: 12px; } h4:after{ content: "●"; font-size: 180%; position: absolute; color: #ff6b6e; top: 0.0em; left: 0; height: 12px; width: 12px; } |
ちなみにこちら「賢威カスタマイズ研究所」様サイトを参考に改変させていただきました。
ありがとうございます。
http://www.keni-customize.net/custom-midashi-design-555/
SEOテンプレート【賢威】
免 責
- 当「こぼれ記事書房」内のHP＆WPについて・その他記事は、ほとんど個人的な備忘録ついでに掲載しております。
- ご使用は自己責任でお願い致します。設置・改変による不具合の保証はいたしかねます。
- ご質問・ご相談などはお気軽にどうぞ（必ずお応えできるとは限りませんが……）。
- 上級者様のご教示もコメント欄もしくは連絡フォーム※現在作成準備中からお受けいたします。
ただしコメント・ご連絡はすべて公開・返答させていただくという確約はできませんので予めご了承くださいませ。
Leave a Reply