【ブログ飯】9月度収益6,000円突破!引き続きご愛読お願いします!

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

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

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

男の子

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

女の子

あれオシャレよねー!どうやってカスタマイズするのかしら?
しゃーないな、自称プログラマーのワイがコード付きで紹介するよ

フリーメイさん

はじめに
ブロガーの皆さん「ボタンバッジ」使ってますか?リンク前に「人気記事」「おすすめ」と色付きボタンを設置することで、特定の記事へのアクセスを集めやすくなります。カスタマイズ方法をコード付きで紹介するのでぜひ丸パクリしてね!
こんな人に読んで欲しい!
  • WordPressユーザー、小テーマを使ったカスタマイズに慣れている
  • 特定の記事へアクセスを集めたい
  • ただリンクを貼るんじゃなくて、色付きボタンで目立たせたい!
注意
この記事はブロガー且つ中級者向け記事です!

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

カスタマイズフロー
  1. CSS編:外観→テーマの編集→小テーマ指定→下記CSSをコピペ→ファイルを更新
  2. HTML編:投稿画面→テキストモード→HTMLコピペ→プレビューで確認
  3. 番外編: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/記事タイトルは各自で変更

プレビューをチェック!

【AddQuickTag】呼び出しコードを登録しておこう!

番外編:Add Tagにコードを保存しておくと良い(1回登録すると次回から一発で呼び出せる)

AddQuickTagは、めちゃくちゃ便利なプラグインなので是非全てのWordpressブロガーに活用してほしい。

このプラグインがあると作業効率が格段に跳ね上がるぞ!

詳しい解説は下記をクリックしてね!

参考 AddQuickTagの設定方法&使い方アフィリエイトの始め方|初心者が月5万稼ぐ方法をすべて公開!

終わりに

それでは何だか疲れたので、またの記事で!

ブログノウハウ記事もたま〜に書いていきたいと思います。

それでは良いお年を〜

【Automator】複数画像を一瞬でリサイズする方法 【アドセンス】関連コンテンツ広告が遂に解放!【PV数・記事数・かかった期間は?】

おすすめたった3ヶ月のセブ島英語留学で「TOEIC405→775」まで上がった話

おすすめアジア海外就職でバブルを体感!おすすめの海外転職エージェント5選!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください