【ブログの楽しみ方】今更きけないココログ－(1) ココログのしくみ－HTML文書とスタイルシート
この記事の目的
ブログは本来、難しいHTML（インターネット上で公開するページ）の知識がなくても、気軽に書けるもので、基本的な操作方法、例えば、画像の挿入や文字の色を変える、などといったことは、だいたい編集画面を見れば想像が付くし、公式FAQ（ヘルプ集）に解説されているので、このシリーズでは対象とはしていません。
しかし、ちょっとしたトラブルに対応したり、ブログをカスタマイズしようとするときには、もう少し基本的なことが分かっていないと理解できないことがあります。
カスタマイズとは、例えば、「ブログ全体の文字を大きくしたい」とか、「ブログ全体の文字の色を変えたい」、「行間を広げたい」といったブログ全体に関わることは、「スタイルシート」（CSSファイル／シーエスエス・ファイル）という、ブログのデザインをコントールしている情報（ファイル）をカスタマイズしなくてはなりません。
「スタイルシート」に記述するタグのようなものはプロパティと呼ばれますが、ネットで検索すれば、その記述方法はいくらでも見つかります。したがって、この「今更きけないココログ」シリーズでは、その詳細を説明する予定はなく、それを理解する前提の知識を提供するこことを目的としています。
最終的にはスタイルシートを使って下のようなことが何故できるのか？ということが理解できることを目標としますが、今回の記事では、スタイルシートの基本的な役割を理解します。
図-1
上の画像で、②と③はCSSで色と文字の太さが変わるようにしています。④と⑤は通常の改行（正確には改段落）をしていますが、CSSで行間（段落と段落の間）が広くなっています。
HTML文書、スタイルシートとは
HTML文書やHTMLタグについては、こちらの記事（webページ）を参照して下さい。『【ブログの楽しみ方】ブログやウェブサイトのソース（HTML）を表示する／HTMLタグとは』
HTMLタグはココログが自動的に追加してくれ、ユーザがブログを書くときは、提供されている編集画面を使ってワープロソフト感覚で書けばよく、HTMLタグを意識する必要はありません。
ここでは、編集画面を使って書いた文章や貼り付けた画像から、ココログが自動的にHTMLタグを付加してHTML文書を生成してくれるということを理解して下さい。
次にスタイルシートについて基本的な説明をします。
ブログを始めるときに、ココログなら「テーマ」（ブログデザイン）を選択し、これによって背景画像がついたり、2カラムや3カラムといったカラム数、文字の色や大きさといった、デザインが決定します。
HTML文書そのものには、デザイン情報を直接記述しないのが現在では一般的で、このデザイン情報は別のファイルに記述されています。これをスタイルシートと呼び、ファイル名は「styles.css」という名前がよく使われます。「styles」の部分は他の名前でも構わないのですが、拡張子（ピリオド以下の文字は、「css」をいうものを使い、このため、「css（シーエスエス）ファイル」などとも呼びます。
テーマを変えることで、文章や画像には影響なくデザインだけが変えられるのは、このスタイルシートを変えているだけだからですが、スタイルシートを使わないと、ブログやホームページはどう見えるのか？というのは、簡単に試すことができます。
下はIE11（Internet Explorer11）の例ですが、「スタイルなし」を選択（図-2）すると、スタイルシートを使わないでページを表示（図-3）することができます。
図-2
図-3
これでスタイルシートの役割がだいたいおわかりになると思います。
なお、上の画面を元に戻すには再びメニューから「規定のスタイル」を選択します。
ここまでのまとめとして、HTML文書とスタイルシートの関係を表したのが下の図です。
図-4
※上図に一部誤りがあります。スタイルシートの記述が<body>～</body>の中の「ヘッダー」にあるとしていますが、正しくは、<head>～</head>の中です。図を修正次第差し替えます。 →修正済み
ココログ独自の用語もありますが、ブログは一般的にこのような仕組みになっています。
なお、上の図で分かるように、ユーザが記事を書くと言うことは、HTML文書の一部分だけを書いており、その部分のHTMLタグを確認するには、編集モードを「HTMLの編集」に切り替えれば見ることができます。
記事部分以外のHTMLタグは、ブログ全体で共通（同じ内容）になっていて、どのスタイルシートを使うかというのは、ヘッダー部分→<head>～</head>部分に記述されています。
ブログのデザインを変えてブログ全体に“反映”すると、過去の記事もデザインが変わるのはこのためで、例えば、「9月になったから、今日の記事から秋らしいデザインに変えたい」と思っても、記事毎にデザインを変えることはできません。
また、ブログ毎に使われているスタイルシートを直接編集することはできませんが、ココログには「カスタムCSS」という機能があり、ここに自分で追記することで、スタイルシートを変更することができます。
よくあるトラブルと対応方法
次回は、「HTML文書」→「スタイルシート」についてもう少し詳しく見ていきます。
この記事は次回以降の記事との兼ね合いで加筆修正する可能性があります。
« 【我が町】2014年 川崎大師風鈴市日程（2014/07/17～21） | トップページ | 【ブログの楽しみ方】今更きけないココログ－(2) ブログのスタイルシートの中を見るには »
« 【我が町】2014年 川崎大師風鈴市日程（2014/07/17～21） | トップページ | 【ブログの楽しみ方】今更きけないココログ－(2) ブログのスタイルシートの中を見るには »
test
コメント