基本5：カスタム・テンプレート用CSSの主な要素名一覧

カスタム・テンプレートを作成したときに生成される主な要素（セレクター）名を一覧にしてみました。
CSSを記述する際の参考にして下さい。

【注意】

 
• 表示してある項目によって、セレクターの種類・数は変動します。
    下記に記載したのは、あくまで私が作ったカスタム・   テンプレート上で確認できたものであり全てのセレクターを網羅しているわけではありません。  
• 「適用箇所」については、適用が確認出来たもののみ記載しました。
    記入がないものは、セレクターとして存在するがどこに適用されるか判断出来なかったものです。
    今後確認しましたら随時追加・修正していきます。  
• セレクターの記載には注意を払ったつもりですが、記入ミスがあるかもしれません。
    ミス・モレを発見しましたら管理人までご一報頂ければ幸いです。  
• 各セレクターに対してCSSを適用する方法については、CSSの解説サイトなどを参考にして下さい。
    【参考サイト】
    「TAG index」   様
      「超初心者のためのスタイルシート講座」様

A / B / C / D / E / F / H / I / L / M / P / R / S / T / U

索引	要素（セレクター）名	適用箇所
A	a	リンク全体
	a:link	通常のリンク
	a:visited	訪問済みリンク
	a:active	接続中リンク
	a.parmalink	記事フッターの「固定リンク」
	#archive-category	サイドバーの「カテゴリー」
	#archive-datebased	サイドバーの「バックナンバー」
B	body	ブログ全体の背景
	#banner	タイトル部分
	#banner-img	タイトル画像
	#banner a	タイトル文字のリンク
	#banner h1	タイトル文字
	#banner h2	サブタイトル文字
C	#container	記事表示欄＋サイドバーの背景
	#center
	.content	記事欄全体
	.content p	記事内の段落
	.content blockquote	記事内の引用
	.content li	記事内のリスト
	.content h2	記事の日付
	.content h3	記事のタイトル
	.content p.posted	記事のフッター全体
	#calendar	カレンダー全体
	#calendar table	カレンダーの曜日・ 日付部分
	#calendar caption	カレンダーのタイトル
	#calendar th	カレンダーの曜日
	#calendar td	カレンダーの日付
	#comment-data	コメント入力欄 （ 「内容」以外）
	.content-center
	.comment	記事のフッターのコメント部分
	.content-bottom
D	.date-footer
E	.entry-center
	.entry	個別の記事部分 （タイトルからフッターまで）
	.entry-body-center	記事欄の一行目
	.entry-body	個別の記事部分 （本文のみ）
	.entry-body-text
	.entry-body-bottom	記事のフッター部分
	.entry-bottom
F	#footer
H	h1	タイ トル部分
	h2	サブ タイトル、サイドバーのリストタイトル 記事の日付
	h3	記事 のタイトル
I	.img-full	挿入した画像の最大状態
	.img-thumbnail	挿入した画像の縮小状態
	.image-thumbnail img	「マイフォト」のサムネイル
	.img-link
L	#left	左サイドバー全体
	.link-note	サイドバーの「プロフィール」、「マイニ フティ」、「RSS」、 「マイリスト」
M	#main-center
	#main
	.module-typelist module list
	.module-header h2
	.module-center
	.module-content module-body
	.module-list-item li	サイドバーのリスト内の項目
	.module-bottom
	.module-content module-body typelist-plain
	.module-syndicate module
	.module-content link-note
	.module-calendar module
	.module-categories module
	.module-archives module
	.module-content
	.module-recent-comments module
	.module-recent-trackbacks module
	.module-nifty-rss-reader module
	#main-bottom
P	.photo
	#powered
	#pagebody
	#pagebody-inner
	.post-footers	記事のフッターの日付
R	#right	右サイドバー全体
	#recent-entries	サイドバーの「最近の記事」
	#recent-comment	サイドバーの「最近のコメント」
	#recent-trackback	サイドバーの「最近のトラックバック」
S	.sidebar	サイドバー全体
	.sidebar h2	サイドバーのリストタイトル
	.sidebar ul	サイドバーのリスト項目（番号付き）
	.sidebar li	サイドバーのリスト項目
	.sidebar img	サイドバーの画像
	.sidebar-center
	.sidebar-bottom
	.separator	記事のフッター項目を区切る縦線
T	textarea#comment-text	コメント入力欄
	.typelist-note
	.trackback	記事のフッターの「トラックバック」
U	ul.module-list	サイドバーのリスト項目全体

---

*この記事にコメントを書く*

---

基本4：自分のブログのCSSファイルを確認する

デザイン（テンプレート）のどの部分にどんなCSSが使われているのかがあらかじめ判っていると、「カスタムCSS」を設定する場合にも便利です。
自分が使っているテンプレート（カスタムテンプレート）のCSS（全文）を確認する方法です。

1. 自分のブログをブラウザで表示する。
2. ブラウザの「表示」→「ソースの表示」を選択する。
3. 自動的に『blog［*］』（［*］は数字）という名前の「メモ帳」が起動するので、この中から
   <link rel="stylesheet" href="http://～" type="text/css" />
   という一文を探す。
   ※テキストの上の方、ブログタイトル（<title>～</title>）のすぐ下です。
4. この中の「href」のあとのurlをコピーして、ブラウザのアドレスバーに貼り付けて「Enter」キーを押す。

   

   
   

   ※上記画像の赤枠内、下線を引いた部分です。
   （画像は当ブログのものです。ブログによってurlは変わります）
   ※もし、上の説明では「どの部分か判らない」という場合は、ブラウザに直接
   「自分のブログurl/styles.css」
   というアドレスを入力してもOKです。

5. 自動的に『styles［*］』という「メモ帳」が起動するので、必要に応じてファイルを「ファイル」→「名前を付けて保存」 で自分が分かり易い名前を付けて保存する。
   ※このファイルが現在利用中のテンプレートのCSSファイルになります。「カスタムCSS」を記述するときの参考にして下さい。

上記のままでも内容としては問題ありませんが、CSSタグが改行されておらず全文繋がって表示されてしまい非常に見難い状態です。
ちょっと手間ですが、下記の手順で処理すると改行されて見易いファイルになります。

1. 上記で表示されたCSSファイルの内容を全文コピー（編集」→「全て選択」で全文が反転表示されたら、 ファイル上で右クリック→「コピー」）する。
2. 「ワードパッド」（または「MS Word（ワード）」）を起動する。
   ※どちらでも大丈夫ですが起動が早いので「ワードパッド」がオススメです。
   ※通常は「全てのプログラム」→「アクセサリ」の中に入ってます。
3. 起動した「ワードパッド」（または「ワード」）に1.でコピーした全文を貼り付ける。
   ※プロパティごとに自動的に改行された状態で表示されます。
4. 新しく「メモ帳」を起動する。
5. 3.で表示された改行されたCSSファイルを全文コピー（編集」→「全て選択」で全文が反転表示されたら、 ファイル上で右クリック→「コピー」）する。
6. 4.で起動しておいた新しい「メモ帳」にコピーした内容を全文貼り付ける。
7. 「メモ帳」に名前を付けて保存する。

以上です。
上記の処理をすると下図（左が処理前、右が処理後）のように表示が変わり、内容が確認しやすくなると思います。

• このCSSは保存したその時点でのCSSですので、その後テンプレートを変更したり、 カスタムCSSを編集したりすると変わります。
  保存する際にはいつ作成したものか判るような名前を付けて管理するといいかも知れません。
• このファイルはCSSを確認するためのもので、これを変更してもテンプレートの変更（カスタムCSSの適用）は出来ません。
  CSSの変更はいつもの手順で実施して下さい。
• この方法で自分のブログでなく他の人のブログでも同様にファイルを取り出すことが出来ます。
  ブログを閲覧していて「どうやってるのかな？」と興味を持ったデザインがあったら、 CSSファイルを見て参考にさせて頂くのも上達のコツです。

---

*この記事にコメントを書く*

---

基本3：記事欄への画像の挿入

「IMG（イメージ）ボタン」を使った記事欄への画像挿入方法を説明します。

1. 「記事の作成」画面「本文」中の任意の場所にカーソルを置いて、「IMG（イメージ）ボタン」（画像の挿入） をクリックする
2. 「画像の挿入」ウィンドウが別に表示される。
3. ＜1.画像の選択＞で挿入する画像を選択する。
4. ＜2.画像オプション＞で【カスタム設定】を選択する。
5. 設定項目が表示されるので、自分が表示したいように各項目を設定する。
   ※設定の詳細については下記を参照して下さい。
6. 画像の挿入ボタンを押す

5.の各設定項目の詳細は下記のようになります。

• 《テキストの回り込み》
  画像の後に書いたテキスト（文字列）がどの位置に来るかを制御します。
  
  ■「画像を左に」
  →左端に画像、その右余白にテキストが表示されます。
  ■「画像を右に」
  →左側がテキスト、右端に画像が表示されます。
  ■「回り込み指定なし」（チェックを外す）
  →画像の横の余白にはテキストは表示されません。
• 《サムネイルの作成》
  画像を縮小表示します。
  幅をピクセル、またはパーセントで指定すると元画像と同じ縦横比で縦も縮小された画像が記事上には表示されます。
  これを選択すると自動的に元画像へのリンクが張られ、記事上ではこの縮小画像をクリックすることで元画像が開く設定となります。
• 《ポップアップウィンドウ》
  画像、または文字列をクリックすると元画像をポップアップ画面で表示します。

元画像の大きさと《サムネイルの作成》、《ポップアップウィンドウ》のON（チェックあり）、 OFF（チェックなし）の組み合わせによって投稿記事への画像表示状態が変わってきます。
それぞれの組み合わせ時の表示状態について表にまとめましたので参考にして下さい。

【A.元画像の大きさ（幅）が記事表示欄よりも小さい場合】

No	サムネイルの作成	ポップアップウィンドウ	画像の表示状態
1	ON	ON	サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる →画像をクリックすると原寸の写真がポップアップで表示される
2	OFF	ON	画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる →リンクをクリックすると原寸の写真がポップアップで表示される
3	ON	OFF	サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる →画像をクリックすると原寸の写真がポップアップで表示される
4	OFF	OFF	画像が記事中にのみ原寸で表示される ※ リンクはなし

【B.元画像の大きさ（幅）が記事表示欄よりも大きい場合】

No	サムネイルの作成	ポップアップウィンドウ	画像の表示状態
1	ON	ON	サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる →画像をクリックすると原寸の写真がポップアップで表示される
2	OFF	ON	画像は表示されず「この写真を見る」の文字とポップアップへのリンクが貼られる →リンクをクリックすると原寸の写真がポップアップで表示される
3	ON	OFF	サムネイルで指定した大きさの画像が挿入されポップアップへのリンクが張られる →画像をクリックすると原寸の写真がポップアップで表示される
4	OFF	OFF	自動的に記事欄の幅に合うように縮小された画像が挿入されポップアップへのリンクが張られる →画像をクリックすると原寸の写真がポップアップで表示される

上記より、「IMG（イメージ）ボタン」（画像の挿入）を使った場合、ポップアップなしで画像を挿入出来るのは

• 画像が記事欄の幅よりも小さい
• 「サムネイルの作成」、「ポップアップウィンドウ」 の設定がどちらもOFFになっている

の条件のときのみとなります。
※ HTMLタグを自分で成形すれば可能ですがここでは説明しません。
※ご自分で下記のページなどを参考にご確認下さい。
■「TAG index」 様内 『HTMLタグリスト/イメージタグ』

ココログ公式ヘルプ「使い方ガイド」内の下記のページも参照して下さい。
■3： ブログへの画像/ファイルのアップロード

---

*この記事にコメントを書く*

第3回：カスタムテンプレートを作ってみよう

ココログにはデザインが統一された「リッチテンプレート」 が多数準備されているのでこれをどんどん着せ替えて行っても楽しめますが、これにとらわれない自分専用のテンプレートを作ることも可能です。
特にフリープランの場合、「カスタムCSSの編集」が可能ですのでこれを使うことで、ブログの見た目をかなり自由に変更することが出来ます。
（'06/03/28の仕様変更に伴い、「ベーシック」、「プラス」の各プランでも利用できるようになりました）

今回はまず、CSSに行く前に自分の好きな配色で「カスタム・テンプレート」を作ってみましょう。
※「カスタムCSSの編集」は「カスタムテンプレート」にしか反映されませんので、 CSSを利用する場合もまずここから始めることになります。
※「リッチテンプレート」の設定については「ココログ：使い方ガイド」 内 『リッチテンプレート』のページに詳しく説明されていますので、こちらをご覧下さい。

新規テンプレートを作成する

1. 管理画面にログインし、「ブログ」タブ→「デザインの編集」→「新規テンプレートの作成」。
2. 『ステップ1：レイアウト』が表示されるので、 ここで自分が作りたいテンプレートのレイアウトを4つのタイプから選択しチェックを入れる。
3. 決定したら『ステップ2：表示項目を選択』へ。
4. ブログに表示したい項目にチェックを入れる。
   ※選択項目は全て初期値に戻っていますので、 以前他のテンプレート使用時にチェックを入れていた場合も最初から選択し直してください。
5. 全て選択したら『ステップ3：並べ方を設定』へ。
6. 前の画面で選択した項目でサイドバーに表示されるものが一覧で並んでいるので、この項目をドラッグ＆ ドロップで好きな順に入れ替える。
   ※ここで表示された項目に過不足がある場合はブラウザの「戻る」ボタンを使って『ステップ2』に戻れます。
7. 決定したら『ステップ4：テーマを設定』へ。
8. ここで表示されるデザインを決定する。
9. 「ココログオリジナル・テーマ」か「カスタムテーマ」のどちらかを選択する。
   ※「ココログオリジナル・テーマ」を選択した場合も 「カスタムCSSの編集」 は可能ですが適用できるCSSには制限があるようです。
   ※全面的に自分のオリジナルでカスタマイズしたい場合は、 「カスタムテーマ」を選択することをお薦めします。
   ※尚、このブログの中で取り上げるCSSによるカスタマイズはすべて 「カスタムテーマ」のテンプレートを基準にしたものです。
10. 「ココログオリジナル・テーマ」を選択した場合は、このまま『ステップ5：名前と説明を設定』へ。
    「カスタムテーマ」を選択した場合は更に各項目の設定へ（設定方法は後述）
    全ての項目の設定が終了したら『ステップ5：名前と説明を設定』へ。
11. カスタムテンプレートの名前と説明を設定する。
    ※どちらの項目も設定する、しないは任意ですが、自分で区別するために名前だけはつけておいた方がいいと思います。
12. テンプレートを保存する。
    「このテンプレートを保存」→完成したテンプレートの保存のみ
    ※今使用中のテンプレートは変わりません
    「このテンプレートを保存して適用」→完成したテンプレートを、今使用中のテンプレートに変えてブログに反映

■「カスタムテーマ」の設定方法
それぞれの項目の「編集」ボタンを押すと、編集ページが別画面で開きます。

• 『ページ全般の設定』
  「記事表示欄」と「サイドバー」
  それを合わせたページ全般の
  ＜背景色＞
  ＜枠線の有無・種類・色＞
  ＜リンクのスタイル・ 色＞
  が設定できます。
• 『タイトルバナー』
  ブログの一番上に表示されるタイトルバナー部分の
  ＜背景色＞
  ＜枠線の有無・種類・色＞
  ＜文字の位置・スタイル・色・フォント・ 大きさ＞
  を設定できます。
  また、オプションとして画像をバナーとして設定することも可能です。
  ※この設定については
  ■第4回： タイトルにオリジナルの画像を設定してみよう
  を参照して下さい。
• 『記事表示欄』
  記事のヘッダー、タイトル、本文、フッターについて
  ＜文字の位置・スタイル・色・フォント・大きさ＞
  ＜枠線の有無＞
  ＜行間＞
  などを指定できます。
• 『サイドバー項目』
  サイドバーに表示されるタイトル
  項目の＜文字のスタイル・フォント・大きさ・配置＞
  ＜枠線の有無・行間＞など
  画像の＜枠線の有無・ 配置＞
  リンクの＜文字色＞
  の指定が出来ます。

※設定を変更した場合は、画面下の 「変更を保存」ボタンを押して下さい。
※ここの設定が終了したら、前項【新規テンプレートを作成する】の11.に戻って下さい。

以上です。
うまく出来ましたか？

• 一度作成した「カスタムテンプレート」は「テンプレートの管理」画面で保存されます。
  ここでは作成したテンプレートを『複製（コピー）』することも出来ますので、基本になるものを一つ作成しておき、 次からはそれをコピーし名前を変えて利用すれば上記の手順を大幅に省略することも可能です。
• 各ステップの設定内容は「確認」ボタンを押せばブログに反映させずに確認出来ます。
• 一度設定した各ステップの設定にミス・モレがあったとしても後で何度でも修正することが可能です。
  内容を確認しながら少しずつ調整していきましょう。
• 「カスタムテンプレート」でそれぞれの項目を設定する場合、 「色」（文字色・ 背景色）については最初に表示されている色見本以外に自分の好きな色が指定できます。
  方法は、色見本の右にある記入枠の中に自分でカラーコード（6桁）を記入するだけです。
  ※カラーコードについては下記のページなどを参考にして下さい。
  ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
  ■参考： 「色のみじん切り」様　
• ココログの「使い方ガイド」でも「デザイン・ カスタマイズ」の項で、それぞれの手順について画像入りの詳しい説明がされています。
  参照して下さい。

---

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。

---

*この記事にコメントを書く*

---

基本2：マイリストの作成→サイドバーへの設置

ココログのマイリストはテキスト以外にも、HTMLやスクリプトなどの殆どのタグが入力可能です。
特に「メモリスト」は「メモ」欄にタグを入力してブログに表示するだけで各種のブログパーツを簡単に設置することが出来ますので、設置方法を覚えておくととても便利です。

メモリストの作成

1. ココログの管理画面にログインし、「マイリスト」タブをクリック。
2. 「マイリストの新規作成」で『リストのタイプ』 が＜メモ＞のリストを作成する。
3. 必要に応じてリストに名前を付ける。 
4. 「最近の項目」というページに切り替わるので、ここで「項目の追加」をクリックする。
5. 「項目を追加する」ウィンドウが表示されるので、その中の広い方のスペースにタグ（またはスクリプト）を貼り付ける。
6. 「追加」ボタンをクリックする。
7. 「新しいノートを追加しました」というメッセージが表示されるので、そのページの下方にある「変更を保存」ボタンを押す。
8. 「変更を保存しました」メッセージを確認したら「ウィンドウを閉じる」

サイドバーへの表示

1. 「ブログ」タブ→（便利メニューから）「デザインの編集」→「表示項目を変更」をクリック。
2. 「マイリスト」の一覧の中から、上記で作成したリストを選択しチェックボックスにチェックを入れ「変更を保存」。
3. 「デザインの編集」に戻って「並べ方を変更」をクリック。
4. 「表示項目の並べ方」画面が表示されるので、リストを任意の位置に移動する。
   ※設置するパーツの種類（特にスクリプト関係）によっては、指定の場所に置かないと作動しない場合がありますので注意してください。
   ※その場合は、元記事に設置場所を注意点として明記しておきますのでそちらを参照して下さい。

• 「マイリスト」へのタグの入力はメモリスト以外でも利用できます。
  その場合、『人リスト』は＜一行紹介＞欄に入力して保存、
  それ以外のリストは＜メモ＞欄にタグを入力して保存したあと、「設定」タブ内の＜メモの表示＞のチェックを入れて保存して下さい。
  ※ これらの処理が不要なので、タグを入れる場合は「メモリスト」が一番簡単だと思います。

■ココログ「使い方ガイド」内関連ページ： 『FAQ：ブログパーツを貼るにはどうしたらいいの？』
※「メモリスト」の使い方が画像入りで詳しく説明されていて判りやすいです。オススメ！

---

*この記事にコメントを書く*

---

基本1：ファイルのアップロード

1. 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
2. 「新規ファイルのアップロード」の「参照」ボタンを押す
3. 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル（画像）を選択し「開く」ボタンを押す
4. 「アップロード」ボタンを押す
5. 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
   ※ここまででファイルのアップロードは完了です。

■ココログ「使い方ガイド」内関連ページ： 『ブログへの画像/ファイルのアップロード』

---

*この記事にコメントを書く*

---