「Simplicity」の「記事を読む」ボタンをカスタマイズする方法

初心者向けに、人気のWordPressテーマ「Simplicity」で「記事を読む」ボタンをカッコよくカスタマイズする方法をご紹介します。

今回もコピペで簡単にカスタマイズできますので、ご安心ください。

まず、初期はこんな感じですね。

これをちょっとしたことで、カッコよくしてみます。

コピペで「記事を読む」を変更

子テーマをインストールしていない方は、まず子テーマをインストールしましょう。Simplicityの場合は、こちらからインストールできます。

そして、以下のコードをコピーしておきます。

.entry-read a{
color:#fff;
font-size:12px;
background-color:#0000ff;
border:1px solid #0000ff;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
float: right;
}

.entry-read a:hover{
color:#fff;
background-color:#0000ff;　
border:1px solid #0000ff;　
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}

次に、外観　⇒　テーマの編集　⇒　スタイルシート（style.css）を開いて、赤枠部分に貼り付けてください。

貼り付けたら、「ファイルを更新」をクリックします。「記事を読む」が右側に寄って、青くなれば成功です。

「記事を読む」の前にマークを挿入

下図の赤丸部分を表示するためには、Font Awesome 4 Menusプラグインが必要になりますので、インストールして、有効化します。

そして、先ほどと同様、以下のコードをコピーしておきます。

.entry-read a::before{
margin-right:5px;
font-family:"FontAwesome";
content:"f058";

次に、外観　⇒　テーマの編集　⇒　スタイルシート（style.css）を開いて、先ほど貼り付けた以下コードの続きに貼り付けます。

.entry-read a{
color:#fff;
font-size:12px;
background-color:#0000ff;
border:1px solid #0000ff;
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
float: right;
}

.entry-read a:hover{
color:#fff;
background-color:#0000ff;　
border:1px solid #0000ff;　
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}
/*この下に貼り付ける*/

貼り付けたら、「ファイルを更新」をクリックします。「記事を読む」の左にマークが表示されたら成功です。

オリジナルの「記事を読む」を作成

色の変更

カラーコードから好きなカラーを選んでみてください。

最初に貼り付けたコードをみてみると、4か所に「#0000ff」と記載されているのがわかります。

.entry-read a{
color:#fff;
font-size:12px;
background-color:#0000ff; /*←好きなカラーコードを指定*/
border:1px solid #0000ff; /*←好きなカラーコードを指定*/
border-radius:2px;
padding:3px 10px 3px 5px;
text-decoration:none;
float: right;
}

.entry-read a:hover{
color:#fff;
background-color:#0000ff; /*←好きなカラーコードを指定*/　
border:1px solid #0000ff; /*←好きなカラーコードを指定*/　
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}

この部分を書き換えることで、好きなカラーコードに変更することができるのです。

マークの変更

Font Awesome Iconsから好きなマークを選択できます。めっちゃ種類が多くて目が痛くなりますので、ご注意ください…(笑)

当ブログに設定しているのは、以下のマークです。赤枠内をみると、「f058」と表示されていますよね？

先ほど2回目に貼り付けたコードをみてみると、最下行に「f058」と記載されているのがわかります。

.entry-read a::before{
margin-right:5px;
font-family:"FontAwesome";
content:"f058"; /*←ここでマークを指定*/

つまり、この部分を好きなマークのコードに書き換えるだけで、好きなマークに変更することができるのです。

まとめ

オリジナルの「記事を読む」を作成できましたか？

トップページの印象ががらりと変わるので、ぜひ納得のいく「記事を読む」を作ってみてくださいね！

その他のSimplicityのカスタマイズも参考にされてください！

「「Simplicity」の記事間に区切線を追加する方法」

「「Simplicity」でフォント色を変更する方法」

この記事がみなさまのお役に立てましたら幸いです！