BLOG CATEGORY

Monthly Archives

長フチコンテンツ

ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» FC2ブログでタイトルの画像への変更方法

このエントリーをはてなブックマークに追加

FC2ブログでタイトルの画像への変更方法

   投稿日: 2016/02/12    投稿者:webコラム

20160212-1.jpg

こんにちは!ライターのモモタロウです。

 今回は、FC2ブログでタイトルを画像に変更してみます。

是非、自分だけのオリジナルブログを作成してみましょう!

FC2ブログでタイトルを画像に変更するには?

20160212-2.jpg


タイトルを画像に変えるには、FC2のHTMLとCSS(スタイルシート)を少し変更するだけです。

FC2ブログにログインし、管理画面に入ったら、テンプレートボタンをクリックします。

テンプレート設定のところでHTMLとスタイルシートの編集部分があります。

まず、HTMLで、「h1」部分を探し出します。

「Ctrl+F」で検索フォームに「h1」を入力するとよいです。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>

編集する場所は、以下↓の○で囲った部分です。


20160212-3.jpg

「<%blog_name>」を以下のように変更します。

<h1><a href="<%url>" accesskey="0" title="<%blog_name>"><img src="画像アドレス" alt=
"<%blog_name>" /
></a></h1>

20160212-4.jpg

(画像は事前に「ファイルアップロード」からアップロードしておくか、
編集時にアップロードして画像アドレスを取得して書き加えることになります)


これで画像に変わりました。↓
20160212-5.jpg


このあと、画像を以下のように加工してもよいでしょう。




20160212-10.jpg



タイトル画像の位置を調整する方法


先ほどは、HTMLを変更しました。次にスタイルシートを変更します。


スタイルシートで以下のように追加すると画像の位置などを調整することができます。
body #header h1 {
 background: none;
 margin-bottom: 20px;
 padding: 0px 0px 0px 0px; /* 上右下左の余白 */
}
20160212-11.jpg
↑の画像はスタイルシートのheadr部分に追加(□で囲った部分)したあと、

上余白50px(○で囲った部分)としたものです。

20160212-12.jpg


いかがでしたか?

画像はブログそのものにインパクトを与えます。オリジナルブログを
さらに魅力のあるブログとすることができるでしょう。

是非、今回ご紹介したタイトルを画像に変更する方法を試してみて下さい!

カテゴリ:

TOPへ