【WordPressカスタマイズ】リンク前ボタンバッジの作り方【CSS】

2018/10/08 2018/11/20

男の子

ねーねーたまに記事下に「おすすめ」や「人気記事」という色付き文字ボタンあるじゃない？

女の子

あれオシャレよねー！どうやってカスタマイズするのかしら？

しゃーないな、自称プログラマーのワイがコード付きで紹介するよ

フリーメイさん

はじめに

ブロガーの皆さん「ボタンバッジ」使ってますか？リンク前に「人気記事」「おすすめ」と色付きボタンを設置することで、特定の記事へのアクセスを集めやすくなります。カスタマイズ方法をコード付きで紹介するのでぜひ丸パクリしてね！

こんな人に読んで欲しい！

WordPressユーザー、小テーマを使ったカスタマイズに慣れている
特定の記事へアクセスを集めたい
ただリンクを貼るんじゃなくて、色付きボタンで目立たせたい！

注意

この記事はブロガー且つ中級者向け記事です！

さらっと流し読み

コピペでOK！流れは作業の流れはこんな感じ
小テーマへCSSコードを記述
記事投稿画面へアプリHTMLコードを記述
【AddQuickTag】呼び出しコードを登録しておこう！
終わりに

コピペでOK！流れは作業の流れはこんな感じ

カスタマイズフロー

CSS編：外観→テーマの編集→小テーマ指定→下記CSSをコピペ→ファイルを更新
HTML編：投稿画面→テキストモード→HTMLコピペ→プレビューで確認
番外編：Add Tagにコードを保存しておくと良い（1回登録すると次回から一発で呼び出せる）

小テーマへCSSコードを記述

CSS

/*記事前オススメバッジ*/
.osusume-badge, .ninki-badge {
  padding: 4px 10px;
  font-weight: bold;
  margin-right: 8px;
  margin-left: 1px;
  font-size: 100%;
  color: white;
  border-radius: 6px;
  box-shadow: 0 0 3px #ddd;
  white-space: nowrap;
}
.ninki-badge {
  background-color: #FFB36B; /*黄色*/
}
.osusume-badge {
  background-color: #04B404; /*緑*/
}

CSS編：外観→テーマの編集→小テーマ指定→上記CSSをコピペ→ファイルを更新

記事投稿画面へアプリHTMLコードを記述

HTML

<p><span class="osusume-badge">おすすめ</span><a href="URL" rel="noopener">記事タイトル</a></p>
<p><span class="ninki-badge">人気記事</span><a href="URL" rel="noopener">記事タイトル</a></p>

【HTML編】投稿画面→テキストモード→上記HTMLをコピペ→プレビューで確認

*おすすめ・人気記事/URL/記事タイトルは各自で変更