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

by Google Ads ID:11145
by Google Ads ID23293
by Google Ads ID:11143(2)
by Google Ads ID24747

Post Views: 90

by Google Ads ID8603

1 はじめに
2 Twenty Seventyテーマの2カラム化

はじめに

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

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

Synology DS517 by Amazon ID:22173
Synology DS920+ by Amazon ID:22172
オムロン BY50S用パック by Amazon ID:22171
オムロン BY50S by Amazon ID22170
Synology 高機能無線ルーター 800Mbps + 1,733Mbps(11a/b/g/n/ac対応) 高セキュリティ VPN Plus対応 RT2600ac by Amazon ID24327
エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタホワイト LD-GPA/WH5 by Amazon ID24327

Twenty Seventyテーマの2カラム化

by Rakuten ID:15895

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

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

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

by Google Ads ID19417

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

設定方法

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 修正(過去の状況であることを明確に記述)

by Amazon ID13211
by Amazon ID19245

【Amazon.co.jp 限定】HP USBメモリ 128GB USB 3.1 スライド式金属製 HPFD796L-128 GJP by Amazon - ID 24751
3Dプリンターダヴィンチ Jr. 1.0(造形サイズ15×15×15cm) - 環境に優しい土に返るPLAフィラメント - ダビンチ Jr. 1.0 XYZプリンティングジャパン by AMAZON ID21513
3Dプリンター|ダヴィンチ1.0 pro|オートキャリブレーション機能付|オープンフィラメント可|ABS対応|造形サイズ20×20×20cm|レーザー刻印機能拡張可|積層ピッチ0.02mm~|3F1AWXJP00F - XYZプリンティングジャパン by AMAZON ID21511
ABS使用可造形サイズ175×175×175mm オープンフィラメント可オートキャリブレーション機能付きレーザー刻印機能拡張可金属系PLA拡張可 3FJSPXJP00G - ダビンチ Jr.Pro X+ XYZプリンティングジャパン by AMAZON ID21509
zedela 5-in-1 USB-Cハブ【3ポート5Gbps by Amazon - ID 24751