【カスタマイズ】タイトルロゴを変更してみよう

　自分のブログを持ったら、やっぱり個性を出したいものです。

　ファンブログはテンプレートが充実していて、様々なテーマを
　選択できるのですが、やはりここはオリジナリティを出して、
　アピールしたいところ。

　そこで、ブログ初心者なりにゼロからファンブログをカスタマイズ
　していきたいと思います。

ロゴファイルを準備するPrepare the logo file

まずは、使用するロゴファイルを準備しましょう。

使用するロゴサイズはテンプレートによって違うと思います。
そこで、ロゴサイズを調べる為、ファンブログの管理画面より「スタイルの編集」を選択します

　（クリックで拡大します）

画面中央にスタイルシートが表示されるので、その中から「ヘッダー背景」を検索してください。

/* ヘッダー背景 */
#header 	{
	 background:url(https://fanblogs.jp/image/blog/xmas_a2/img-head.png) top no-repeat;
	 width:825px;
	 height:275px;
	 margin-top:0;
	 padding-top:0;
	 }

これを見ると私のテンプレートは、

画像ファイル名	https://fanblogs.jp/image/blog/xmas_a2/img-head.png
サイズ	width:825px 　height:275px

がヘッダー背景（タイトルロゴ）に使われていることがわかります。

私の場合、photoshopを使って、こんなロゴ（width:820px height:124px）を用意しました。

　（クリックで拡大します）

初期設定と全く同じサイズでなくても大丈夫ですが、widthくらいはオリジナルと近い
サイズの方が良いかと思います。

photoshop以外に、以下のようなツールでロゴを作成することもできます。

　・グラフィック編集・加工ソフトウェア「GIMP」を使用する
　　　　日本語の解説サイト

　・ロゴ作成ジェネレーターを使用する
　　　　ロゴ作成系のジェネレータツールまとめ

ロゴファイルをアップデートするUpdate the logo file

作成したロゴファイルをファンブログにアップデートしましょう。

ファンブログは、記事に対してしか画像ファイルをアップデートが出来ないため、
私の場合、画像置き場として下書きの記事を作成しました。

アップデート後、画像を挿入し、その画像のプロパティを表示します。
※こちらの作業は、必ず記事を保存してから行ってください

　（クリックで拡大します）

プロパティ上のアドレスが、画像のURLになります。
これを、先程のスタイルシートに設定しましょう。

スタイルシートを編集するEdit Style Sheets

用意したタイトルロゴに合わせて、スタイルシートを編集します。
（上記画像「スタイルシートの編集」を参照）

※念のため、スタイルシートの内容を別ファイルにバックアップしておいてください

私の場合、こんな感じですね。

/* ヘッダー背景 */
#header 	{
	 background:url(用意したロゴファイルのURL) top no-repeat;
	 width:820px;
	 height:124px;
	 margin-top:0;
	 padding-top:0;
	 }

修正が終わったら、画面下の保存ボタンを押して、修正内容を保存しましょう。

スタイルシートを微調整するFine-tune Style Sheets

自分のブログを表示して、修正内容を確認します。

私の場合、タイトル文字が赤だったため、文字が見えなくなってしまいました。
そのため、文字色、フォント、パディングをちょこっと修正しています。

　（クリックで拡大します）

以上で、タイトルロゴの変更は完了です。

もし、わかりにくい所があればコメント欄にてお願いします。
初心者なりに、わかる範囲内で回答したいと思います。

次回は、上記微調整の詳細を含め、フォント周りをカスタマイズする予定です。

編集後記Editor's note

ふぅ～、やっとこの記事を書けた。実は言うと、ロゴ自体はもう1週間以上前から用意していた
のですが、なかなか書く時間がなくて…。

クリスマスまでに間に合って良かった。あと、数週間足らずの命ですが、しばし雰囲気を
楽しみたいと思います。

…しかし、あれですよね。
ファンブログは、もうちょっとアップデート関連をなんとかして欲しいものです。