広告

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

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

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







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


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

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






 (クリックで拡大します)








画面中央にスタイルシートが表示されるので、その中から「ヘッダー背景」を検索してください。
/* ヘッダー背景 */
#header 	{
	 background:url(http://fanblogs.jp/image/blog/xmas_a2/img-head.png) top no-repeat;
	 width:825px;
	 height:275px;
	 margin-top:0;
	 padding-top:0;
	 }

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

画像ファイル名    http://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週間以上前から用意していた
のですが、なかなか書く時間がなくて…。

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

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






【スポンサード リンク】






この記事へのコメント

   
×

この広告は30日以上新しい記事の更新がないブログに表示されております。