賢威サイドバーの「最近の投稿」リンクをカスタマイズする

この記事は約10分で読めます。

  • LINEで送る

最近の投稿カスタマイズ

賢威の初期設定だと、サイドバーにある「最近の投稿」リンクが
他のリンクと異なる動作をします。

これは、賢威開発者側がデザイン上「あえて」やっていることだと推測しますが、
リンクの動作は、サイト内で統一させたい人も多いのではないかと思います。

今回は、デフォルトで表示されている「最近の投稿」リンクを
他のリンクタグと同様の動作になるようにカスタマイズします。

サイドバーの最近の投稿リンクの指定

最近の投稿カスタマイズ

サイドバーの最近の投稿リンクは、初期設定で以下の通り指定されています。
このスタイルにより、他のリンクタグと違って画像のように枠全体が「hover」で浮き上がります。

<div class="contents widget-conts widget_recent_entries">
<h3>最近の投稿</h3>
<ul>
<li><a href="http://www.keni-customize.net/tagpage-noindex-noplugin-644/">WordPressでタグページだけを「noindex」にする方法(プラグインなし)</a></li>
<li><a href="http://www.keni-customize.net/googlemap-umekomi-632/">賢威にグーグルマップ(GoogleMap)を埋め込む方法(スマホ表示の幅も合わせる)</a></li>
<li><a href="http://www.keni-customize.net/youtube-umekomi-612/">賢威にyoutube動画を埋め込む方法(スマホ表示の幅も合わせる)</a></li>
<li><a href="http://www.keni-customize.net/column-change-599/">賢威6.1でページごとにカラム数を変更する方法</a></li>
<li><a href="http://www.keni-customize.net/blockquote-css-design-587/">引用タグ(blockquote)をCSSのみで装飾する</a></li>
</ul>
</div>

次に、「最近の投稿」リンクの個別CSSは以下のとおりです。
「外観 > テーマ編集」から「design.css」を開くと確認できます。

.sub-column .widget_recent_entries ul li,
.sub-column .widget_recent_entries ul li li,
.sub-column .widget_pages ul li,
.sub-column .widget_pages ul li li,
.sub-column .widget_nav_menu ul li,
.sub-column .widget_nav_menu ul li li,
.sub-column .widget-conts .ranking li,
.sub-column .widget-conts .ranking li li,
.sub-column .widget-conts .banner li,
.sub-column .widget-conts .banner li li{
	padding: 0;
	background: none;
	list-style: none;
}

.sub-column .widget_recent_entries ul li a,
.sub-column .widget_pages ul li a,
.sub-column .widget_nav_menu ul li a{
	display: block;
	padding: 12px 10px 12px 20px;
	background: url(./images/icon/icon-arrow_r.png) 2px 15px no-repeat;
}


.sub-column .side-menu li a{
	display: block;
	padding: 12px 10px 12px 20px;
	background: url(./images/icon/icon-arrow_r.png) 2px 15px no-repeat;
}

.sub-column .widget_recent_entries ul li a:active,
.sub-column .widget_recent_entries ul li a:hover,
.sub-column .widget_pages ul li a:active,
.sub-column .widget_pages ul li a:hover,
.sub-column .widget_nav_menu ul li a:active,
.sub-column .widget_nav_menu ul li a:hover{
	background-color: #fc6;
	color: #fff;
}

.sub-column .widget_recent_entries ul ul,
.sub-column .widget_pages ul ul,
.sub-column .widget_nav_menu ul ul{
	padding: 0;
	margin: 0;
}

.sub-column .widget_recent_entries ul ul ul,
.sub-column .widget_pages ul ul ul,
.sub-column .widget_nav_menu ul ul ul{ padding: 0; }

.sub-column .widget_recent_entries ul li li,
.sub-column .widget_pages ul li li,
.sub-column .widget_nav_menu ul li li{
	width: 95%;
	margin-bottom: 0;
	padding-left: 5%;
	border: 0;
}

.sub-column .widget_recent_entries ul li li a:link,
.sub-column .widget_recent_entries ul li li a:visited,
.sub-column .widget_pages ul li li a:link,
.sub-column .widget_pages ul li li a:visited,
.sub-column .widget_nav_menu ul li li a:link,
.sub-column .widget_nav_menu ul li li a:visited{
	padding: 6px 10px 6px 15px;
	border-left: none;
	background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat;
}

.sub-column .widget_recent_entries ul li li a:active,
.sub-column .widget_recent_entries ul li li a:hover,
.sub-column .widget_pages ul li li a:active,
.sub-column .widget_pages ul li li a:hover,
.sub-column .widget_nav_menu ul li li a:active,
.sub-column .widget_nav_menu ul li li a:hover{ background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat #fc6; }

.sub-column .rss-date,
.sub-column cite{
	display: block;
	margin: 0.5em 0;
}

「widget_recent_entries」が、「最近の投稿」のスタイル指定です。
上記のスタイルを全て消すことで、独自のリンクタグスタイルはなくなりますが、
最近の投稿だけでなく、他のスタイルにも適用されています。(カスタムメニューなど)

全て消すとリンクタグの動きが統一される

そこで、「最近の投稿」のみのスタイルを消去する場合は、
「widget_recent_entries」の部分だけを全て消去します。

消した後のCSSは以下の様な設定になります。

.sub-column .widget_pages ul li,
.sub-column .widget_pages ul li li,
.sub-column .widget_nav_menu ul li,
.sub-column .widget_nav_menu ul li li,
.sub-column .widget-conts .ranking li,
.sub-column .widget-conts .ranking li li,
.sub-column .widget-conts .banner li,
.sub-column .widget-conts .banner li li{
	padding: 0;
	background: none;
	list-style: none;
}

.sub-column .widget_pages ul li a,
.sub-column .widget_nav_menu ul li a{
	display: block;
	padding: 12px 10px 12px 20px;
	background: url(./images/icon/icon-arrow_r.png) 2px 15px no-repeat;
}


.sub-column .side-menu li a{
	display: block;
	padding: 12px 10px 12px 20px;
	background: url(./images/icon/icon-arrow_r.png) 2px 15px no-repeat;
}

.sub-column .widget_pages ul li a:active,
.sub-column .widget_pages ul li a:hover,
.sub-column .widget_nav_menu ul li a:active,
.sub-column .widget_nav_menu ul li a:hover{
	background-color: #fc6;
	color: #fff;
}

.sub-column .widget_pages ul ul,
.sub-column .widget_nav_menu ul ul{
	padding: 0;
	margin: 0;
}

.sub-column .widget_pages ul ul ul,
.sub-column .widget_nav_menu ul ul ul{ padding: 0; }

.sub-column .widget_pages ul li li,
.sub-column .widget_nav_menu ul li li{
	width: 95%;
	margin-bottom: 0;
	padding-left: 5%;
	border: 0;
}

.sub-column .widget_pages ul li li a:link,
.sub-column .widget_pages ul li li a:visited,
.sub-column .widget_nav_menu ul li li a:link,
.sub-column .widget_nav_menu ul li li a:visited{
	padding: 6px 10px 6px 15px;
	border-left: none;
	background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat;
}

.sub-column .widget_pages ul li li a:active,
.sub-column .widget_pages ul li li a:hover,
.sub-column .widget_nav_menu ul li li a:active,
.sub-column .widget_nav_menu ul li li a:hover{ background: url(./images/icon/icon-menu02.png) 2px 12px no-repeat #fc6; }

最近の投稿カスタマイズ

「widget_recent_entries」を全て消しました。
これで、他のリンクタグと同様の動きとなりました。

これだけでも良いのですが、少し味気ないデザインになってしまいますので、
次回は、サイドバーの最近の投稿にサムネイルなどをつけてよりカスタマイズする方法を説明します。

  • LINEで送る

コメントを残す

このページの先頭へ