KAETENで作ったFC2ブログのヘッダー画像にリンクを張る方法!

KAETENで作ったFC2ブログのヘッダー画像にリンクを張る方法!

河村です。

 

実はですね、FC2ブログのヘッダー画像が
トップページにリンクされていなくて困っていたのですが
ようやくヘッダー画像にリンクを貼ることが出来ました。

 

普通のテンプレだったらある程度ググれば何とか分かったんですが
僕の使ってるテンプレってKAETENなんですよね。

で、このKAETENでヘッダー画像にリンクを貼るやり方が
全く持って意味不明で理解に苦しんでいたんです。

 

そもそもHTMLは多少は分かるとしても
CSSなんてほんの少しいじってはいるけど
マニュアル通りにいじっただけでさっぱり意味すら分かってないんですから^^;

 

いろいろとKAETENを導入したFC2ブログのヘッダー画像に
リンクを貼る方法は見つけましたけど、
はっきりいって難しすぎてよくわからんって始末。

たぶん集中力が続けばクリア出来るはずなんだけど
どうもこの文字列を見てると頭が痛くなってきて
体中が痒くなってくるんですよね(笑)

 

まぁそうこうして休み休み悪戦苦闘しながら2時間後やっと解決できましたよ。

この方法なら簡単なのでコピペでちゃちゃっと出来ますよ。

 

それからヘッダー画像を入れた時に
ブログタイトル文字が残ってしまっているから消したいって時は
こちらをまず参考にしてください。

 

テンプレートのスタイルシート編集画面

ヘッダーの文字色の部分に
display:none;というタグを追加する。

これによって画面上ではタイトル文字が消えていますが
ソース自体は残っているのでSEO的にも何ら問題はありません。

 

さて今回のメイン、ヘッダー画像にトップページのリンクを張る方法です。

 

テンプレートのHTML編集画面【▼ヘッダー・開始▼】で囲まれた部分を編集していきます。

div id=”header-in”

というタグありますので

それを
div id=”header-in” onclick=”location.href=’トップページのURL‘” style=”cursor:pointer;”

に変更します。

 

僕の場合ですと
div id=”header-in” onclick=”location.href=’http://akika0325.blog.fc2.com/‘” style=”cursor:pointer;”

こんな感じですね。

 

このURLの部分をしっかりとアポストロフィーで囲うんです。

で、このアポストロフィーの後にダブルクォーテーションです。

 

アポストロフィーっていうのはコレ

 

ダブルクォーテーションっていうのはコレ

 

文字で載せると上手いこと表示されないんで

下の画像で見たほうが分かりやすいと思います。

 

これで更新を押せば
ヘッダー画像にリンクが挿入されているのが分かるはずです。

 

マウスでカーソルをヘッダー画像に持ってくると
このように指のマークに変わっています。

クリックすればトップページに飛びますので。

 

どうですか?

 

たった一行を変えるだけで
KAETENのFC2ブログでも簡単にヘッダー画像にトップページのリンクを張ることが出来ました。

 

いろいろ調べてみたけどイマイチ分からないって人は
是非参考にしてみてください。

 

河村でした。

2 件のコメント

  • 河村さん

    はじめまして。心太朗と申します。
    僕もKAETENをつかっているブログがあるのですが
    カスタマイズとなるとチンプンカンプンで^^;

    記事内で仰ってらしたように
    あの文字列を見てると・・・(T_T)
    となりますよね^^;

    参考になる記事をありがとうございました。
    応援させていただきました。

    • 心太郎さんコメントありがとうございます。

      僕の記事が少しでも参考になってくれたようで何よりです^^

      応援ありがとうございました♪

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA


    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください