WordPress Lightningのサイドバーをカスタマイズ

WordPress Lightning CSSコピペで魅力アップ!

サイドバーカスタマイズ完成見本

サイドバーカスタマイズ完成見本

ここでは、サイドバーに「最新の投稿記事リスト」ウィジェットを表示します。
今回は投稿記事ではなく、任意の固定ページを8ページ表示させます。

WordPress プラグインLightningは、シンプルなデザインなので、サイドバーのボタンをちょっと目立たせることで更にカッコよくなり、引き締まります。

実際に稼働中のページ見本

レイアウト関連ページ

サードバーに「最新の投稿記事リスト」ウィジェットを追加

サイドバーカスタマイズ完成見本
  1. 「VK All in One Expansion Unit」がインストールされていることが前提です
  2. 今回はサイドバー(共通下部)にウィジェットを追加

ウィジェットの設定

サイドバーカスタマイズ完成見本
  1. タイトルにはアイコンフォントを入れるとよりクール!
  2. 見栄え的にもサムネイルは表示させましょう
  3. 固定記事の場合は、ページの公開日を選択
  4. サイドバーに表示したい固定ページの数
  5. 今回は固定ページを表示させるのでこちらを選択

コピペ用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 サイドメニュー */