Bloggerでブログをはじめて、色々できるようになって……段々、アレもコレもいじりたくなってきますよね！
そうすると、どうしてもHTMLやCSSに手を加える必要が出てきます。
本記事ではHTMLとCSSについて軽く説明し、Bloggerでの編集方法を解説していきます。
HTMLとCSSとは？
HTMLとは？
HTMLはHyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）の略で、Webページ内の文書構造の記述を行うためのものです。
CSSとは？
CSSとはCascading Style Sheets（カスケーディング・スタイル・シート）の略で、上記HTMLのレイアウトやデザインなどの装飾をするためのものです。
HTMLとCSSの見分け方
HTMLは山括弧<>、CSSは中括弧{}で表されます。
なんとなく理解できましたか？
この時点でブラウザバックしたくなっていませんか？
大丈夫。理解できなくても、なんとなくで使えればいいのです。
そのために当ブログや、もっと詳しく解説してくれているサイトが存在します。
とにかくいじりたくなったらネットで調べる！ 完コピする！ 上手くいかない！
……ってことが多いので、勿論理解はできた方がいいですけどね。
色々と試してみることが求められます。
BloggerでのCSS追加方法
CSSの追加の方が簡単なので、こちらから解説していきます。
左のメインメニューの【テーマ】を選択し、【カスタマイズ】をクリックします。
左のメニューの【詳細設定】から、一番下の【CSSを追加】を選択します。
カスタムCSSを追加という入力欄が表示されます。
そこに、調べたCSSを貼り付けましょう。
ここに入力したCSSは保存しておけば残ります。
ただし、他の設定を変更したりしているとこの画面での見た目上のCSSは消えてしまいます。
一度保存したCSSはHTML内に組み込まれていますので、編集をしたい場合はHTMLから検索することで修正は可能です。
BloggerでのHTMLの編集方法
取っつきにくい難易度高めのHTMLの編集方法です。
バックアップの方法
HTMLの編集は失敗するとデザインやレイアウトが崩れたり、最悪エラーでブログが見られなくなる恐れがあります。
HTMLの編集前には必ずバックアップをとりましょう！
面倒でも、HTMLの編集を行う際はその都度バックアップしましょう。
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックします。
そこから【バックアップ】を選択します。
バックアップの画面が表示されたら、【ダウンロード】を行います。
これで、バックアップのデータがパソコンに保存されます。
警告文が出ることがありますが、そのままダウンロードして大丈夫です。
バックアップから元に戻す方法
バックアップの方法ついでに元に戻す方法も解説しておきます。
バックアップ同様、左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックします。
そこから【元に戻す】を選択します。
元に戻す画面で【アップロード】をクリックし、ダウンロードしたバックアップから元の状態に復元することが可能です。
マイテーマが消失！？
上記の元に戻すを行うと、マイテーマが変化します。
マイテーマが消えちゃった！？ と慌ててテーマを変更してはいけません。
これまでカスタマイズしたものが初期状態に戻ってしまうので、このまま運用していきましょう。
使用上は問題ないので安心して下さい。
HTMLの編集方法
バックアップを行ったら、ついにHTMLの編集です。
バックアップ同様、左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックします。
そこから【HTMLを編集】を選択します。
HTMLの編集画面が開きます。
HTMLの書き換えや書き加えを行うことができます。
この文字列を見ると頭が頭痛で痛いみたいな気持ちになります……。
とりあえず、HTMLの編集はこれで行えます！
HTMLの編集で検索する方法
HTMLにおいて必須の検索欄の表示方法を解説します。
HTMLの編集画面（文字の部分）のどこかをクリックし、Ctrlキー + Fキー を同時押しします。
そうすると上の方にSearch: という検索欄が表示されます。
試しにfont-sizeと入力してエンターを押すと、該当箇所に移動して黄色いマーカー表示がされます。
複数該当箇所がある場合、更にエンターを押すことで次の該当箇所に移動してくれます。
初心者卒業を目指して！
上記だけ読んでいても、正直良く分からないかもしれません。
実際にやらないことには始まりませんからね！
当ブログでは、今後実際に行ったHTMLの編集とCSSの追加の解説も行っていきます。
とはいえ自分もまだまだ初心者に毛が生えた程度なので、一緒に学んでいけたらと思います。
お互い頑張りましょう！！
