【Simplicity2カスタマイズ⑤】トップページの「記事を読む」表示をカスタマイズする方法

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「トップページの「記事を読む」表示をカスタマイズする」です。

これもスタイルシート（style.css）にコードを書くだけで簡単に変更できるカスタマイズですね。

▼変更前の記事を読む

文字で表示されているだけのリンクをボタン表示のようにカスタマイズします。

スタイルシート（style.css）にコードを記述

記述するコードはいくつかありますが、まずは以下のコードを。

/*---------------------------------
トップページの記事を読む表示の装飾
--------------------------------*/
.entry-read a{
 color:#ffffff;
 font-size:14px;
 background-color:#2c7cff;
 border:1px solid #2c7cff;
 border-radius:2px;
 padding:3px 5px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#fff;
 background-color:#bad3ff;
 border:1px solid #bad3ff;
}

/*---------------------------------

トップページの記事を読む表示の装飾

--------------------------------*/

.entry-read a{

color:#ffffff;

font-size:14px;

background-color:#2c7cff;

border:1px solid #2c7cff;

border-radius:2px;

padding:3px 5px 3px 5px;

text-decoration:none;

}

.entry-read a:hover{

color:#fff;

background-color:#bad3ff;

border:1px solid #bad3ff;

}

デフォルトのシンプルな状態から記事とともにカスタマイズしているこのテストサイトはブルーをサイトカラーとしているので、背景の色を青く文字を白文字で表示させるようにしています。

【border-radius】で四角く囲っている線の丸みを調整できますし、【padding】の数字を変えれば、四角枠の大きさを調整できますので、自分好みにされるといいと思います。

▼「記事を読む」が青いボタンのようになりました

続いて、「記事を読む」を右端の方に寄せるためのコードが以下です。

/*---------------------------------
記事を読むを右に
--------------------------------*/
.entry-read {
  text-align: right;
  margin-right: 10px;
}

/*---------------------------------

記事を読むを右に

--------------------------------*/

.entry-read {

text-align: right;

margin-right: 10px;

}

【margin-right】は四角枠の右側をどれくらい空けておくかのコードです。ちょうど10pxぐらいで良い感じでした。

▼「記事を読む」が右端に寄りました

パソコン表示のカスタマイズはこれだけです。

スマホ表示の「記事を読む」のカスタマイズ

このテストサイトでは、こちらの記事（【Simplicity2カスタマイズ④】トップページで表示されるタイトルと記事抜粋の文字を小さくする方法）の時に、スマホの場合は「記事を読む」を表示させないコードを入れていました。

その時に書いていたコードが以下です。

/*---------------------------------
記事を読むと記事本文の抜粋なし
--------------------------------*/
@media only screen and (max-width: 480px) {
.entry-read a{
 display:none;
}

.entry-snippet{
  display:none;
 }
}

/*---------------------------------

記事を読むと記事本文の抜粋なし

--------------------------------*/

@media only screen and (max-width: 480px) {

.entry-read a{

display:none;

}

.entry-snippet{

display:none;

}

このコードを外しておけば、スマホ表示でもちゃんと記事を読むが表示されるようになります。

でも、パソコンのように右端に表示されるというよりは、タイトルと同じような幅で表示されます。

▼こんな感じに

僕的にはスマホ表示の時はこの「記事を読む」は必要ないと感じたので、上記のコードを入れてスマホでは表示されないようにしています。

関連記事もカスタマイズしておこう！

テストサイトでは1カテゴリーに1記事しか作っていないので見本がありませんが、カテゴリー内に2記事以上存在する場合、Simplicity2では記事本文の下に「関連記事」として記事が表示されます。

その時の表示にも「記事を読む」が出てきますので、そこも同じような表示にしておく方が良いでしょう。

そのコードは以下です。

/*---------------------------------
関連記事の記事を読む装飾
--------------------------------*/
.related-entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#2c7cff;
 border:1px solid #2c7cff;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }

.related-entry-read a:hover{
 color:#fff;
 background-color:#bad3ff;
 border:1px solid #bad3ff;
}

/*---------------------------------
関連記事の記事を読むを右に
--------------------------------*/
.related-entry-read {
  text-align: right;
  margin-right: 10px;
}