Blogger でHTML編集とCSS追加

2022年7月4日月曜日

ブログ編集

t f B! P L

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コードなんかも作れませんが、コピペでいけそうです。
色々いじって自分好みの外観に変更していきたいと思います。

自己紹介

自分の写真
医科クリニック開業準備中の医師。やる気はあるけど、知識がない。気になったことを勉強してまとめていきたいと思います。
がむしゃら院長のXはこちら

このブログを検索

ブログ アーカイブ

連絡はこちら

名前

メール *

メッセージ *

QooQ