インフラエンジニアbacchiのわかったことまとめ

bacchi.me

WordPress

【WP】Stinger3の記事の表示サイズを大きくする

更新日:

Stinger3のデザインを変えた!

現在このブログで使用ているWordPressのテーマ「Stinger3」のデザインを変更しました。

今回は以下のデザインを変更しました。

  • トップ、記事ページのテキストの表示領域の変更
  • トップページの記事タイトル部分の表示サイズの変更
  • トップページに記事と記事の区切り線を追加

作業前の確認事項

今回修正を加えるファイルはstyle.cssです。

修正前にファイルのバックアップを必ず取るようにしましょう!
→これ本当に大事!まじでバックアップはしっかりと取りましょう。

Step1 トップ、記事ページのテキストの表示領域の変更

Stinger3のデフォルトの表示領域のサイズは986pxですが、
今回は1100pxに変更します。

修正場所は「基本構造」でファイル内検索すればわかるはず。

また、記事の表示領域を広くしたのでサイドバーの表示領域を少し小さくしています。

表示サイズは300pxとしています。

Step2 トップページの記事タイトル部分の表示サイズの変更

修正場所は「.entry-conten {」でファイル内検索すればわかるはず。

Step3 トップページに記事と記事の区切り線を追加

修正場所は「.entry {」でファイル内検索すればわかるはず。

[dashed]と指定していますので、区切りは点線になります。

実線にしたい方は、dashedをsolidに変えてやればおkです。

デザインの確認

さて、修正が終わったところで、デザインの確認をしていきましょう!

ビフォー

normal

アフター

blog_after

がっつりデザイン変わってますね!

So Good!
congratulation

Sponsor Link

スポンサーリンク

Sponsor Link

スポンサーリンク

-WordPress

Copyright© bacchi.me , 2018 AllRights Reserved.