ここ数日、なぜだかSimplicity2のカスタマイズ魂に火がついてしまい、地味にカスタマイズに取り組んでいる、あらくま（@sa_arakuma）です。
Simplicity2をお使いになっている人の中には「エントリーカード全体をリンク化」にしている人もいらっしゃることでしょう。もちろん、あらくまもエントリーカード全体をリンク化しています。
ただ残念なんですが、カスタマイズ機能で エントリーカード全体をリンク化してもプラグイン「WordPress Popular Posts」を使ってウィジェットで表示している新着記事と人気記事はブログカードのようなリンクにならない仕様 なんですね。
今回は、エントリーカード全体をリンク化しても、ボタンのようなリンクにならない 「WordPress Popular Posts」で表示させている新着記事と人気記事のリンクをボタン化する方法 をお伝えします。
リンクをボタンにしようと思った理由
この「あらくまの一粒万倍ブログ」ではエントリーカード全体をリンク化をしていますので、インデックスリストや関連記事・ブログカードのリンクはボタンのようになっています。
なので「WordPress Popular Postsで表示させている新着記事と人気記事も同じようにしたかった」という理由です。つまり、インデックスリストや関連記事・ブログカードと同じようにすることで、リンクのクリック方法をできるだけ統一したかったということ。
新着記事と人気記事のリンクをボタンリンクにするCSS
WordPress Popular Postsで表示させている記事一覧のリンクをボタンにしていきます。が、デザイン的にはほぼデフォルトの状態で、マウスがリンクに乗ったときに背景色が変わるようになるカスタマイズです。
マウスが乗ったときには記事へのリンクの背景色が変わり、色がついた部分であればどこをクリックしても記事へ行くことができるようになっています。
当ブログのサイドバーにある新着記事がオススメ記事で確認してみてくださいね。
まずは記述したCSSを全部
各記事へのリンクをボタンのようにするために書いたCSSは以下のとおりです。
/************************************
サイドバー新着・人気記事のボタン化
************************************/
/* 記事へのリンクをボタンに */
.widget_popular_ranking ul li, .widget_new_entries ul li {
display:block;
overflow: hidden;
background: #ffffff;
}
/* ホバー時の色 */
.widget_popular_ranking ul li:hover, .widget_new_entries ul li:hover {
background-color: #f1f1f1;
}
/* wppタイトルスタイル */
a.wpp-post-title, a.new-entry-title {
display: block;
color: #555555;
min-height:88px;
height:auto !important;
height:88px;
padding: 2px;
}
a.wpp-post-title:hover, a.new-entry-title:hover {
text-decoration: none !important;
color: #555555;
}これで、我がブログ「川の流れのように。」と同じようになるはずです。
各CSSの説明
ここからは細かく紹介していこうと思います。
記事へのリンクをボタンに
新着記事と人気記事の 各記事へのリンクが画像とテキストで別々だったものを一体化するため のものです。あくまでも 見た目を一体化するもので画像とテキスト（記事タイトル）は別々でリンク が入ってます。
/* 記事へのリンクをボタンに */
.widget_popular_ranking ul li, .widget_new_entries ul li {
display:block; /* 見た目を一体化するための記述 */
overflow: hidde; /* 見た目を一体化するための記述 */
}当サイトではマウスが乗らないときは背景色をしていませんが、何もアクションがないときの背景色を「background」を追記することで指定することもできます。
ホバー時の色
各記事への リンクへマウスが来たときに背景色を変える ためのものです。
/* ホバー時の色 */
.widget_popular_ranking ul li:hover, .widget_new_entries ul li:hover {
background-color: #f1f1f1; /* 色を指定 */
}カラーコードは以下のサイトを参考になさってくださいね。
参考 原色大辞典
wppタイトルスタイル
各記事のタイトルの表示を 「アクションのないとき」と「マウスが乗ったとき」でどうのようにするのかを指定 しています。
/* wppタイトルスタイル */
a.wpp-post-title, a.new-entry-title {
display: block; /* これを指定しないと文字以外の場所がクリックできません */
color: #555555;
min-height:88px;
height:auto !important;
height:88px;
padding: 2px;
}
/* 記事タイトルの一を微調整 */
a.wpp-post-title:hover, a.new-entry-title:hover {
text-decoration: none !important; /* 下線消し */
color: #555555; }忘れずに書いてほしいのが 赤太字 の部分。この3行の記述で 記事タイトルが短くてサムネイルの縦サイズに満たないときでもクリックできる範囲をサムネイルの縦サイズと合わせて います。
おわりに
WordPress Popular Postsで表示させている新着記事と人気記事をブログカード風のリンクにすることで、インデックスリストや関連記事、ブログカード同じように1記事1記事の全体がリンク化されるので、スマホで見てくれている人がリンクをタップしやすくなります。
スマホだと全体がリンク化されてもされていなくても、あまり変わらないような気がしますけどね。
しかし、パソコンの場合だとブログカード風のリンクにすることで、新着記事や人気記事もクリックしやすく（クリックされるとは言ってないw）なっていると自画自賛してます。
素人が自力でなんとか仕上げたものですから、もっとスマートな方法があるかもしれませんけど、参考になさってみてください。
ぜひ、Simplicity2でエントリーカード全体をリンク化してるならば、新着記事や人気記事のリンクをブログカード風のリンクにしてみてはいかがでしょうか。
今回も最後までお付き合いくださって、ホントにありがとうございます！また次回お会いしましょう！！
