カスタマイズですがどこまでやるかで難易度は大きく変わってきます。標準テンプレートであれば管理画面 - テーマのカスタマイズより各パーツの色や大きさなどが変更でたり同画面 - 上級者向けにある”CSSを追加”より好みのCSSを追加できたりします。
ただしどうしても標準テンプレートではカスタムの限界があるのでBloggerユーザーは公開テンプレートファイル（xml）の修正をしていくことになると思います
※標準テンプレート以外でもBloggerテーマデザイナーが利用できるものがあるようです。
blogger無料テンプレート「Tokyo」はBloggerテーマデザイナーが利用できました。
テンプレート探しの一つの条件としてみるのもよいかもですね。
（今更こんなこと言ってすみません💦）
このブログではテンプレートファイル修正のコツと追加CSSについて書いていきたいと思います。
今回はテンプレートファイル修正のコツについて書きます。
修正のコツを説明するまでが長いけどお付き合いください💦
WEBページの基本構造（超概要）
WEBページはコード（HTML、CSS、JavaScript）で出来上がっています。（ブラウザで右クリック→"ページのソースを表示"で出てきているやつです）
で、そのWEBページのソース構造を超簡単に言うと下のような感じになっています。
<html>
<head>
①
</head>
<body>
②
</body>
</html>
①headタグ
検索エンジンやWebブラウザに向けた情報を定義するコードを記述し、画面上に表示されない部分全体を囲うタグ
（metaタグ、タイトル、外部ファイルのインポートなど）
②Bodyタグ
コンテンツ自身を構成するコードを記述し、画面上に表示される部分全体を囲うタグ
（リンクとかイメージとか目に見えるもの）
この中に画面の配置やら見た目を変える情報などが詰め込まれています。
あまり馴染みのない方は難しく感じるかもしれません。
底はどこまでも深いですが浅い部分は意外とシンプルなものだと思います。
興味ある方はこちらのHTMLクイックリファレンスを見てください。
解りやすいですよ！！
テンプレートファイル修正のコツ
さて、超概要が（きっと）解ったのでテンプレートファイル修正のコツのお話です。ダウンロードしたxmlファイルをメモ帳等テキストエディタで開いてみてください。
（※サードパーティ製のテキストエディタにはHTML編集に関する補助機能あるものがあります）
コードが色々書いてあり意味がわからないと思います笑
が、これを修正していく必要があるのです(´・ω・`)
【第２回】ブログのデザインを変更してみる（検証環境作成＆準備編）の４でアップしたブログ上でキーボードのF12ボタンを押してみてください。
ブラウザによって画面は多少違いますが下のようなデバッグコンソールが表示されます。
①WEBページ上の要素にマウスを合わせると要素の情報が見れます。
②要素に使われているCSSの情報が見れます。
③スマートフォンなどの表示を確認するためのエミュレーション・ウィンドウの表示／非表示ボタン
とりあえずこの３つ使えれば後はテンプレートファイルから該当箇所を探して地味にカスタマイズしていくという方法がとれると思います。
また、気に入ったサイトのソースを見てデザインを参考にすることも可能です。
デバッグコンソールはHTML、CSSを画面上で一時的にコードを追加したり編集したりできます。
こちらのサイトにはもっと詳しく書いてあるのでぜひ参考にしていただければ✨（GoogleChrome版）
画像は"検証サイトを作成する"って部分を選んで赤枠のスタイルが使われているよってわかる画面です。
赤枠の"mycss_h3"って文字列でテンプレートファイル（xml）を検索しスタイルを編集していくと・・・。
・・・・えぇ、とっても地味ですよ？
地味だけどきっと楽しいです💦
きっとできることが増えてくると楽しいはず✨！！
１記事では超超概要しか書けなかったですがこのデバッグコンソールを知っている、知っていないでテンプレートのカスタマイズ計画の成否大きく変わると思います。
興味のある方は少しずつでも勉強してみてはいかがでしょうか？
今回はデバッグコンソール使ってみましょう！！を言いたいの為に長くなってしまいました・・・💦
おまけ★
デバッグコンソールを使うとこんなことも数分でできます。
情報商材屋さんには騙されないように！！！
１兆円入金したよーです笑
１兆円入金したよー❤️— YOSHI (@mxswap) January 8, 2019
※注：これは加工したスクリーンショットです！！
WEB画面は簡単に文字編集できます。（一般的なブラウザで３分）
資産自慢している方が多いですが目に見えるものが真実とは限らないので皆さん要注意ですｗ pic.twitter.com/db95D64Trl
次回からはもっと身近な簡単なことを書いていきます！！
Webフォントを使ってみよう（仮）
