カテゴリー
CSS WordPress

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

[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
スポンサーリンク
by Google Ads ID8603

はじめに

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
スポンサーリンク

用語の解説、関連タグ付き投稿の抽出

theme

WordPress 5.3 標準テーマ Twenty Twentyに完全移行 – ID4018
[WordPress] 標準テーマ Twenty Twenty – 文字関連を調整する – ID3892 [2019/12/08]
[WordPress] テーマ・カスタマイズ – Twenty Seventyテーマの2カラム表示の幅の拡大 – ID1775 [2019/09/03]

Twenty Seventy

two column

テーマ

[WordPress] 標準テーマ Twenty Twenty – 文字関連を調整する – ID3892 [2019/12/08]
[愚者は経験から学ぶ] WordPressのあるカテゴリの表示ができないことに気づいた,その奮闘と解決 – ID3549 [2019/11/23]
[WordPress] テーマ・カスタマイズ – Twenty Seventyテーマの2カラム表示の幅の拡大 – ID1775 [2019/09/03]
スポンサーリンク
  • by Google Ads ID:11145
  • by Google Ads ID:11143(2)
  • by Google Ads ID23293
  • by Google Ads ID24747

Update ID21920

HEALTH, kidney
[健康] 高尿酸血症の痛風リスクと食事 (血液中の尿酸値と寿命, 2015-より) – ID17187 [2020/06/07]

Post Views: 49 尿酸値 兵庫県保健医協会のホームページから、血液中の尿酸値と寿命について言及されていたのでその内容1)をまとめた。 血液中の尿酸とは、遺伝子の材料であるプリン塩基の最終産物、すなわち老廃物で […]

analysis, BIOLOGICS, production
[Bio-Equip] SoloVPE – 高濃度タンパク質の無希釈測定 – GMP対応 – ID17284

Post Views: 46 目次1 SoloVPE2 編集履歴 SoloVPE 抗体医薬品のタンパク質濃度は、患者利便性から静注から皮下注に移行が進められているため、高濃度化製剤となってきています。 高濃度タンパク質は […]

スポンサーリンク
by Google Ads ID19417
analysis, BIOLOGICS, production
[Bio-Equip] キャピラリー電気泳動システム – PA 800 Plus – SDS-PAGEおよびIEX分析 – ID17286

Post Views: 49 CESI 8000 Plus 抗体医薬を製造して品質を分析しますが、その分析項目には、電気泳動分析が含まれます。数年前では、プリキャスト・ゲルを使用した分析です。 キャピラリー電気泳動は、オ […]

更新された投稿の最新順

スポンサーリンク
  • by Amazon ID13339
  • by Amaozn ID13196
スポンサーリンク

スポンサーリンク
  • by Google Ads ID24747
  • by Google Ads ID23293
  • by Google Ads ID:11143(2)
  • by Google Ads ID:11145

最新記事(WordPress, ID:14681)

site setting, Synology, WordPress
[Synology] RT2600ac – FAQ – アクセスログが残っていない – ID30977 [2021/08/12]

Post Views: 15 RT2600ac管理FAQ アクセス・ログが残っていない 考えられる理由は以下の通り ログの保管場所が設定されていない 外部メモリ(SDカード、USBメモリ)を変更した 編集履歴 2021/ […]

plugin, site setting, WordPress
はりきり(Mr)のプログ・書き方のスタイル – 適当にやっているように見えても最終目的はブレないスタイルはある – ID30216 [2021/05/30]

Post Views: 49 目次1 はりきり(Mr)のブログ・メンテナンス・スタイル2 編集履歴 はりきり(Mr)のブログ・メンテナンス・スタイル 適当です。毎日、決まった時間に発信することはありません。ボリュームもま […]

plugin, WordPress
[WordPress] [link] 記事表示のカスタマイズ – パンクズリストを表示させる – ID30029 – [2021/05/19]

Post Views: 29 パンクズリスト パンクズリストは、サイトで移動した履歴です。表現形態は、フォルダーのパスのようなものです。 パングスリストをサイトに表示させる方法が、「kinsta」に解説されています。方法 […]

WordPress
[WP] Ultimate MemberをSimple WP Membershipに変更 – ID29745 [2021/05/13]

Post Views: 33 目次1 はじめに2 編集履歴 はじめに WordPressサイトでメンバーシップ機能を実現するプラグインの話です。Ultimate Member (UM) プラグインについては、当サイトをい […]

security, Synology, WordPress
[Synology] セキュリティ改善法 – Threat Preventionとファイヤーウォールの運用を連携する – ID28980 △[2021/08/01]

Post Views: 38 目次1 はじめに2 ルーチンワークの概要3 ルーチンワークの詳細3.1 Threat Preventionの操作3.2 ネットワークセンターの操作4 Alert4.1 ET POLICY O […]

スポンサーリンク
by Google Ads ID19417
plugin, site setting, WordPress
Plugin Maintenance – AMPサイトでのプラグインの運用評価を記録 – ID28378 [2021/04/04]

Post Views: 38 All in One SEOプラグイン (2021/03/13) メタディスクリプション記述のみに使用していたが、このプラグインから依存を完全になくすために、まずは、その記述内容を抜き出し、 […]

Page: 1 2 24
スポンサーリンク

スポンサーリンク
  • by Google Ads ID:11145
  • by Google Ads ID:11143(2)
  • by Google Ads ID23293
  • by Google Ads ID24747

その他記事(ALL-RANDOM, ID:16786)

BIOLOGICS, key-word
[用語] フコース; fucose – ID18759

Post Views: 49 fucose fucose: デオキシ糖の1種である6-デオキシ-ガラスクトース, C1H12O5, 分子量164.16 編集履歴 2020/07/11 Mr.HARIKIRI

english
今日の英語 – コロナウイルス感染者が1,000人を超えた – over 1,000 new case … ID26414 [2020/12/31]

Post Views: 56 over 1,000 new case of the coronavirus NHK WORLDから速報(2020/12/30)が以下の通り出ました。 Tokyo Metropolitan […]

スポンサーリンク
by Google Ads ID19417
BIOLOGICS, vaccine
[Data Link] 田辺三菱製薬のワクチン戦略 (2017) ID19456

Post Views: 56 田辺三菱製薬のワクチン戦略 データリンク(バイオロジクスに関するもの)として格納します 日経のサイトに詳しい資料が掲載されてされています。ワクチンに関する基礎的知識、連携している阪大微生物研 […]

スポンサーリンク

スポンサーリンク
by Google Ads ID:11143(2)

- 以下のツールに敬意を示します -
Support to AMP (Accelerated Mobile Pages) by official AMP plugin for WordPress, and compatible powered by
Post viewing : Flex Posts - Widget and Gutenberg Block