WordPressの無料テーマSimplicity2の個別投稿記事に表示される「記事を読む」ボタンに色をつけるカスタマイズを紹介します。
通常だと上のように記事についての抜粋の下に「記事を読む」というリンクが表示されます。
ここをクリックすると個別記事ページの飛ぶのですが、このリンクをおしゃれなボタンへとカスタマイズしたいと思います。
このカスタマイズをすることで、最終的には上の写真のように、色をつけることができます。
このカスタマイズは、こちらのブログのコードを参考にさせていただきました。
ありがとうございます。
※ファイルを直接いじる場合には、事前にバックアップをとっておくことをお勧めします。ファイルの改変は全て自己責任でお願いいたします。（詳しくはトップページのメニューにある利用上の注意をご覧ください。）
Simplicity2のカスタマイズ 「スキン」を使う
Simplicity2を使ってサイトを作る際に、色付けに悩む方も多いと思います。
メニューの色をどうするのか、リンクの色をどうするのか、h2タグやh3タグはおしゃれにできないかなどなど、私はとても悩みました。
私はどちらかというと色のセンス、芸術的なセンスに欠けている方だと自覚しているからです。
そしてそんな私のような方に便利なのが、Simplicity2のカスタマイズにある「スキン」という機能です。
このスキンを設定することで、サイトに雰囲気が出ます。統一感がある色付けが可能なのです。
サイトのテーマに合わせてピンク、黄色、ビジネス、青など様々な色が選べるのは嬉しいです。
今回はデモサイトで「淡空」を選びました。
ライトなブルーがとてもおしゃれで清々しい雰囲気のブログになりました。
「記事を読む」ボタンの色のカスタマイズ
今回の「記事を読む」ボタンのカスタマイズは、自分で色を決めるのではなく、すでにサイト上に使われている色を使おうと決めていました。
それはサイトに統一感を出すためです。はっきり言ってしまえば、素人が好きな色を選んで入れ込んで、サイトの色の構成が変だよねと言われたくないというのが本音でした。
サイトの中に使われている色を調べる
今回はSimplicity2の「淡空」を使っているので、すでにサイト上に色付けされている色と同じ色を使うことにしました。
サイトで使われている色のコードは、Digital Color Meterで調べました。
Macを使用している方は使うと便利です。
子テーマのスタイルシートにコードを書き込む
色を決めた後はコードの書き込みです。
管理画面の「外観」→「テーマの編集」→子テーマの「スタイルシート（Style.css)」を開きます。
スタイルシートの一番下に、下記のブログに記載されているコードを入力します。
もちろんカラー指定は変えました。
したの写真のように書き込みます。
今回書き込んだ、私のコードは以下の通りです。
/* 「記事を読む」ボタンの装飾 */
.entry-read a{
color:#fff;
font-size:14px;
background-color:#61ADDB;
border:1px solid #61ADDB;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
}.entry-read a:hover{
color:#444444;
background-color:#F2F8FC;
border:1px solid #61ADDB;
}
カラーコード#61ADDBや#F2F8FCはSimplicity2の「淡空」で表示される色のカラーコードです。
カラーコードを書き込んだ後、「ファイルを更新」ボタンを押すと反映されます。
今回のカスタマイズにより、「記事を読む」ボタンはこのように変化しました。
＜通常時＞
↓
＜カーソルを当てた時＞
以上でWordPressの無料テーマSimplicity2の個別投稿記事に表示される「記事を読む」ボタンに色をつけるカスタマイズの紹介を終わります。