STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり幅を調整したりする際のCSS設定

※2017年現在、当ブログではWordPressテーマとして「STORK(ストーク)」を使用しています。以下の記事は参考資料として公開しております。


STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり、幅を調整したりする際のCSS設定。

side_bar

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/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です