こんにちは。あきです。
「ブログのトップページにある一番上のタイトル画像ってどうやって変更するんだろう?」
ブログを始めた頃、色々なブログに訪問すると、よくトップページのタイトル画像がオリジナルの画像になっていて、こんな事を思ってました。
そこで今日はFC2ブログのタイトル画像の変更方法をお届けしようかと思います。
自分だけのオリジナルのデザインを設定してみましょう。
ただ以下のテンプレートの様にページ上部に何も画像等を使用していないテンプレートの場合は画像を設定できないかもしれません。
それではいつもの様にFC2ブログより管理者ページに移動してください。
1.「テンプレートの設定」をクリックします。
2.現在使用しているテンプレート(四角枠を確認)の「編集」をクリックします。
3.以下の様にHTMLの編集欄が表示されます。あまり見たくない文字が並んでますね。 この文中でタイトル画像を表示するための設定をしています。
ただ残念な事に各テンプレートによってタイトル画像を変更する場所が違います。 はじめのテンプレートの様にタイトル画像がないテンプレートもあるので。
そこで以下の方法より文中でタイトル画像を指定している箇所を探してみましょう。
画像を使用している箇所の探し方
(1)スタイルシートの編集欄より設定位置を探す方法
・まず以下の様にタイトル画像と記事の欄がはっきりと区別されているテンプレートでテンプレートの作者が「FC2」の場合、どうやら同じ様な箇所で画像の表示を指定しているようです。
・「3.HTMLの編集欄」の下にスタイルシートの編集欄があります。その中に以下の黒枠で囲ってある#bannerと書かれた箇所があり、ハイライト表示されている部分がタイトル画像の指定場所です。
(2)特定の拡張子で検索する方法
・上記以外のテンプレートの場合、テンプレートの作者によって設定場所が違うので自分で探す必要があります。
そこで効率よく探すためにショートカット「Ctrl + F」キーを活用しましょう。
通常タイトル画像を使用している場合はほとんどの場合、拡張子が「.jpg」か「.png」です。
それでは以下のテンプレートのタイトル画像を探して見ましょう。
・まず以下の黒枠で囲まれたテキストボックスをクリックした後、「Ctrl + F」キーをクリックして検索画面を表示し
「検索する文字列」にjpgと入力し「次を検索」をクリックします。
・以下の様に文中にjpgと指定している箇所が存在する場合、以下の様に該当箇所がハイライト表示され検索されます。
そこで以下の箇所がタイトル画像か確認するために黒枠で囲っている部分をドラッグして、コピー「Ctrl + C」してください。
・新規にブラウザを立ち上げ、コピーしたURLをアドレス欄に貼り付け「enter」キーを押下します。すると以下のような枠が表示されました。
これはタイトル画像のURLではないようです。
・また元のテンプレート編集ページに戻り、「Ctrl + F」キーで同じように「次を検索」をクリックします。
以下の黒枠で囲った箇所が検索されました。そこで上で行った操作とまったく同じように、黒枠部分をコピーしてブラウザのアドレスに貼り付けます。
・以下の様にタイトル画像が表示され、この箇所でタイトル画像を設定している事が分かります。
この方法でgifなども含めて検索すると実際にテンプレートで使ってるパーツが分かり、カスタマイズするときに非常に役に立ちます。
すこし長くなってしまったので次回、実際にタイトル画像を変更していきたいと思います。