今回はサイドメニューの「見出しタイトル」のカスタマイズを説明するでぇ。
WordPressブログの無料テーマでは、サイドメニューや本文で使用する見出しデザインは決まっていることが多く、CSSを記述して、かっこいいデザインに自分でカスタマイズするんや。
サイドバーの設定方法
見出しデザインのカスタマイズ
現状は下のデザインで、シンプルでいいのですが、自分の好きな見出しデザインを他のサイトで見かけるやろ。変更の方法と各種デザインのカスタマイズできるCSSを紹介するから、コピペで色々試してみてや。
現状は上記のがデフォルトのままや。
サイドバーの順番を変更する
「外観」→「ウィジェット」より、「サイドバー」をみてや。作成時は左のメーニューから、ドラッグ＆ドロップで新しいメニューを追加したんや。
サイドバーを作成した時と同じで、順番を変更するのも、ドラッグ＆ドロップで直ぐに簡単に入れ替え可能なんや。
デザインをCSSでカスタマイズ
ダッシュボードの「外観」→「カスタマイズ」をクリックします。
「追加CSS」をクリックします。
/* サイドバー背景色*/
.sidebar h3 {
background: #b96978;
background-image: -moz-linear-gradient(top, #c27180 30%, #b06170 50%, #d39aa3 50%, #b06170 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b96978), color-stop(0.50, #c27180), color-stop(0.50, #b06170 ), color-stop(1, #c27180));
color: #fff;
}
上記のCSSコードはサイドメニューの見出しのカスタマイズや。
/************************************
** サイドバー sidebar
************************************/
.sidebar .widget_recent_entries ul li,.sidebar .widget_categories ul li a,.sidebar .widget_archive ul li,.sidebar .widget_pages ul li,.sidebar .widget_meta ul li,.sidebar .widget_rss ul li,.sidebar .widget_nav_menu ul li{
border-bottom: 2px dotted #ccc;
}
.sidebar .widget_recent_entries ul li:last-child, /*.sidebar .widget_categories > ul > li:last-child a,*/ .sidebar .widget_archive ul li:last-child, .sidebar .widget_pages ul li:last-child, .sidebar .widget_meta ul li:last-child, .sidebar .widget_rss ul li:last-child, .sidebar .widget_nav_menu ul li:last-child{
border:none;
}
.sidebar .widget_recent_entries ul li a, .sidebar .widget_categories ul li a, .sidebar .widget_archive ul li a, .sidebar .widget_pages ul li a, .sidebar .widget_meta ul li a, .sidebar .widget_rss ul li a, .sidebar .widget_nav_menu ul li a {
position: relative;
padding-left: 1.3em;
color: #b96978;
}
.sidebar .widget_recent_entries ul li a:hover, .sidebar .widget_categories ul li a:hover, .sidebar .widget_archive ul li a:hover, .sidebar .widget_pages ul li a:hover, .sidebar .widget_meta ul li a:hover, .sidebar .widget_rss ul li a:hover, .sidebar .widget_nav_menu ul li a:hover {
background: none;
color: #b96978;
}
.sidebar .widget_recent_entries ul li a:before,
.sidebar .widget_categories ul li a:before,
.sidebar .widget_archive ul li a:before,
.sidebar .widget_pages ul li a:before,
.sidebar .widget_meta ul li a:before,
.sidebar .widget_rss ul li a:before,
.sidebar .widget_nav_menu ul li a:before {
font-family: "FontAwesome";
content: "\f138";
position: absolute;
font-size: 1em;
left: 0;
top: 10px;
color: #b96978;
}
上記のCSSコードはサイドメニューの見出しの項目リストのカスタマイズや。
まとめ
少し高度なCSSを使用していますが、カッコ良くなったやろ。もっと簡単にたくさんの見出しデザインが見たいという方は、下記のサイトが一番わかりやすかったので、ご紹介するでぇ。
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
サルワカ
CSSで見出しをデザイン！コピペできるおしゃれな見出しデザインまとめ
ferret-plus.com
