記事の幅を広げるカスタマイズ(V3用)
公開日 更新日 2014/11/22
STINGERをインストールした状態だと、記事の幅が550pxになっています。
550pxだとあっという間に改行してしまうので、この幅を今のうちに650pxに広げておきます。
Information
この記事はSTINGER v3用です。STINGER v5に対する修正はこちらの記事(V5用)にあります。
変更方法
変更方法はスタイルファイル(style.css)だけの変更で簡単にカスタマイズできました。
変更箇所は、次の3箇所です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in { width: 1086px; //★変更前986px; margin-right: auto; margin-left: auto; } #wrap #wrap-in #main { float: left; width: 650px; //★変更前550px; padding-right: 39px; padding-left: 39px; padding-top: 20px; border: 1px solid #ccc; background-color: #FFF; border-radius: 4px 4px 4px 4px; padding-bottom: 20px; } .post .entry .entry-content { float: right; width: 480px; //★変更前380px; padding-left: 20px; } |
元々の値に+100pxした値にしました。
これを保存してあげて、サイトを更新すれば記事の横幅が広がっているかと思います。
その他注意点
スタイルファイルを使って幅を広げるということは、既に書いてあった過去の記事も改行位置をずらすことになります。
変な位置で改行されてしまう場合は逆に読みづらくなりますので、一度横幅を変更したら、過去の記事について全体の見直しをしたほうが良いかもしれません。
レスポンシブ広告
関連記事
-
パンくずリストをもっとカッコよくする
STINGERテンプレートは、WordPressサイトのテーマとし …
-
記事に設定したカテゴリが複数ある場合「パンくず」を全件表示させる
WordPressのSTINGERテンプレートでは、パンくずリスト(ブレッドクラ …
-
「続きを読む」ボタンのデザインをカスタマイズ
WordPressの醍醐味の一つ?であるだろうカスタマイズに着手しました。 巷で …
-
WordPressテーマをSTINGER5にバージョンアップ
STINGER配布サイトにて、STINGERのV5メジャーアップのアナウンスを発 …
-
記事の幅を広げるカスタマイズ(V5用)
以前STINGER v3にて、こちらの記事(記事の幅を広げるカスタマイズ)で記事 …
-
記事一覧に表示する各記事の抜粋を綺麗に整形表示する
STINGERのホーム画面や月まとめ等のアーカイブ系のページに表示される記事一覧 …
-
CSSファイル数を減らしてページ表示時間を最適化
STINGERテンプレートの場合、ダウンロード対象のCSSファイルは2つあります …
-
スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V3用)
WordPressのSTINGERテンプレートに対して、記事タイト …
-
スクロールしても記事タイトルをずっと画面に固定表示するカスタマイズ(V5用)
はじめに STINGER V3からV5にバージョンアップしたのが2014/9/ …
-
広告フロートの動きがおかしい問題の回避方法
WordPressテーマSTINGERの サイドバーにある「スクロール広告用」は …