【Simplicity2カスタマイズ③】「記事を読む」ボタンを装飾して位置を右側に移動する方法

Simplicity2_カスタマイズ③ WordPress

今回行うカスタマイズは、「記事を読む」ボタンの装飾です。

 

「記事を読む」ボタンを装飾して目立たせてみましょう!

ついでに、「記事を読む」ボタンの位置を変更してみたいと思います。

 

↓こんな感じです。

Simplicity2_カスタマイズ

 

「記事を読む」ボタンを装飾しよう

さっそく「記事を読む」ボタンを装飾していきます。

 

やり方は前回の記事で行った、「記事と記事の間に境界線を引く」ときと同じです。

【Simplicity2カスタマイズ②】コピペで簡単♪記事と記事の間に境界線を引く方法
今回行うカスタマイズは、「記事と記事の間に境界線を引く」です。 トップページやカテゴリごとのページには記事がずらりと並びますが、デフォルトだと記事と記事の間にはなにも無い状態です。 そこで、記事と記事の間に境界線を引くことで、見た目...

 

「外観」>「テーマの編集」でテーマの編集画面を開き、Simplicity2の子テーマのスタイルシート(style.css)にコードを追加するだけです。

 

「記事を読む」ボタンを装飾するために追加するのは次のコードです。

/* 「記事を読む」ボタンの装飾 */
.entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#57b196;
 border:1px solid #57b196;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }
 
.entry-read a:hover{
 color:#fff;
 background-color:#9fd2c3;
 border:1px solid #9fd2c3;
}

3行目の「color:#○○;」の○○を変えると文字の色が変更できます。

 

同様に5行目の「background-color:#○○;」の○○を変えると背景色が変更できます。

他の行の「#○○」についても、○○を変えることで色が変更できますので、好みの色に変えちゃいましょう。

 

ちなみに、上記コードの下のかたまり(「.entry-read a:hover」で始まるところ)は、「記事を読む」ボタンにマウスポインタを合わせたときの色です。

 

 

さらに関連記事の「記事を読む」ボタンも同じように変更したい場合は、次のコードを追加してください。

/* 関連記事の「記事を読む」ボタンの装飾 */
.related-entry-read a{
 color:#fff;
 font-size:14px;
 background-color:#57b196;
 border:1px solid #57b196;
 border-radius:2px;
 padding:3px 10px 3px 5px;
 text-decoration:none;
 }
 
.related-entry-read a:hover{
 color:#fff;
 background-color:#9fd2c3;
 border:1px solid #9fd2c3;
}

さきほどのコードの 「.entry-read a」の部分が「.related-entry-read a」になっているだけです。

 

「記事を読む」ボタンの位置を右側へ移動しよう

つづいて、「記事を読む」ボタンの位置を右に移動させます。

「記事を読む」ボタンは右にあった方がなんとなくすわりがいい気がします。

 

これもSimplicity2の子テーマのスタイルシート(style.css)に次のコードを追加するだけです。

/* 「記事を読む」ボタンを右へ移動 */
.entry-read {
  text-align: right;
  margin-right: 10px;
}

 

「margin-right:○px;」の○の数字は「記事を読む」ボタンの右側の余白をどれだけ確保するかを設定する値なので、好みの値に調整してください。

 

これでトップページの「記事を読む」ボタンを右側に移動できました。

 

 

同じように、関連記事の「記事を読む」ボタンを右側に移動させたい場合は、次のコードを追加してください。

/* 関連記事の「記事を読む」ボタンを右へ移動 */
.related-entry-read {
  text-align: right;
  margin-right: 10px;
}

 

まとめ

今回は、「記事を読む」ボタンを装飾して、さらにボタンの位置を右側に移動させるカスタマイズを行いました。

前回同様、スタイルシートにコードをコピペするだけなので、簡単にできたかと思います。

 

次回も引き続き簡単にできるカスタマイズを紹介したいと思います。

次回はスマホ表示で「記事を読む」ボタンと本文抜粋を非表示にする方法について解説します。

【Simplicity2カスタマイズ④】スマホ表示で「記事を読む」ボタンと本文抜粋を非表示にする方法
前回は「記事を読む」ボタンを装飾して、さらにボタンの位置を右側へ移動するというカスタマイズをしました。 PCで表示する場合は画面が広いため色々な情報が表示されていても問題ないのですが、スマホで表示する場合は画面が狭いため、多くの情...

 

当ブログで行ったカスタマイズのまとめはこちら↓

【Simplicity2カスタマイズ】WordPress初心者が行った6つの方法【まとめ】
WordPressテーマ『Simplicity2』を愛用している私が行ったカスタマイズ方法をまとめて紹介します!WordPress初心者でも簡単にできるカスタマイズばかりですよ♪

コメント