レッスンお疲れさまでした。

本日は、自己紹介とブログのカスタマイズに関して行いました。

無料のブログサービスでも、デザインのカスタマイズはできます。

有料のブログサービスであれば、ファイル容量などの自由度が増します。

多くのブログサービスは、色々なデザインのテンプレートが用意されています。

最初は既存のテンプレートの中から好みのデザインを選ぶと良いでしょう。

既存のテンプレートでは満足できなくなったら、自分自身でCSS(スタイルシート)を編集していきます。

CSSの基本的な書き方は

 どこの { なにを : どうする ; }

と書きます。

具体的には、

 body { color: red; }

と書きます。

この場合、bodyの文字の色を赤くするという意味になります。

「どこの」にあたる部分はセレクタと言い、HTMLに記述されているタグ名やID名、クラス名などを指定します。

HTMLの確認が必要になるので、ある程度HTMLの知識も必要になってきます。

「なにを」と「どうする」は、CSSのプロパティと値で、様々な設定ができます。

設定できる内容は非常に多いので、全てを覚えるのではなく基本的なものだけ覚えて、あとは必要に応じて調べていきましょう。

CSSは基本的に最後に書いたものが優先順位が高く、最後に書いたものが反映されます。

既存のテンプレートを元にカスタマイズする場合、テンプレートのCSSの最後に自分の設定したい内容を追加していきます。

最後に書いても設定内容が反映されない場合、別の優先順位で最後に書いたものの優先順位が低くなってしまっています。

例えば、「どこの」で場所を指定するときに、タグ名で指定するよりもクラス名で指定したほうが優先順位は高くなり、クラス名で指定するよりもID名でしたほうが優先順位が高くなります。

既存のブログやホームページがどのように作られているのか見ると参考になります。

Safariの場合、開発メニューを表示しておくと便利です。

「Safari」のメニューから「環境設定」を選択します。

「詳細」タブの下のほうにある「メニューバーに”開発”メニューを表示」にチェックを入れます。

確認したいブログやホームページを表示しておいて、2本指タップでメニューを出し、「要素の詳細を表示」で、HTMLやCSSの状態を確認できます。