初心者向けファンブログのカスタマイズ１.ヘッダーに画像を挿入する

最近なぜかファンブログのカスタマイズに凝っている私です。ファンブログは、ご存知の通りA8ネットが運営する無料ブログサービスですので、アフィリエイト目的で使っている人は多いと思います。でも、特にアフィリエイト初心者の利用者が多いので、カスタマイズまで手が回らないという人も多いと思うんです。

ファンブログの公式ブログにもカスタマイズの方法は説明がありますが、ちょっとブログ初心者にはわかりにくい箇所もあります。私もファンブログを始めたばかりのころは、紹介されているカスタマイズ方法はあまりよく理解できませんでした。そのため、初期のころに作ったファンブログもそのままカスタマイズ放置状態だったんですね。

そこで、今回は、ファンブログのカスタマイズについて、まとめて記事にしてみようと思います。

今回紹介しているファンブログのカスタマイズ3つ

ファンブログに限らずブログのカスタマイズは、やり始めるときりがないというところがあります。凝り始めると、膨大な時間を消耗してしまうので、できれば必要最低限のことだけおさえてサクッと終わらせたいものなんですよね。

それで、今回の記事でもファンブログのカスタマイズとして、オリジナリティを出すために最低限やっておいた方法を紹介しています。具体的には、以下のことができるようになるはずです。

この3つの点に目標を置いて、やり方を紹介していきます。

ファンブログのテンプレートを選ぶ

まず、ファンブログのテンプレート選びから行います。ファンブログのテンプレートは、いろいろ用意されていますので、迷ってしまう方も多いと思います。

カスタム用のシンプルなテンプレートでもいいですが、初心者の場合自分で行うカスタマイズは最小限にしつつ、オリジナリティを出したいので、少しテーマがあるものを選ぶとよいと思います。

ファンブログのテンプレートを選ぶには、管理画面のメニューバーで「デザイン」の「デザイン設定」をクリックします。そうすると、PCのテンプレートを選ぶ画面になりますので、表示されているテンプレートの中から自分のブログの雰囲気に合ったものを選んでみてください。

私は今回ダイエット系のブログで説明するので、「カフェ」を選びました。テーマが決まっているテンプレートはサイドバーのタイトル装飾がすでに行われているので、すべてを作りこまなくても、かわいいブログデザインができてしまいます。

ファンブログのヘッダーに画像を挿入する

1．画像を用意する

テンプレートが決まったら、まずヘッダーに画像を挿入します。画像は自分で撮影したものがなければ、無料の画像素材サイトからダウンロードしたものでかまいません。必ず商用利用可能なものを使ってくださいね。

ダウンロードするときには、横幅が1200ピクセル以上あるものを選ぶようにしましょう。これをヘッダーのサイズに合わせてサイズ変更して使います。

2．ヘッダーサイズを確認する

画像をダウンロードしたら次にテンプレートのヘッダーサイズを確認します。デザイン→デザイン設定→CSSの編集を選択し、CSSファイルを開きましょう。そこで、#containerもしくはdiv#headerという文字列を探してみてください。そのいずれかにwidth:という表示があると思います。ここに現れている数字が、横幅の大きさになります。

私の場合は、

#container {
width:950px;
text-align:left;
margin:0 auto;
position:relative;
background:#ffffff;
word-wrap: break-word;
}

という記述があったので、横幅は950ピクセルということになります。

3．画像をサイズ調整する

私はWindowsにデフォルトで入っていたPaintツールを使ってサイズ調整します。

ダウンロードした画像をこの横幅に合わせてサイズ調整します。画像のサイズ変更は、PCにデフォルトで入っている画像編集ツールを使ってもいいし、オンラインでできる画像編集ツールを使ってもかまいません。トリミングやリサイズ機能を使って行います。無料のもので十分できるので、挑戦してみてください。

画像の幅を、表示されていたwidthの幅にします。高さは後で調整できるので、ヘッダーとして収まりのいい感じにトリミングしておくとよいでしょう。

4．ブログにヘッダー画像をアップロードする

サイズ調整した画像をファンブログにアップロードします。管理画面のメニューバーで「画像管理」をクリックし、「クリック、もしくはここにファイルをドロップ」という表示が出るので、そのゾーンをクリックしてパソコンからサイズ変更した画像を選択します。

しばらく待つとアップロードが完了し、画面下半分のリストに画像が表示されるはずです。

このように画像が表示されたら、画像のすぐ右側にある文字列をクリックします。そうすると以下のようなウインドウが開きます。

ここで、右下にある文字列をもう一度クリックします。

そうすると画像が拡大されて表示されますので、その時のURL窓にある文字列をコピーしてください。メモ帳やテキストパッドにメモっておきます。

5．CSS編集で画像URLを書き込む

そして再度、デザイン設定からCSSの編集を行います。CSSの編集で、div#headerもしくは#headerの表示を探してください。そこにbackground:という記述があれば、その後の「url(」以下カッコ内を、先のコピーした画像URLに置き換えます。

緑色の下線を引いた箇所を置き換える

ただし、先ほどコピーした画像URL文字列でjpgもしくはpngまでの部分のみを記入します。

私の画像の場合は、https://fanblogs.jp/talkaboutdiet/file/undefined/food-3425223_1000.jpg?no_header=1となっていたので、「https://」から「jpg」までの部分になります。

background:という記述がない場合は、以下の文字列を挿入してください。

background:url(画像のURL) left top no-repeat;

これで、一度プレビューを見てみてください。画像がヘッダーに挿入されていたらOKです。いったん保存しておきましょう。

6．画像とブログタイトルなどの微調整

次に画像やブログタイトルの微調整を行います。私の場合、

こんな感じで、ちょっとブログタイトルがもうちょっと上に上がっていてほしいところです。そこで、CSSをよく見つめて編集できる個所を探します。

div#headerもしくは#headerの部分がヘッダーに関する箇所なので、その中をちょこっといじってみます。私は、「div#header {padding:88px 0 0 20px;」となっていた数字の88を44に変更してみました。そうすると、

こんな感じに、画像の高さが短くなり、その分文字が持ち上がって収まりがよくなったので、これで良しとします。

その他に、ヘッダーの高さを調整するなら、div#headerのところに「height:200px」というように高さを記述すると好きな高さに設定できます。そのほか、ブログタイトルやブログの説明文の位置や文字色も変更できます。

以上のような文字列が使えます。ただし、コロン「：」は、実際のCSS編集では半角を使ってくださいね。CSSシート内の前後にある同じような記述をコピーして、数字だけ入れ替えるとミスが少なくなります。

ファンブログにヘッダー画像を挿入する方法は以上です。次は、ヘッダーにナビゲーションメニューを追加します。