特集・冬のデート・三河編 エムインフォ おすすめ三河情報 絶対お得なレディースランチ・・・・ガーリックバター GO! 刈谷の新名所・・・・・・・・・・・・・・刈谷ハイウェイオアシス GO! 冬のイルミネーション・・・・・・・・・・・なばなの里 GO! カプチーノに絵が！？・・・・・・・・オールディズカフェ GO! 岡崎のNo.1カフェ・・・・・・・・・・・・・・マヴォン GO! 冬はやっぱりうどん・・・・・・・大正庵釜春 新安城支店 GO! ワインを選ぶなら・・・・・・・・・・・・・・ENOTECA GO! シアトル系カフェ・・・・・・・・・・・・タリーズコーヒー GO! うなぎといったら「ひつまぶし」・・・・・・蓬莱軒本店 GO! デジライフ ・・・・・・・・・・・・・・ 自作パソコン奮闘記１、２、顔 フォトライフ ・・・・・・・・・・・・・ いい写真ってなに？それは・・・
特集・スタイルシート デジライフ ・・・・ スタイルシートを活用する１、２、３ モット!! レビュー ・・・・・ Webカテゴリ別デザイン＆配色パターンガイド WEBサイト・デザイン SEのフシギな生態 手帳200%活用ブック どうしておこるパソコンのエラー フリーソフト ・・・ タグの貼り付けをもっと便利に エムインフォ ・・ マヴォン 大正庵釜春 タリーズコーヒー トゥザスプーン（伊） 東名＝伊勢湾岸開通！
@niftyの「瞬ワード」とgooラボの「HotWindow+」をサイドバーに追加した。
RSS等を使った、動的なニュースコンテンツだ。（←この表現あってる？）
自分のホームページぐらい、自分の便利にしとこう
せっかくのホームページなんだから
・・・と思いまして。 ヽ(´∀｀)ﾉ
ココログで使用することを考えて、非常に簡単なスタイル部分をピックアップします。
（一応、簡単なHTMLがわかっている方を想定して説明します。）
まずは、「body」ですね。ここで、背景というか余白の色を指定します。
background-color: #CCDDFF;
つぎに、link関係ですね。ここで、文字色を指定します。
「a:link」「a:visited」「a:active」「a:hover」
ここでは、「ナビゲートカラー」をどの色にするかを考えて決めます。
つぎは、「#container」です。ブログはテーブルを使って組みあがっていると思って下さい。ここでは、テーブルの下地を指定します。
background-color: #FFFFFF;
それでは、テーブルの各エリアの指定に移ります。ブログは大抵「バナー（ヘッダ部分）」「サイドバー」「メインコンテンツ」から成り立っています。（俺のブログでは、左右のサイドバーを設定しています。）
まず「#banner」です。
font-family: Verdana, Arial, sans-serif;
color: #0066CC;
background-color: #FFFFFF;
俺は、フォントの知識がないので、テンプレートで気に入ったものを選んだので、色の指定だけしています。
つぎはサイドバーの「#left」です。（「#right」も同様です）
width: 200px;
background-color: #CCCCCC;
最後にメインコンテンツの「#center」です。
width: 400px;
「#center」のメンバ「.content」で background-color を指定します。
background-color: #FFFFFF;
color: #CC0000;
「.content p 」で、通常の文字デザインを指定します。
color: #000000;
font-family: Verdana, Arial, sans-serif;
font-size: small;
「.content h2」「.content h3」でログのタイトルを指定します。
color: #0066CC;
font-family: Verdana, Arial, sans-serif;
font-size: small;
color: #CC0000;
font-family: Verdana, Arial, sans-serif;
font-size: large;
サイドバーのカテゴリーの表示はなぜか「#calendar td」の「.sidebar h2」で指定するようです。
color: #CC0000;
font-family: Verdana, Arial, sans-serif;
font-size: small;
border: 1px dotted #CC0000;
text-align: left;
font-weight: bold;
簡単なものだけと思いましたが、ココログの場合はこれでほぼ全部ですね。
さあ、ブログのデザインを自由に変えてみましょう。
まったくもって理解できなかった（というか、手をつける気がなかった）スタイルシートもだんだん視野に入ってきた。
「そんじゃ、いっちょやってみるか」と、重い腰をあげてみました。
まずは、フルカワマサユキ氏の「詞織」で、「自作スタイルシートの適用」をおさらいしてみます。
ふむふむ。
このログでは、自分で作ったスタイルシートを、アップロードして、HTML内からオーバーロードする方法を解説しています。
「じゃあスタートっ！」
※以下、スタイルシート導入の手順をまとめてみました。（注意：詞織の番号とは連動していません。）
（１）自分のブログのデザインをします
俺は、Elementsでデザインをしてみました。配色は、配色パターンを参考にして、実際の色を流し込んでみました。
◆教訓「紙で出来ないことは、パソコンで出来ない。」
〜スタイルシートがいじれたとしても、良いデザインが作れるわけではない。〜
一応、自分では気に入ったデザインになりました。
（２）自分のテンプレートを作ります
ココログの管理ツールで「トップ＞ウェブログ一覧＞”自分のブログ”＞デザイン」で自分のテンプレートを作ります。
これが、自分のスタイルシートのひな形になります。
（３）デザインで、テンプレートのスタイルを選びます
俺は、すべてのテンプレートを試してみて、一番自分のイメージに近いものを選びました。
ちなみに選んだのは「ルージュ」。レイアウトも変更してサイドバーの配置も決めておくように。
（４）自分のブログを表示させます
※ここからは、詞織の解説を参照して下さい。
（５）ソースの表示をさせて、スタイルシートのアドレスを確認します
（６）スタイルシートを表示させます
（７）表示させたスタイルシートを別名で保存します
これが自分のスタイルシートのひな形になります。
（８）このスタイルシートにオリジナルなファイル名にしてアップロードします
（９）オーバーロードさせるスクリプトを追加します
（10）変更してみます
スタイルシートの内容を変更して、アップロードします。これで、自分のブログの表示が変更されるはずです。
変わっていれば、コントロールできていることになります。
おおーっ！！
おめでとう。あらたな表現領域に一歩を踏み出しました。
（このログを必要に思って読んでいる人がいるとすればですが・・・（笑））
次回は、実際の変更個所をまとめたいと思います。
エムインフォ（三河情報） | ダーツ | デジライフ | フォトライフ | マニアックリンク | レビュー（本・コミックetc） | 写真集ガイド | 旅先更新 | 日記・コラム・つぶやき
