ここあです。
サイドバーウィジェットの見出しデザインを
カスタマイズしたいと思ったことはありませんか？
私はSTORKを使い出しの頃は
あまり気にならなかったのですが
少しずつカスタマイズしていくうちに
サイドバーウィジェットの見出しも
カスタマイズしたいと思うようになりました＾＾；
前回、記事中の見出しを変更する方法をご紹介しましたが
今回はそれの応用編になります。
応用編とはいっても
CSSコードをコピーするだけで簡単にできるので
ぜひ試してみてください。
サイドバーウィジェットの見出しをカスタマイズ
まずは、サイドバーウィジェットの
カスタマイズの仕方から説明します。
基本的にデザインのカスタマイズは
全てCSSコードを書き加えることで変更が可能です。
CSSコードを貼り付ける場所は
ダッシュボードメニューから
外観 → カスタマイズをクリックし
追加CSSの画面を表示させます。
コードはここに貼り付けましょう。
サイドバーウィジェットの見出し例
それはな、あなたがコピーするだけで簡単に設置できる
サイドバーウィジェットのCSSコードを
いくつかご紹介いたします。
お気に入りの見出しデザインが見つかったら
コピーして貼り付けてみてくださいね。
罫線のみのシンプルな見出し
私と同じ罫線のみのシンプルな見出しです。
※ 罫線の色や太さ、文字の色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {background: none;border: solid 1px #999999;color: #333;font-size: 16px;}
上下線のある見出し
上下線のみのシンプルな見出しです。
※ 罫線の色や太さ、文字の色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {background: none;border-top: solid 4px #333333;border-bottom: solid 4px #333333;color: #333;font-size: 16px;}
下線のみの見出し
さらにシンプルな下線のみの見出し。
※ 罫線の色や太さ、文字の色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {
background: none;
border-bottom: solid 3px #000000;
color: #333;
font-size: 16px;
}
このコードは…
border-bottom: solid 3px #000000;のsolidを
dottedに変えると点線にできます。
背景色と下線のある見出し
シンプルな下線に背景色をプラス。
※ 罫線の色や太さ、文字の色、背景色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {
color: #010101;
background: #eaf3ff;
border-bottom: solid 3px #516ab6;
}
左にボーダーと背景色のある見出し
左にボーダーと背景色のある見出しです。
※ 罫線の色や太さ、文字の色、背景色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {
color: #494949;
background: #fffaf4;
border-left: solid 8px #ffaf58;
}
立体感のある見出し
上記コードに影を入れるだけで立体感が出ます。
※ 罫線の色や太さ、文字の色、背景色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {
color: #494949;
background: #f4f4f4;
border-left: solid 5px #7db4e6;
border-bottom: solid 3px #d7d7d7;
}
Webアイコンフォントを使った見出し例
Webアイコンフォントである
Font Awesomeのサービスを使った見出し例です。
Font Awesomeの使い方はこちらに記載しています。
Webアイコンフォント「Font Awesome」の使い方をやさしく解説
シンプルなアイコンフォントの見出し
アイコンフォントを使ったシンプルな見出しです。
※ 罫線の色や太さ、文字の色、アイコンの色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {
position: relative;
background-color: #fff;
color: #000;
border-bottom: solid 3px gray;
padding-left: 0.7em;
line-height: 20px;
}
#sidebar1 .widgettitle:before{ font-family: "Font Awesome 5 Free";
content: "\f00c";
position: absolute;
font-size: 1em;
left: 0;
top: 12px;
color: #5ab9ff;
}
アイコンフォントに影を入れたの見出し
アイコンフォントに背景の図形に影を入れた見出し例です。
※ 罫線の色や太さ、文字の色、アイコンの色はお好みで調整してください。
- クリックでCSSコードを表示
#sidebar1 .widgettitle {
position: relative;
background: #fff;
font-size: 18px;
padding: 0 0 0 35px;
color: #474747;
border-bottom: solid 4px #999;
}
#sidebar1 .widgettitle:before {
font-family: "Font Awesome 5 Free";
content: "\f024";
display: inline-block;
line-height: 40px;
position: absolute;
padding: 0em;
color: white;
background: #ff6363;
width: 40px;
height: 40px;
text-align: center;
top: 50%;
left: 0px;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 50%;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}
サイドバーウィジェットの見出しは簡単にカスタマイズできる！
今回はサイドバーウィジェットの
見出しをカスタマイズするための
CSSコードを紹介しました。
冒頭で説明した通り、見出しのデザインは
CSSコードで簡単にカスタマイズできます。
しかし、ワードプレスのCSSコードは
詳しく知らない人が指定の仕方を間違えると
思わぬところに反映されたり、正しく表示されなかったりします。
なので、実際にカスタマイズを行うにしても
それなりに検証しながらカスタマイズしているので
コードを調整するのは意外と大変です＾＾；
しかし、せっかくおしゃれな有料テーマを購入した以上は
あなたにも、もっとSTORKのことを
好きになって欲しいと思います。
だからこそ、いろいろと検証を重ねながら
あなたでもコピーすれば簡単にできる
CSSコードを紹介しています。
なので、もしサイドバーウィジェットの見出しを
他のブロガーと差別化したいという場合は
ぜひコピーしてカスタマイズしてみてください。
最後までお読みいただきありがとうございました！
