パソコン相談所ブログカスタマイズ　その4

ブログカスタマイズ　その4　～ブログを自分なりにデザインしたい～

前回のブログカスタマイズその３で、「次回はhtmlタグについてです」・・・と予告しましたが、ちょっと変更。

その１～３までで解説した「色の変更」「背景画像の指定」などについて、実際の作業の過程を説明いたします。「解説読んだんだけど、よく分からない」「うまくいかない」という方、よかったら参考にしてください。

この解説では「イーラ・パーク」でのブログ投稿を基本に説明しています。他のブログサイトをご利用の場合、ここでの説明と画面イメージや手順が異なりますが、基本的な理屈としては同じです。

■まずは管理画面へ入りましょう

ログインは右図のようにトップページから入っていけます。（ご自分のブログの画面右上からもログインできます。この画面から入っていかなければならないわけではありませんので、ね。とにかくブログの管理画面へ入れればOKです）

テンプレート管理画面へ

ブログ管理画面は右図のような感じのものです。

さて、ブログのデザイン（色や背景）は、「テンプレートのアレンジ、それもほとんどスタイルシートの編集で可能」と説明しましたよね。なので、さっそく「テンプレート」管理画面へ行きます。右図のように画面左の「テンプレート」をクリックして入ります。（画像をクリックすると大きな画面でごらんいただけます）

テンプレートを選択して「カスタマイズ」画面へ

右図のようなテンプレート選択画面になります。「使用中」になっているテンプレートの「カスタマイズ」の部分をクリックしてカスタマイズ画面へ入ります。

カスタマイズ画面からスタイルシートをコピー

テンプレートのカスタマイズ画面は右のような感じのものです。（本当は画面を下へスクロールするともう少しいろいろなのが出てきます）

「スタイルシート」「トップページ」「個別記事」「アーカイブ」の4つの枠内にわけの分からない文字が並んでいますね。これらがテンプレートのソースコードです。

で、今回の説明で使うのはこのうちの「スタイルシート」の部分。この中の背景の色や画像に関する部分を変更して、ブログのデザインをちょっと変えてみよう、というわけです。

この画面上で編集（変更）作業を行うこともできるのですが、この状態では説明もしにくければ作業もやりづらいので、いったんメモ帳などへコピーして、そこで編集したものを、ここへ戻す、という方法をとります。

「スタイルシート」の枠内に書かれている内容を、メモ帳を起動してコピーします。（「メモ帳へコピー」が分からない方はこちらを参考にしてください→「メモ帳でテキストデータを編集」）

説明で取り上げている実際のブログのデザイン

今回の説明で編集しようとしているブログテンプレート、元の状態は右のようなものです。イーラ・パークのテンプレート集「シンプルグリーン」というテンプレート。

■背景の色を変更

さて、ここからはスタイルシートのソースコードをメモ帳でコピーしてきた状態で説明します。

スタイルシートをコピーしてきたメモ帳をよく見ると、１０～２０行目あたりに「body{」という部分が見つかると思います。このすぐ下に「background」という項目が書かれていますね。

実際のサンプルでは、この項目のず～っと右のほうに「:#E0EDE0;」と書かれているのが分かると思います。背景の色を指定しているのはこの部分。つまり「body{ }」と書いて囲まれている部分のなかの「background:#E0EDE0;」が背景の色指定です。（右図参照。画像をクリックすると大きな画面で見られます）

「カラーコード」の説明のページで解説しているとおり、「#E0EDED」（　　　）という部分が、背景のうす緑色っぽい色を表すカラーコードです。で、ここを別のカラーコードに変更してあげれば、それで背景の色が変わる、というわけですね。

今回は、変更の様子が分かりやすいよう、黄色っぽい色を使おうと思います。カラーコードのページを参照してください。コードは「#FFCC33」（　　　)にしようと思います。

実際には、メモ帳上の「#E0EDED」という部分を「#FFCC33」と書き換えるだけです。そして、書き換えたらこのデータをすべてコピーして、先ほどのテンプレートカスタマイズ画面の「スタイルシート」のところへ貼り付けます（念のため、元のスタイルシートのテキストデータ（文字列）をいったん全部削除してから貼り付けると、間違いや重複が避けられます）

なお、イーラ・パークのスタイルシートは「background」と「:#E0EDED;」の部分がかなり広く開いてしまっていますが、この部分の空白は、空けなくても構いません。

「background:#E0EDED;」と詰めて入力してしまって全くかまいませんので、ね。（というか、きちんとスタイルシートを記述する場合は、むしろこのように無駄な空白を入れずに詰めて書くのが普通です）

また、非常に専門的な指摘をすると、厳密には「背景の色」は「background:#E0EDED;」とは指定しません。正しくは「background-color;#E0EDED;」です。ただ現実に、「background:#E0EDED;」でも同じ結果になるので、ここでは元のスタイルシートに沿う形で「background:#E0EDED;」を採用します。

■実際の変更後

さて、実際にスタイルシートの編集をして完了したら、テンプレートカスタマイズ画面の一番下にある「登録」ボタンをクリックして変更を反映させます。そして出来上がったのが、右図のような状態。

テンプレートのデザインとしてはお世辞にも「イケてる」とは言い難いですが、とにかく背景の色がうす緑から黄色に変わったことは確認できると思います。

■ちょっと解説

ここで、上記のスタイルシートのソースコードについてちょっと解説。「body{ }」の中に「background:#E0EDED;」とあるからこれを変更しなさい、というのは、要するに以下のような意味です。

htmlタグ	開始｛	スタイル内容	設定値	終了；	完了｝
body	{	background:	#E0EDED	;	}
ホームページの「body」の部分は以下の通りのデザインにしてね	ここから開始	background(背景）は次の設定のとおりです	#E0EDEDという値の色にしてね。	background（背景）については以上で終了	「body」部分の設定はこれでOK（完了）です。

このように、スタイルシートで書かれている「｛　｝」とか、「：」とか「；」などには、それぞれ意味があります。上の説明では、backgroundに「#E0EDED」を指定して「；（終了）」した後に、bodyタグそのものの設定を「｝（完了）」で閉じているので、これで終わりですが、「；」の後に、たとえば「color（文字の色)：#000000;」と書いてから「｝（完了）」して閉じれば、「背景は黄色、文字の色は白」と複数の設定をしたことになります。