スギ(@sugi_pallat)です。

ブログ記事を更新していると、過去記事や人気記事のリンクを紹介したくなる場面はありますよね。

ブログを隅から隅まで読んでいただくためにも、過去記事のリンクを紹介するということはとても重要なこと。でも、そのリンクがただのテキストとして書かれているだけだと、味気ないですよね。

スギ
どうせならカッコよくしたい!

そこで、スタイルシートを変更して枠をつけることでより目立つようにする方法をお知らせします。

スポンサーリンク

「あわせて読みたい」「人気記事」をWordPressで表示させるために、CSSとAddQuicktagでかっこよくつくってみた。

今回は、ブログ『登っちゃえば?』のy-heyさんが書かれた記事を参考に設定しました。

y-heyさんのサイトへのリンクをご紹介するのも

登っちゃえば?

とするよりも

とするほうがクリックしたくなりますよね。

1)スタイルシートに追加(あわせて読みたい)

スタイルシートに、次の内容を追加します。

/* ===================================================
あわせて読みたい CSS
=================================================== */
.emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #df8182;
background-color: #fffbf5;
}
.emphasize-link p:last-child {
margin-bottom: 0;
}
.emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "あわせて読みたい";
background-color: #df8182;
color: #fff;
font-weight: bold;
}

この中で

あわせて読みたい

の部分を変更すれば、左肩のコメントを好きなことばにすることができます。

さらにここを

人気記事

とすれば、「あわせて読みたい」とは異なるアプローチもできますよね。

2)スタイルシートに追加(人気記事)

さきほどの「あわせて読みたい」とは、色の配置を変更しています。もちろん、クラスの指定も「emphasize-link」から「popular-link」へと変更しています。

/* ===================================================
人気記事 CSS
=================================================== */
.popular-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #ee7917;
background-color: #fffbf5;
}
.popular-link p:last-child {
margin-bottom: 0;
}
.popular-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "人気記事!";
background-color: #ee7917;
color: #fff;
font-weight: bold;
}

カラーコードを変更して、

と表示されるようにしましたよ。

3)AddQuicktagに設定

WordPressプラグイン「AddQuicktag」で、次のように設定します。

使い方としては、

リンク先のタイトルを入力
枠で囲みたいテキストを選択し、AddQuicktagで指定
リンクを設定

この流れで設定すればバッチリです!

スギ
これでもっと記事をたくさん読んでもらいたい!

読者の方のお役に立てるように、これからもご案内していきますね。

以上、スギでした。