Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。
Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。
今回行うカスタマイズは、「トップページの「記事を読む」表示をカスタマイズする」です。
これもスタイルシート(style.css)にコードを書くだけで簡単に変更できるカスタマイズですね。
▼変更前の記事を読む
文字で表示されているだけのリンクをボタン表示のようにカスタマイズします。
スタイルシート(style.css)にコードを記述
記述するコードはいくつかありますが、まずは以下のコードを。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/*--------------------------------- トップページの記事を読む表示の装飾 --------------------------------*/ .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】の数字を変えれば、四角枠の大きさを調整できますので、自分好みにされるといいと思います。
▼「記事を読む」が青いボタンのようになりました
続いて、「記事を読む」を右端の方に寄せるためのコードが以下です。
1 2 3 4 5 6 7 |
/*--------------------------------- 記事を読むを右に --------------------------------*/ .entry-read { text-align: right; margin-right: 10px; } |
【margin-right】は四角枠の右側をどれくらい空けておくかのコードです。ちょうど10pxぐらいで良い感じでした。
▼「記事を読む」が右端に寄りました
パソコン表示のカスタマイズはこれだけです。
スマホ表示の「記事を読む」のカスタマイズ
このテストサイトでは、こちらの記事(【Simplicity2カスタマイズ④】トップページで表示されるタイトルと記事抜粋の文字を小さくする方法)の時に、スマホの場合は「記事を読む」を表示させないコードを入れていました。
その時に書いていたコードが以下です。
1 2 3 4 5 6 7 8 9 10 11 12 |
/*--------------------------------- 記事を読むと記事本文の抜粋なし --------------------------------*/ @media only screen and (max-width: 480px) { .entry-read a{ display:none; } .entry-snippet{ display:none; } } |
このコードを外しておけば、スマホ表示でもちゃんと記事を読むが表示されるようになります。
でも、パソコンのように右端に表示されるというよりは、タイトルと同じような幅で表示されます。
▼こんな感じに
僕的にはスマホ表示の時はこの「記事を読む」は必要ないと感じたので、上記のコードを入れてスマホでは表示されないようにしています。
関連記事もカスタマイズしておこう!
テストサイトでは1カテゴリーに1記事しか作っていないので見本がありませんが、カテゴリー内に2記事以上存在する場合、Simplicity2では記事本文の下に「関連記事」として記事が表示されます。
その時の表示にも「記事を読む」が出てきますので、そこも同じような表示にしておく方が良いでしょう。
そのコードは以下です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/*--------------------------------- 関連記事の記事を読む装飾 --------------------------------*/ .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; } |
トップページの記事を読むは【entry-read】で指定しましたが、関連記事の記事を読むは【related-entry-read a】で指定しているだけで、後のコードは同じです。
これで記事下に出てくる関連記事の記事を読むも、ボタン表示で右端に表示できるようになります。
関連記事の記事を読むは非表示に
と言いつつ、僕的には関連記事の「記事を読む」の表示や、記事の抜粋文は表示しなくていいと感じました。
なので、PC・スマホ関係なく関連記事の「記事を読む」、抜粋文は非表示にすることにしたので、そのコードが以下です。
1 2 3 4 5 6 7 8 9 |
/*--------------------------------- 関連記事の記事を読むと記事抜粋を非表示 --------------------------------*/ .related-entry-read a{ display:none; } .related-entry-snippet { display:none; } |
関連記事の記事を読むや記事抜粋文が非表示で良いという場合は、このコードを記入することでカスタマイズが可能です。
関連記事の間に点線を引く
デフォルトのSimplicity2では、関連記事と関連記事の間に線などの区切りがありません。
少し見にくいので、記事と記事の間に点線を引くことにします。そのコードが以下。
1 2 3 4 5 6 7 |
/*--------------------------------- 関連記事に点線 --------------------------------*/ #main .related-entry { border-bottom: 1px dotted #808080; padding-bottom: 15px; } |
これで記事間に点線が引かれて見やすくなると思います。
「記事を読む」表示のカスタマイズ / まとめ
今回もCSSコードを追記していくだけで出来るカスタマイズでした。
自分の好みに応じてカスタマイズしてあげるとブログに対する愛着度もさらに湧いてくると思うので、ぜひ自分好みにいじってみてください。
ぜひ参考にしてもらえれば幸いです。
次のページはこちら⇒【Simplicity2カスタマイズ⑥】記事一覧をカード型の枠で囲って表示する方法
コメントを残す