の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【WordPress】テーマ「Stinger5」をカスタマイズして記事の幅を広げてタイトルと左揃にする方法

             

   

WordPressのテーマ「Stinger5」ではタイトルと「本文の始まり位置(コンテンツ)」が少しづれています。

背景色と記事本文の色を変えている場合は、揃っているように見えます。

しかし「の まとめ」のようにサイトの背景色も記事の背景色も同じ場合、ズレているように感じてしまいます。

というわけで、記事の幅を調整し左揃えにする方法を紹介します。

前提

  • WordPress 4.1
  • stinger5ver20141227

状況説明

まず、デフォルトの状態です。

背景色と記事背景色が異なるため、違和感はありません。

20150207-demo1

ところが、背景色と記事背景色が同じだと、ズレているように感じます。

20150207-demo2

というわけで、今回はタイトルと記事の始まり位置を左揃えにします。

方法

1.WordPressにログイン→「外観」→「テーマの編集」をクリックして「スタイルシート(style.css)を選択します。

20150207-demo3

2.クラス「main」を修正します。5つある「main」の1番下です。

20150207-demo4

3.paddingの値を次のように修正します。

修正前

padding : 20px 40px;

修正後

padding : 0 20px 20px 0;

4.ファイルを更新して作業完了です。結果は次のようになります。

20150207-demo5

まとめ

Stinger5で、背景色とコンテンツ背景色を同色にした場合、クラス「main」のpaddingを設定して、ヘッダーとコンテンツを揃える方法を紹介しました。

このままでも問題ありませんが、やはり背景色を設定したくなった場合、次のようにmargin-leftを追記しpaddingの左値を設定すれば、違和感が少なくなります。

margin-left: -8px;
padding: 0 20px 20px 10px;

 

背景色とコンテンツ背景色が同じでヘッダーとコンテンツを揃えたい人は、参考にしてみてください。

 - WordPress ,

336-280

  関連記事

【WordPress】テーマ「Stinger5」の広告の位置を変更してみました

WordPressのテーマ「Stinger5」の広告の位置を変更してみました。 …

【WordPress】テーマ「Stinger5」のSNSシェアボタンをフラットにしてシェア数を表示する方法

Stinger5のSNSシェアボタンを変更して、フラットにしてシェア数を表示する …

【WordPress】stinger3のSNSボタンをフラットな感じに変更する方法

ここではWordPressのテーマ「stinger3」のSNS用ボタンをフラット …

リンクの例
【WordPress】アイキャッチ付きサイト内記事へのリンクを作成する方法

アイキャッチ付きのサイト内記事リンクを作るプラグインを紹介します。 functi …

【WordPress】テーマ「Stinger5」のタイトルにカテゴリー名を入れる方法

サイト名を「まとめと比較」を「の まとめ」に変更しました。 カテゴリーの特色が強 …