男の子
ねーねーたまに記事下に「おすすめ」や「人気記事」という色付き文字ボタンあるじゃない?
女の子
あれオシャレよねー!どうやってカスタマイズするのかしら?
しゃーないな、自称プログラマーのワイがコード付きで紹介するよ
フリーメイさん
はじめに
ブロガーの皆さん「ボタンバッジ」使ってますか?リンク前に「人気記事」「おすすめ」と色付きボタンを設置することで、特定の記事へのアクセスを集めやすくなります。カスタマイズ方法をコード付きで紹介するのでぜひ丸パクリしてね!こんな人に読んで欲しい!
- WordPressユーザー、小テーマを使ったカスタマイズに慣れている
- 特定の記事へアクセスを集めたい
- ただリンクを貼るんじゃなくて、色付きボタンで目立たせたい!
注意
この記事はブロガー且つ中級者向け記事です!コピペで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/記事タイトルは各自で変更
プレビューをチェック!
【AddQuickTag】呼び出しコードを登録しておこう!
番外編:Add Tagにコードを保存しておくと良い(1回登録すると次回から一発で呼び出せる)
AddQuickTagは、めちゃくちゃ便利なプラグインなので是非全てのWordpressブロガーに活用してほしい。
このプラグインがあると作業効率が格段に跳ね上がるぞ!
詳しい解説は下記をクリックしてね!
参考 AddQuickTagの設定方法&使い方アフィリエイトの始め方|初心者が月5万稼ぐ方法をすべて公開!終わりに
それでは何だか疲れたので、またの記事で!
ブログノウハウ記事もたま〜に書いていきたいと思います。
それでは良いお年を〜
【Automator】複数画像を一瞬でリサイズする方法 【アドセンス】関連コンテンツ広告が遂に解放!【PV数・記事数・かかった期間は?】
コメントを残す