WordPress Lightningのサイドバーをカスタマイズ
WordPress Lightning CSSコピペで魅力アップ！
サイドバーカスタマイズ完成見本
ここでは、サイドバーに「最新の投稿記事リスト」ウィジェットを表示します。
今回は投稿記事ではなく、任意の固定ページを8ページ表示させます。
WordPress プラグインLightningは、シンプルなデザインなので、サイドバーのボタンをちょっと目立たせることで更にカッコよくなり、引き締まります。
実際に稼働中のページ見本
レイアウト関連ページ
サードバーに「最新の投稿記事リスト」ウィジェットを追加
- 「VK All in One Expansion Unit」がインストールされていることが前提です
- 今回はサイドバー（共通下部）にウィジェットを追加
ウィジェットの設定
- タイトルにはアイコンフォントを入れるとよりクール！
- 見栄え的にもサムネイルは表示させましょう
- 固定記事の場合は、ページの公開日を選択
- サイドバーに表示したい固定ページの数
- 今回は固定ページを表示させるのでこちらを選択
コピペ用CSSレイアウト
基本的にすべてコピペ
場合によっては、マージンなどの微調整が必要です。ページデザインにより、ボタンの色などを変えてください。
/* サイドメニュー */
.subSection-title:after{
content: initial;
}
h1.widget-title {
font-size: 0.8em !important;
padding: 1.1em 0em 0.9em 0.8em !important;
margin: 0em 0em 0.36em 0em !important;
color: #FFF;
background-color: #49710F;
font-weight: bold !important;
border-radius: 3px;
box-shadow: 2px 2px 4px #CCC;
border-style: none !important;
}
/* 投稿メニューボーダーライン削除 */
.postList_item{
border-bottom : 0em dashed !important;
}
.postList_body {
border-radius: 3px;
width: 100%;
height: 45px !important;
}
.postList_title {
margin: 0.0em 0em 0em 0em !important;
}
.postList_body a {
padding: 1.1em 0em 0em 1em;
width: 100%;
height: 44px !important;
display: block;
background-color: brown;
color: #FFF !important;
}
.postList_body a:hover {
text-decoration: none !important;
background-color: #D2B48C;
color: brown !important;
color: #FFF !important;
}
.postList_thumbnail {
margin: -0.9em 0.4em -0.8em 0em !important;
padding: 0em 0em 0em 0em !important;
height: auto;
width: 43px;
}
.widget_vkexunit_post_list a {
margin: 0.14em 0 0 0 !important;
text-align: left;
font-size: 0.84em !important;
border-width: 0.24em !important;
border-radius: 3px;
border-color: #841C1C !important;
}
/* END サイドメニュー */
