当サイトの自作テンプレートはカスタマイズ推奨です。テンプレートのカスタマイズについて、自己流ではありますがおすすめのカスタマイズ方法がありますので、その流れをざっと紹介しておきたいと思います。

CSSを変更する

Googleのデベロッパーツールを使う

デベロッパーツールの画面

GoogleChromeに付属しているデベロッパーツールを使うと、サイトのCSS設定を簡単に行うことが出来ます。普段自分が使っている方法は以下の通りです。


デベロッパーツールの詳しい使い方は以下の記事を参照してください。

Chromeデベロッパーツールを使えばカスタマイズが捗ります

Chromeデベロッパーツールの使用方法をまとめました。

XML（HTML部分）を変更する

VS Codeを使う

vs codeの画面

Bloggerのテンプレートファイルを編集するエディタとして個人的におすすめなのが「VS Code」です。これはMicrosoftが公開している様々なプログラミング言語に対応したエディタで、無料で使うことが出来ます。HTMLやCSSのみならず、JavaScriptなどにも対応しているので、Bloggerユーザーならばこれ一つで大体の作業が効率的に行えるようになります。VS Codeを使ったテンプレートの編集の流れは以下の通りです。


VS Codeについては以下の記事でまとめています。

VS CodeでBloggerテンプレートを編集すると楽かも!?

プログラミング学習を始めてから「VS Code（Visual Studio Code）」というエディタを愛用するようになったのだけど、どうやらBloggerのテンプレート編集にも便利に使えるっぽい。 Bloggerは独自の文法らしく、様々な言語に対応しているVS Codeでも予測変換機能は使えないようだが、テンプレートの自作に当たって便利な使い方を発見したので、ここに書き残しておこうと思う。

標準のテンプレートエディタを使う

標準エディタの画面

Bloggerには標準でテンプレートエディタが用意されています。編集画面とブログをブラウザで開き、同時に更新することでリアルタイムで変更を確認できます。しかし、フリーズすることが多いので、個人的にはあまり使っていません。標準エディタを使ったテンプレートの編集の流れは以下の通りです。


新テーマのテンプレートエディタには以下のようなショートカットキーがあるようです（発見したもののみ）。