Simplicity2で「記事を読む」を右側に寄せるカスタマイズ

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、抜粋記事の「記事を読む」ボタンを右側に寄せてみた。合わせて、関連記事でも同様のカスタマイズをした。このサイトで使用したCSSのコードを貼ってある。

Simplicity2のバージョンは2.6.3。

CSS変更する際の注意

WordPress上で「外観」→「テーマの編集」にある「スタイルシート(style.css)」に変更したいコードを追加していく。その前に2つほど気をつけておくことを。

CSSのカスタマイズは子テーマで

親テーマを直接触るなんて怖くてできない。以下のサイトで「Simplicity2カスタマイズ用の子テーマファイル」をダウンロード。これ、常識。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

変更していなければブラウザのキャッシュをクリアを

変更されていなくても、ブラウザのリロード(再読込)をすれば、たいていはCSSの変更を反映してくれるはず。もし、変更されていない場合はブラウザのキャッシュをクリア(スーパーリロード)を試してみる。
(例)Windows
Firefox:Ctrl + F5 または Ctrl + Shift + R
Google Chrome:Ctrl + F5 または Shift + F5

記事一覧の「記事を読む」を右側に寄せるカスタマイズ

Simplicityでは抜粋記事の「記事を読む」が左側にあるのがデフォルトだ。アイキャッチ画像が右にあり、文字も左から右に流れるため、全体の重心が左寄りになるのが気になった。「記事を読む」を消去することも考えたが、とりあえず右に寄せてみた。ちなみに、「記事を読む」はカスタマイザーの設定で「Read more」に変更してある。

ちなみに、このカスタマイズはPCのみ。

記事一覧の「記事を読む」を右側に寄せるコード

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

「margin-right」は右の余白だ。pxの数値をいろいろと打ち込んでみて、これに落ち着いた。

関連記事の「記事を読む」を右側に寄せるカスタマイズ

記事下にある関連記事も同じようにしてみた。

関連記事の「記事を読む」を右側に寄せるコード

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

「p.related-entry-read」が関連記事の「記事を読む」ボタンを示している。先程の「entry-read」はトップページの「記事を読む」ボタンだ。

記事を読んでもらうために

「記事を読む」ボタンは、その名前の通り、訪問者にクリックして記事の続きを読んでもらいやすいようにしたい、という意図がある。ただ、あまりガイド(道筋)が多いと訪問者は迷子になる。「記事を読む」を表示せずに、抜粋記事全体をひとつのカードとしてクリックしてもらうほうがいいのかもしれない。実際、そういうサイトが多くある。親切のための貼り紙は少ないほうが効果的なんだろう。