【カスタマイズ】頂いた質問にお答えするコーナー その１

【カスタマイズ】頂いた質問にお答えするコーナーその１

　　カスタマイズについて、何件か質問を頂いているので
　　別コーナーとして分けて記事をUPしました。

　　今後も、できる限り頂いた質問にはお答えしていきたいと
　　思いますので、お気軽にコメントしてくださいね。

【次回記事】【ゼロから始める】頂いた質問にお答えするコーナーその２【カスタマイズ】

始めの解説が長いので、直接質問内容に飛ぶリンクを設定しています。

１．CSS（スタイルシート）について

　まずはじめに、カスタマイズの際にはきってもきれないCSSについて纏めておきます。
　なお、１．と２．については、現在作成中の

　【ゼロから始める】テンプレートを変更しよう　ー実践編ー【カスタマイズ】

　に組み込む予定なので、後日この記事より削除します。

　詳細な解説は検索して頂くとして、ここではイメージというか、概念的なものを
　理解していただければと思います。

　１）CSSとは

　　Cascading Style Sheets（カスケーティング・スタイルシート）の略で、文章を
　　修飾したりデザインやレイアウトなどに関するスタイルをまとめて記述したものです。

　　このCSSを使用するメリットとしては、

　　　・文書全体に一貫したコンセプトに基づくデザインを適用できる
　　　・複数文書のスタイルを一括管理でき、メンテナンスの効率が大幅に向上する
　　　・スタイル専用の言語を使うことで、きめ細かな表現を設定できる

　　といったとこでしょうか。
　　・・・でも、ちょっと解りにくいですよね？

　２）HTMLとCSSの関係をイメージ化してみる

　　では、もう少し解りやすく、HTMLとCSSの関係をイメージ化してみましょう。
　　まず、記事に「ぽあろ」という文字列を記述し、それを<p>というタグで囲みます。

タグとは
　　タグとは<> 、</>で囲まれている範囲の事を指します。
　　HTMLでは、この範囲を一つの固まりとして扱っています。
　　CSSを使うと、このタグに対して色々な設定をすることができるのです。

　　次にCSSにおいて、文字列で指定したタグに対しての動きを決めてあげます。
　　ここでは、文字の大きさ、文字フォント、文字色を指定しています。

　　そして、これをブログ上で表示すると、以下のように記事に書いた
　　「ぽあろ」という文字が、CSSで指定した内容を反映して表示されるのです。

　　

　　そこで１）で挙げたメリットをもう一度確かめてみましょう。
　　例にすると次のようになります。

　　記事の本文の文字色を「黒」から「オレンジ」に変更したいな～、と思ったとき、
　　一つひとつの記事を修正していくのは大変ですよね。

　　そんな時、本文が何らかのタグで囲まれてれば、そのタグに設定したCSSを
　　修正することにより、全ての記事の文字色を変えることができるのです。

　　　　

　　こんな感じでHTMLとCSSの関係をイメージしていただければ、実際のカスタマイズも
　　身近になると思います。

２．ファンブログでCSSを利用してみる

　では、ファンブログではどのようにしてCSSを使えばよいのでしょう。
　ファンブログの管理画面において、「スタイルの編集」を選んでください。

　現状では、以下のような構成になっています。

　　

実際に各テンプレートのコードを見てもらえば解るのですが
最初の方でCSSを定義しているスタイルシートが読み込まれています。

【メインテンプレート】

つまりこのスタイルシートを変更すれば、全てのテンプレートにそれが反映される訳です。
記述の仕方等に関しては、その手のサイトや解説書を参考にして頂ければと思います。

　とほほのWWW入門
　　各種情報がまとまっていて、解りやすいサイトです。
　　よく利用させていただいてます。

では、上記の内容を踏まえて、早速頂いた質問にお答えしていきます。

みかんさんよりのご質問

　このブログでは、タイトル文字ではなく、タイトルロゴ全体に
　リンクが貼られているけど、どうやるの？　

※意訳してます　

まずは、タイトルを設定しているHTMLとCSSのコードを見てみましょう。

コードは何でも良いのですが、ここではメインのコードを表示しています。
コードを表示したら、"header"という文字列で検索してみてください。
以下のようなコードが見つかるはずです。

【メインテンプレート】

 

		{$BlogName$}

ここでタイトルを設定しています。

{$BlogUrl$}と{$BlogName$}は、ファンブログでのみ使用できるオリジナルタグです。
内容はそれぞれ以下の通りです。

{$BlogUrl$}
　　　　ブログのURLです。私の場合は、「https://fanblogs.jp/poirot/」ですね。

{$BlogName$}
　　　　ブログタイトルです。
　　　　私の場合は、「ぽあろの休日　カスタマイズ＆ダイエット体験記」です。

「id =」と「class =」で記述しているところが、CSSで定義している箇所です。
私の場合、「header」と「logo」というCSSを使用していることがわかります。
（<h1>と<a>はちょっと置いときます

）

「logo」というCSSは、今回のカスタマイズで新たに追加したものです。

次に、CSSを定義しているスタイルシートで該当箇所を見てみましょう。

【スタイルシート】

 
 /******************************
	ヘッダー
*******************************/
#header 	{
	color:#969288;
	height:160px;
	position:relative;
	margin: 0 auto;
	width:930px;
	background-color:#423e30;
	float: left;
}


/* ロゴ設定 */
.logo {
	background:transparent url('http://dl.dropbox.com/u/27400458/01.pict/%23%23customize/title.png') no-repeat scroll 0 0;
	display:block;
	height:143px;
	left:0px;
	overflow: hidden;
	position:absolute;
	text-indent:-9999px;
	top:0px;
	width:930px;
}

細かい設定内容は長くなるので、省かせていただきます。
要は、新たに追加したCSS「logo」において、タイトルロゴを設定し、そのタイトルロゴに
対して<a href="">でリンクを張っているのです。

イメージ化するとこんな感じです。

　　