「エンジョイ鉄旅!」は、青春18きっぷやその他のお得なきっぷでの鉄旅を楽しむブログ
鉄旅に便利でお得なきっぷの王様「青春18きっぷ」

乗り鉄さんからそうでない人までに発売開始から35年以上の人気を誇る「青春18きっぷ」。

今さら聞けない「青春18きっぷ」の基本中の基本を徹底解説しています!

青春18きっぷの詳細はこちら!

【Simplicity2×WordPress Popular Posts】新着記事と人気記事のリンクをボタン化する方法!

ブログ運営

ここ数日、なぜだか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でエントリーカード全体をリンク化してるならば、新着記事や人気記事のリンクをブログカード風のリンクにしてみてはいかがでしょうか。

今回も最後までお付き合いくださって、ホントにありがとうございます!また次回お会いしましょう!!

あらくま

列車やバスに乗って全国各地を訪れるのが趣味な中年オヤジ。現在は2周目となるJR全線完乗、私鉄と公営鉄道と第三セクター線の初完乗を目指して全国各地を乗り鉄旅をしています。

あらくまをフォローする
ブログ運営
スポンサーリンク
あらくまをフォローする
エンジョイ鉄旅!
pocketlinehatebuimagegalleryaudiovideocategorytagchatquotegoogleplusfacebookinstagramtwitterrsssearchenvelopeheartstaruserclosesearch-plushomeclockupdateeditshare-squarechevron-leftchevron-rightleafexclamation-trianglecalendarcommentthumb-tacklinknaviconasideangle-double-upangle-double-downangle-upangle-downstar-halfstatus