2017年現在、当ブログではWordPressテーマとして「STORK(ストーク)」を使用しています。以下の記事は参考資料として公開しております。
STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり、幅を調整したりする際のCSS設定。
CSSの修正部分(子テーマに書き込み)
/*----------------------------- 基本構造 ------------------------------*/ #header-in, #wrap-in, #navi-in, #footer-in, #gazou-in { width: 986px; margin-right: auto; margin-left: auto; } #wrap #wrap-in #side { float: left;/* 元:right(1) */ width: 250px;/* 元:336px(1) */ } #wrap #wrap-in #main { float: right;/* 元:left(2) */ width: 636px;/* 元:550px(2) */ 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; } /* 一覧表示時のタイトルと抜粋の幅(4) */ .post .entry .entry-content { float: right; width: 466px;/* 元:380px */ padding-left: 20px; } /*----------------------------- 検索フォーム(3) -----------------------------*/ #container #wrap #wrap-in #search { padding-top: 20px; padding-bottom: 0px; } #s { width: 180px;/* 元:266px */ height: 24px; border: none; color: #333; padding-top: 4px; padding-right: 10px; padding-bottom: 4px; padding-left: 10px; background-color: #CCC; font-size: 14px; border-radius: 0; } #searchsubmit { position: absolute; top: 0; _top: 1px; left: 200px;/* 元:286px */ border-radius: 0; } *:first-child + html #searchsubmit { top: 1px; } #container #wrap #wrap-in #side #search #searchform { position: relative; }
本文記事内の画像の最大幅を設定する
上記の修正を受けて、本文記事内の画像の横幅は最大632pxになった。
しかし、この状態だと、画像をUPしたい際にSTINGERデフォルトの546pxで自動リサイズがかかってしまう。
これは「設定 > メディア」で画像サイズを指定しても無視されます(下記の$content_widthが優先させるため)。
そこで親テーマ(テーマのための関数:function.php)の内の以下の部分を修正する(*1)。
//contents widthの指定(元546) if ( ! isset( $content_width ) ) $content_width = 632;
参考:http://firegoby.jp/archives/2526
(*1)function.phpの修正は他のファイルと異なり基本的に子テーマが利用できない。既存ファイルにないものを追記する形は子テーマで可能なものの、今回の設定のように既存の設定を修正(上書き)させる目的で子テーマを作成することはできない。
http://presentnote.com/child-theme-customaize-functions-php/
コメントを残す