カテゴリー
CSS WordPress

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

本編 >

[WordPress] テーマ・カスタマイズ – Twenty Seventyテーマの2カラム表示の幅の拡大 – ID1775 [2019/09/03]
スポンサーリンク
  • by Google Ads ID23410
  • by Google Ads ID23293
  • by Google Ads ID:11145

はじめに

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

スポンサーリンク
by Google Ads ID19417

以下の記事は、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 高機能無線ルーター VPN Plus対応 日本正規代理店アスク サポート対応 保証2年 NT934 RT2600ac by Amazon ID24327
  • エレコム LANケーブル CAT6A 5m 爪折れ防止コネクタ ホワイト LD-GPA/WH5 by Amazon ID24327

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 修正(過去の状況であることを明確に記述)
スポンサーリンク
  • by Amazon ID13339
  • by Amazon ID13211
スポンサーリンク

ここまで

< 本編はここまで。

スポンサーリンク
  • by Google Ads ID23410
  • by Google Ads ID:11145
  • by Google Ads ID23293

Update ID21920

BIOLOGICS, production, vaccine
[Bio-Edu] Plasmid製造方法 まずは、情報収集から- ID24375 [2020/10/22]※

目次1 生産フロー2 plasmidの培養方法3 精製方法 生産フロー 参考文献4)、1~200L規模のcGMPによるplasmidの製造 Vectorのデザイン copy数 plasmidサイズ (不要な配列の除去)、 […]

anime, LIFE
[アニメ] ヒロイック・エイジ – 宇宙戦闘物語 – ID24353 [2020/10/20]

目次1 ヒロイック・エイジ2 キーワード ヒロイック・エイジ 2007年、TV全26話、宇宙物/宇宙戦艦物/宇宙や人類の発祥の不思議を描いています。3話くらいまでは我慢して視聴してください。おそらく、TVで毎週リアルタイ […]

BIOLOGICS, mRNA, vaccine
[Vc] mRNAワクチンとは – Sanofi, Modernaなどが開発を進めている – ID15091 [2020/05/23]※

目次1 mRNAワクチンとは1.1 mRNAワクチンの優位性2 歴史的経緯3 mRNAを医薬にするためには4 mRNA医薬の構造4.1 1. 5’ Cap4.2 2. 5’ UTR/3’ UTR4.3 3. DRF4.4 […]

Synology, WordPress
[Synology] NAS (DS918+/DS920+)の バックアップを考える – Hyper BackupとSnapshot Replicationの併用 – ID3778 [2020/09/27]※

目次1 はじめに2 Hyper Backup/Snapshot Replication2.1 Hyper Backupで十分か?2.1.1 Hyper Backup2.1.2 Snapshot Replication2. […]

plugin, Synology, WordPress
[WordPress] メンバーシップ・サイトを構築プラグイン – Ultimate Member プラグインの使い方をAMP対応とともに解説 – ID 14027 [2020/10/24]

目次1 はじめに1.1 使い勝手は?1.2 ヒヤカシ2 Ultimate Memberと専用のreCAPTCHAの説明3 まとめ4 Ultimate Memberプラグインの既存の専用ページ5 用途6 システムの構成7 […]

スポンサーリンク
by Google Ads ID19417
Raid, Synology, WordPress
[Synology] DS918+ 初期導入時にはbasic HDD、その後、メモリ増設・SSDキャッシュ増設・HDD追加でRAID 5によりフルスペック化 — さてどうなったか – ID33 [2020/09/19]※

目次1 概要1.1 DS918+の仕様1.2 後継機、DS920+1.2.1 DS920+を導入しました1.3 初期の構築方法1.3.1 最小構成1.3.2 性能評価1.4 その後の更新方法1.4.1 SSD Cache […]

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

スポンサーリンク
  • by Google Ads ID23293
  • by Google Ads ID23410
  • by Google Ads ID:11145

最新記事(WordPress, ID:14681)

security, WordPress
[WP] WordPress – ログイン/アクセス制限に関する設定 – ID24132 [2020/10/09]工事中

目次1 はじめに2 設定ファイル・設定される方のファイル/フォルダ?3 allow?, deny? はじめに WordPressのセキュリティ設定を考えます。WordPressには、各種のファイルがあります。基本的な設定 […]

スポンサーリンク
by Google Ads ID19417
plugin, Synology, WordPress
[WordPress] 「AMP」まとめ – ID22520 [2020/09/13]

AMPの記事まとめ AMPページに対応すべく奮闘しています。当サイトで記事にしたAMP関連と情報リンクをまとめました。 AMP: a well-lit path to optimizing for Google’s pa […]

mail, plugin, Synology, WordPress
[WordPress] Synology (新)NASに立ち上げたWordPressから外へメールを飛ばす – WP Mail SMTP by WPFormsプラグインとGMail APIの設定 – ID22422 [2020/09/13]

目次1 はじめに2 準備3 プラグインのインストール4 API プロジェクトの作成4.1 OAuthクライアント IDの作成 はじめに レンタルサーバーでWordPressの運用と違い、Synology NASにWord […]

plugin, Synology, Theme, WordPress
[WordPress] このサイトの表示に関係する使用している「テーマ」と「プラグイン」のリスト – ID22353 [2020/09/11]※

目次1 はじめに2 システム構成3 プラグイン・リスト はじめに 現在、見られているこのサイトの表示に関わるWordPressテーマ、およびプラグインのリストを公開します。これからWordPressでサイトの構築をされる […]

plugin, Synology, WordPress
[WordPress] 「AMP」プラグイン と広告プラグイン: 「Advance Ads Pro」- 高速化と広告表示の両立を図る – ID22304-UM [2020/09/9]

ナレッジベース 不要な他のPluginを削除して、AMPから再検証する作業を全てのページに施しました。その後、AMPページとしてGoogle Adsの表示が不可になっていました。<br>AMP Pluginを […]

plugin, WordPress
[WordPress] blogに載せる写真のメタデータは、EWWW Image Optimizerで取り除く – ID321 [2020/08/20]※

EWWW Image Optimizerプラグイン WordPressのblogで載せる写真は、そのままのサイズでアップしてはいけません。メタデータはそのまま残っているためです。メタデータのGeotabには、位置情報が記 […]

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

スポンサーリンク
  • by Google Ads ID23410
  • by Google Ads ID:11145
  • by Google Ads ID23293

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

WordPress
[Data Link] WordPress gutenberg editorのカスタマイズに関する記事をまとめた – ID2200

エディット,公開記事などの表示のカスタマイズに関する記事.cssについてまだ良くわかっていないので記事内容の理解がまだできていないが,今後参考になるはずの記事を備忘記録として残す. https://qiita.com/y […]

スポンサーリンク
by Google Ads ID19417
BIOLOGICS, cell, key-word
[用語] Master Cell Banking ID21618

Master Cell Banking GMPに従いマスターセルバンクを製造し液体窒素による超低温保管する 編集履歴 2020/08/24 Mr.はりきり

BIOLOGICS, key-word
[用語] CMO; Contract Manufacturing Organization – ID18728

CMO CMO; Contract Manufacturing Organization; 医薬品製造受託機関, CDMO; Contract Development Manufacturing Organization […]

guideline, medicine
[Data Link] FDAの遺伝子治療薬への強いサポートの表明 – ID8513 (2020/01/28)

FDA Continues Strong Support of Innovation in Development of Gene Therapy Products https://www.fda.gov/news-ev […]

KNOWLEDGE
[Kw] – PBM; Pharmacy Benefit Management – PBM会社とは – ID18844 [2020/07/13]

目次1 PBM : Pharmacy Benefit Management1.1 PBM会社の業態2 PBM会社のヒストリー3 米国PBM会社 PBM : Pharmacy Benefit Management PBM会 […]

AAV, BIOLOGICS, transfection
[rAAV-Production] – 治療用AAV Vector製造 – 考慮事項 – ID12844-UM [2020/10/14]

目次1 ウイルス・ベクターと宿主細胞の準備2 目標のAAVベタクー発現量3 Material3.1 Plasmid DNA Batch3.1.1 Plasmidの精製3.1.2 pDNA培養特許3.1.3 pDNA精製特 […]

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

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