[Blogger] ヘッダ、ウィジェットの余白を調整

Atom | RSS

このサイトを検索 | Search this site

[Blogger] ヘッダ、ウィジェットの余白を調整

Awesomeテンプレートの修正備忘録です。

• ウィジェット間のスペースを 8px に統一した
• Navbarの表示領域をゼロにした

変数：widget.padding.side

変数は Variable name で定義されています。

投稿エリアとサイドバーの余白

 .main-inner .widget { background-color: $(widget.background.color); border: 1px solid $(widget.border.color); padding: 0 $(widget.padding.side) 15px; margin: 20px -16px;

<Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px" min="0" max="100px" value="8px"/>

変数：date.space

Headerとmain-innerの余白

.main-inner { padding-top: $(date.space); }

<Variable name="date.space" description="Date Space" type="length" default="30px" min="0" max="100px" value="8px"/>

CSS追加

Navbarを非表示にしてもNavbar領域は確保されたままになるので height=0 に設定しました。

ヘッダー上部のマージン（navbar領域）をゼロにする

#navbar {
  height: 0;
}

AwesomeInc の記事 (Articles about the AwesomeInc)

1. Blogger: ブログのページ幅を最適化（アドセンス対策）
2. moreタグの動作をカスタマイズする方法｜Blogger
3. アドセンスコードをmoreタグの位置に挿入する方法（同期コード）
4. more タグの位置にアドセンスコードを挿入する方法
5. モバイルユーザビリティエラーの対処方法 (Blogger)
6. Google Search Consoleに記録された構造化データエラーとは？（対策あり）
7. アドセンスを文末に自動表示させる方法
8. [Blogger] 単一ページのガジェットを制限してアドセンスに準拠
9. [Blogger] ヘッダ、ウィジェットの余白を調整
10. Blogger：CSSの独自クラス名をモバイルテンプレートだけに反映させる方法
11. AwesomeInc ラベルの記事（要約付）
12. Blogger が含まれる記事（要約付）

新着順 (New arrival order)

1. 【2024年度総括】藤井七冠(最優秀棋士)、羽生九段現役続行と会長退任を表明
2. 【バグ】TVerRec 3.4.2 のリネーム処理不具合とその原因を考察
3. 【恐怖】ポンジスキームとは？歴史から学ぶ詐欺の仕組み
4. 【終息】TVerRec 3.3.9（暫定）で機能制限ほぼ解除、3.4.0リリース！
5. 【緊急】TVerRec 3.3.6緊急リリース！仕様変更に暫定対応
6. 【未解決】TVerRecダウンロード不具合！TVerの仕様変更かも？
7. 【昇級／降級】全棋士ランキング確定、伊藤匠叡王B1へ昇級、羽生九段B2へ降級
8. 【将棋】なぜ藤井聡太は人々を魅了するのか？【2024年度振り返り】
9. 【更新】Lhaz 2.5.4リリース！法人利用が有料化へ
10. 【Pixel 3月／2025】カメラ、WebView 、Bluetooth、電話のバグ修正【Android 15】

タイトル：[Blogger] ヘッダ、ウィジェットの余白を調整：SC2

このサイトを検索 | Search this site