投稿テキスト内の見出しのサイズ変更

Bloggerに開設したこのブログの、投稿の見出しフォントサイズを変更しました。 --- 僕は、日頃、技術的なメモを、VSCode上で、マークダウン形式で作成しています。 ブログ投稿記事も同じように作成していて、見出し要素（`＃`〜`＃＃＃＃`くらい）までを使用することがあるのですが、 ブログ開設時に選択した、Blogger標準テーマ Awesome.Inc では、見出し（1〜4）のフォントサイズが不自然なので、スタイルを変更することにしました。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcDubxJZNmsWKBL21H7CI2WS5IarztYoMxh9iGt3ShH_YOHcNrbtcZDuT8VrClIP9F_Wsn1MBLg2Y5XcjDK6wA5ajVPArAxFUkrhBZ3ABzYKHtkF4ZKmjTQbVnOB7Ih1SrG5GZE5jG9g/s1600/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcDubxJZNmsWKBL21H7CI2WS5IarztYoMxh9iGt3ShH_YOHcNrbtcZDuT8VrClIP9F_Wsn1MBLg2Y5XcjDK6wA5ajVPArAxFUkrhBZ3ABzYKHtkF4ZKmjTQbVnOB7Ih1SrG5GZE5jG9g/s320/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_01.png" width="320" height="258" data-original-width="622" data-original-height="502" /></a></div> ついでに、テーマデザイナーから変更できるようにしました。 以下、その作業記録です。 <a name='more'></a> --- ## 環境 このブログ運用に関わる環境は、以下の通りです。 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - シンタックス・ハイライト・プラグイン：highlight.js(9.15.6) - 数式表示プラグイン：KaTeX（0.10.0） - マークダウン・エディタ：VSCode（1.33.1） - マークダウン関連拡張機能： - Markdown All in One（2.2.0） - Markdown Preview Enhanced（0.3.13） - Markdown+Math （2.3.9） ## 作成する投稿テキストについて - 投稿テキストで使用する見出し要素（`＃`〜`＃＃＃＃`くらい） - うち、`＃`は投稿タイトルなので、投稿テキスト中で使用する見出し要素は、`＃#` 〜 `＃＃＃＃`、つまり`<h2>` 〜 `<h4>`。 - ブログの投稿のフォントサイズ - 投稿タイトルのフォントサイズは、24px（太字） - 本文のフォントサイズは、16px --- ## 作業 ### スキン変数の追加 `<Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">… </Group>`を参考に、"Post Heading 2" 〜 "Post Heading ４"のフォントをテーマデザイナーから設定できるような以下のコードを準備しました。このコードは`<Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">… </Group>`タグの次に追加しました。 ``` xml <Group description="Post Heading 2" selector=".post-body h2"> <Variable name="post.h2.font" description="Font" type="font" default="normal bold 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 20px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> <Variable name="post.h2.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/> </Group> <Group description="Post Heading 3" selector=".post-body h3"> <Variable name="post.h3.font" description="Font" type="font" default="normal bold 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> <Variable name="post.h3.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/> </Group> <Group description="Post Heading 4" selector=".post-body h4"> <Variable name="post.h4.font" description="Font" type="font" default="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/> <Variable name="post.h4.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/> </Group> ``` ### CSSスタイルの追加 以下のコードを、作成しました。 HTML中の一番最後の`.post-body`の下に追加しました。 ```css /* Headings in Post Body ----------------------------------------------- */ .post-body h2 { font: $(post.h2.font); color: $(post.h2.text.color); } .post-body h3 { font: $(post.h3.font); color: $(post.h3.text.color); } .post-body h4 { font: $(post.h4.font); color: $(post.h4.text.color); } ``` ## 結果 見出しのフォントサイズが変わりました。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAKA4L39nxErGBtMIOC2lhJiK7FmCsdsx6ay_ERSdV0aBYFXkkW71ReGDGLTDSdSRYV08vPvXOz0TCgj5ZIO9qc5rWxlpgGzo67QyQzYc5lgVJehcL0vV3IOWe8s3-VqO75EnGfz4vmoA/s1600/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAKA4L39nxErGBtMIOC2lhJiK7FmCsdsx6ay_ERSdV0aBYFXkkW71ReGDGLTDSdSRYV08vPvXOz0TCgj5ZIO9qc5rWxlpgGzo67QyQzYc5lgVJehcL0vV3IOWe8s3-VqO75EnGfz4vmoA/s320/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_02.png" width="320" height="257" data-original-width="629" data-original-height="505" /></a></div> テーマデザイナーからも見出しのフォントを変えられるようになりました。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Lo0hiiHDRnv3nTUuGvlCr0A47mDuqkhwVAtu3axpOrQxH18E7LK3oQjRblC_vHtK-2OR5HBQ1Fe0jrhnZh-CB0cWO-lJND6JcQOhD9uBG-1ebFK6eXIKeds59fYC6rAhtibPsi2_uLA/s1600/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Lo0hiiHDRnv3nTUuGvlCr0A47mDuqkhwVAtu3axpOrQxH18E7LK3oQjRblC_vHtK-2OR5HBQ1Fe0jrhnZh-CB0cWO-lJND6JcQOhD9uBG-1ebFK6eXIKeds59fYC6rAhtibPsi2_uLA/s320/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_03.png" width="320" height="221" data-original-width="799" data-original-height="551" /></a></div> とりあえず、タイトル、見出し、本文のフォントサイズは以下のように設定しました。 - 投稿タイトル：24px（太字） - 見出し2：24px - 見出し3：20px（太字） - 見出し4：18px - 本文：16px <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3mCO1yZ68BsQSiKBsfryCp07Wvqda0sjlKs48jeZSp-C9jOTLw-wmzChxVi3t6gTQfMFsKR669pPT-muhYZjxel8ljHgDS20e5onPACU0c-fQCeyiCvgDFX_C2c4F1flqUa4YDocgGI/s1600/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3mCO1yZ68BsQSiKBsfryCp07Wvqda0sjlKs48jeZSp-C9jOTLw-wmzChxVi3t6gTQfMFsKR669pPT-muhYZjxel8ljHgDS20e5onPACU0c-fQCeyiCvgDFX_C2c4F1flqUa4YDocgGI/s320/20190502-02_%25E6%258A%2595%25E7%25A8%25BF%25E3%2583%2586%25E3%2582%25AD%25E3%2582%25B9%25E3%2583%2588%25E5%2586%2585%25E3%2581%25AE%25E8%25A6%258B%25E5%2587%25BA%25E3%2581%2597%25E3%2581%25AE%25E3%2582%25B5%25E3%2582%25A4%25E3%2582%25BA%25E5%25A4%2589%25E6%259B%25B4_04.png" width="320" height="262" data-original-width="632" data-original-height="518" /></a></div> ## 参考 - [1] : [【Blogger】シンプルテンプレートをCSSでカスタマイズする](https://blogger-learning-rab.blogspot.com/2018/02/blogger_16.html) --- ## 今後の課題 * [ ] 罫線や背景色など、見出しの修飾は今後検討していきます。 --- ## 更新履歴 2019-05-02 新規作成