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追加が反映されているかを調べるためには、検索窓に </b:skin> と打ち込みます。
そうすると下記のように </b:skin> が検索され、それより上の部分にCSS追加コードがでてきます。
直接ここに追加もしくは削除すると、CSS追加・削除と同じ効果があるんでしょうか？
そのうち確認してみます。
まとめ
・BloggerでのHTML編集とCSS追加を体験してみました。
・先達のWebページで勉強したらHTML編集とCSS追加はなんとなくできそうです。
HTML編集とCSS追加に関して細かいことはわかりません。
CSSコードなんかも作れませんが、コピペでいけそうです。
色々いじって自分好みの外観に変更していきたいと思います。
コメント