ブログタイトルと記事タイトルに画像を挿入する方法

ブログタイトルと記事タイトルの前後に画像を挿入する方法です。当サイトで配布しているvalid-seo-2c と valid-seo-3c のver1.0.1までについてです。

画像をアップロードする

  1. fc2blog管理画面から表示させたい画像をアップロードし、その画像のURLを確認します。

    valid-seo-101-img-in-title.png
  2. 必須ではありませんが、ついでに画像サイズも確認しておきます。下図で赤線で示した部分を確認します。fc2logo.pngという画像は90 x 30と書かれていますので、横90ピクセルで縦30ピクセルになります。

    valid-seo-101-img-in-title-2.png

テンプレート内にタグを挿入する

ブログのタイトルに画像を挿入する場合

  1. 画像挿入前は下図のとおりです。

    valid-seo-101-img-in-title-6.png
  2. テンプレート内で、下図の赤線で示した<%blog_name>の前後に次のタグを挿入します。赤文字のURL、横幅、高さ、画像の説明などは適宜修正してください。

    
    <img src="http://blog-imgs-44.fc2.com/c/u/s/customtemplate/fc2logo.png" width="90" height="30" alt="fc2logo" />
    
    valid-seo-101-img-in-title-3.png
  3. テンプレートのHTMLにタグを挿入すると下図のようになります。黄色でマーカーしたところがブログタイトルの前に挿入したタグ、ピンクでマーカーしたところがブログタイトルの後ろに挿入したタグです。

    valid-seo-101-img-in-title-4.png
  4. 次のとおり画像が挿入されました。

    valid-seo-101-img-in-title-5.png

記事タイトルに画像を挿入する場合

  1. テンプレート内で、下図の赤線で示した<%topentry_title>の前後に上述のimgタグを挿入します。挿入する画像に合わせて適宜修正してください。

    valid-seo-101-img-in-title-7.png
  2. 下図のとおり、各記事タイトルの前後に画像が挿入されました。

    valid-seo-101-img-in-title-8.png
関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)