MR.HARIKIRI-INSIGHTS

[WordPress] テーマ・カスタマイズ – Twenty Seventyテーマの2カラム表示の幅の拡大　[2019/09/03] ID1775

—

by

harikiri
in
Post Views: 179

はじめに

WordPressでblogを始めた頃は、先人の投稿を参考にしテーマを「Twenty Seventy」にしていました。2020/08現在は、WordPressのバージョンアップととにも搭載されたシングル・カラムであるTwenty Twentyに変更しています。

以下の記事は、Twenty Seventyの表示の体裁について、CSSもよく分からないまま、先人の知恵をお借りしてなんとか設定していた頃の記録です(2020/08/25, Mr.Harikiri)

Twenty Seventyテーマの2カラム化

以前、使っていたサイトのStyleは、「Twenty Seventeen」でしたが、メインとサイドバーの幅をデフォルト設定から画面いっぱいに広げていました。

WordPress、CSSなど、全く何もわかっていなかった時期でした。

iPadで閲覧した時に、デフォルトでは、左右に余白があり有効活用されていませんでしたので、スペースの有効活用の情報収集として、数時間のネットサーフィンの結果、やはり同じような事を考えて、解決されたブロガーさんがおられました。

以下のコードは、プログ「妻と僕。」さんから頂きました。ありがとうございます。

設定方法

WordPress > 左メニュー > 外観 > カスタマイズ > 追加CSS (編集窓にコピペ)
/*
* 説明 : widthを効率化する
*/
@media screen and (min-width: 48em) {
.wrap {
max-width: 1100px;/*記事・サイドバー・余白の全幅*/
padding-left: 2em;/*記事の左余白*/
padding-right: 2em;/*サイドバーの右余白*/
}
.has-sidebar:not(.error404) #primary {
float: left;
width: 67%;/*記事幅*/
}
.has-sidebar #secondary {
float: right;
padding-top: 0;
width: 29%;/*サイドバー幅*/
}
.navigation-top .wrap {
max-width: 1100px;/*メニューバー幅*/
padding: 0.75em 3.4166666666667em;
}
.site-content {
padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
}
}
編集履歴
2019/09/03 Mr.はりきり
2020/07/28 修正(過去の状況であることを明確に記述)

関連記事:

[WordPress] 標準テーマ Twenty Twenty – 文字関連を調整する [2019/12/08] ID3892 [WordPress] 自作プラグイン、Twenty Twentyテーマ幅の修正、子テーマのcontent.phpをいじる – △ID11199 [2020/03/01] ID11199 [愚者は経験から学ぶ] WordPressのあるカテゴリの表示ができないことに気づいた，その奮闘と解決 [2019/11/23] ID3549 twenty twentyWordPress 5.3 標準テーマ Twenty Twentyに完全移行 ID4018 [WordPress] 親テーマを変更せずテーマをカスタマイズ – 子テーマを作り変更したを加える – 手始めは、content.phpの編集 ID7726 [WorPress] dashicons.min.css、headerからfooterに移動してページ速度改善を模索する ID9438 [WordPress] author-bio の幅設定 – CSS for TwentyTwenty [工事中] 2020/02/26] ID10899 The site post list displaying improved by additional coding to the code of “Flex Post” plugin -ID14897 [2020/06/16] ID14897 [WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – [2020/09/11] ID22353 [WordPress] Widget Logic プラグイン [2020/12/17] ID26082