HTML編集とCSS追加をやってみます

QooQへテーマ変更して、色やレイアウトを自分の好きなものに変えました。

次は細かい外観をいじっていきたいと思います。

Bloggerで細かいところを変更するには、HTML編集とCSS追加が必要なようです。

HTMLとCSSってなに？

HTML、CSS、初心者には難しい言葉が出てきました。

HTML：Hyper Text Markup Language 

Webページを作成するためのプログラミング言語

→ここをいじればWebページを好きに変更できる

CSS：Cascading Style Sheets

Webページのスタイルを指定するための言語

→ここをいじればWebページをの文章構造を変えずに、文字の色や大きさ、背景、配置などのスタイルを変更できる

つまり、HTMLを編集するだけでもWebページを好きに変更できるが、

HTML編集＋CSS追加 をすることで、統一感をもって、より簡単にWebページをカスタマイズできる。

ということのようです。

BloggerでHTML編集とCSS追加をするにはどうすればいい？

① HTML編集

HTML編集の画面を開いてみます

編集画面 → テーマ → カスタマイズの右横の下矢頭 → HTMLを編集 をクリック

下記のようなHTML編集画面が開く

ここをいじったら、例えばヘッダーの文字の大きさや色の変更ができました。

ただ、最初はどこに何があるかわかりません。

検索が必要になります。

Ctrl＋F で検索窓が開きますので、ここに header-text と入れてみます。

すると下記のように検索してくれました (黄色で色付けされます)。

例えば、ここの ～%をいじると文字を好きな大きさに変更できます。

画面の右下に目のマークがありますので、それを押したらプレビュー画面がでます。

それで良ければ、フロッピーのマークを押すと、保存されてWebページが変更されます。

② CSS追加

CSSを追加してみます。

編集画面 → テーマ → カスタマイズ をクリック

詳細設定 → CSSを追加

コードを打ち込む。

実際は、Bloggerのカスタマイズをしている方のWebページに記載してある、CSSのコードをコピぺする。

打ち込んで、右下のフロッピーのマークを押すと、保存されてWebページが変更されます。

実際にHTML編集画面で、どこにCSS追加が反映されているかを調べるためには、検索窓に  と打ち込みます。

そうすると下記のように  が検索され、それより上の部分にCSS追加コードがでてきます。

直接ここに追加もしくは削除すると、CSS追加・削除と同じ効果があるんでしょうか？

そのうち確認してみます。

まとめ

・BloggerでのHTML編集とCSS追加を体験してみました。

・先達のWebページで勉強したらHTML編集とCSS追加はなんとなくできそうです。

HTML編集とCSS追加に関して細かいことはわかりません。

CSSコードなんかも作れませんが、コピペでいけそうです。

色々いじって自分好みの外観に変更していきたいと思います。