Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログのトップ画像にリンクをはる方法

[スポンサード リンク]


今回、ブログのトップ画像を変更する際にブログタイトルもその画像に含めました。
よって、元からあったタイトルの文字が要らなくなりました。

ブログタイトルというのはタグで言うとこの部分。

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

(『Health is better than wealth』と表示されます。)

さらに、ブログの説明文も画像に入れちゃったんですよね。
タグでいうとこの部分。

<p><%introduction></p>

(『インターネットで思った事や学んだ事などを気楽に綴ったブログです。』と表示されます。)

これらのタグをほおっておくとトップ画像の上に表示されてしまいます。
下の画像自体にもブログタイトルと説明文があるので、ハチャメチャな状態になってしまいました。

『じゃーこのタグを削除しちゃおう(゚∀゚)』と思うかもしれませんがそうはいきません。

  • スタイルシートをきった場合にブログタイトルと説明文が表示されない。
  • タイトルがブログの重要なキーワードの場合、SEO的に損します。
    (私のブログはお構いなしですが・・・。)

<h1>タグは見出しの一番重要なタグですからね。
それを無くすのは何となくいけない気がしますでしょ。

というわけで、タグを残したままCSSで文字列の表示を消しました。
こういうのを画像置換とか言ったりします。方法はいくつかあります。
text-indentで遥か彼方へ吹っ飛ばす方法やdisplay:noneで非表示にする方法など。
どちらもCSS(カスケーティングスタイルシート)で該当するタグに設定します。

私は、text-indent:-9999px;で非表示にしました。

text-indentはインデント)を指定するプロパティです。
それを利用してあり得ない数値を入れる事で画面の外に追いやります。
アクセシビリティ上良くないとか、SEOスパムになる?など色々な情報もありますが便利なので使っちゃいました。

ちなみにdisplay:noneはdisplay(表示)をnone(無くす)というプロパティです。
ソースにはあるけどCSSで消されちゃうわけです、やるなぁCSS君ヽ(´∀`)

スタイルシート(CSS)の該当箇所にtext-indent:-9999px;を加えれば完了です。


div#header h1 a{
       text-indent:-9999px;
}

div#header p{
       text-indent:-9999px;
}

(他のプロパティは省略してます。)

これでトップ画像のみの表示になりました。
前置きが長くなりましたが、ここからが本題です。

ブログのトップ画像にリンクをはる方法です。

タイトル文字はどのページからもすぐにトップページへジャンプできるリンクになっていたのでとても重要なものでした。
文字をCSSで消しているのでリンクも無くなっちゃいました。
さぁ、困った困った。

トップ画像を<img>タグで表示しているならば、その<img>タグを囲むようにして、トップページへのリンクを張ればOKです。
例えばこんな感じで、

<a href="http://miracleblues.blog46.fc2.com/"><img src="画像のURL" alt="" border="0"><a>

これで、トップ画像をクリックすればトップページへジャンプします。

でも、私の場合ダメなんです。
なぜなら、トップ画像を背景として設定しているから・・・。
(imgタグではなく、backgroundで表示してるのです。)

背景の設定はCSSで管理しています。
ソースに画像のタグが無いのでリンクタグで囲みようがありません。
アー困った困った。

こういう時に活躍するのがJavaScriptです。
トップ画像を背景画像として表示している場所は、<div id="header">~</div>ですので、このdivタグに細工をします。
(ちなみにこのdiv内に<h1>と<p>が含まれていますよ。)

<div id="header" onclick="location.href='http://miracleblues.blog46.fc2.com/'" style="cursor:pointer">

onclick="location.href='http://miracleblues.blog46.fc2.com/'"
意味は、onclick(クリック)で、location(場所)のhref(アドレス)が「http://miracleblues.blog46.fc2.com/'"」になるよ~みたいな感じです。

style="cursor:pointer"
こちらはマウスオーバーした時のカーソル(cursor)をpointer(手)に設定してます。
style=""は、タグに直接CSSを打ち込む時のものです。

pointerの部分は、お好みで決めます。
下記サイトで色々なカーソルをお試ししてみましょう。

カーソル変化一覧/HTMLタグ素材集

あまり変なカーソルは設定しない方が良いでしょう。
特にwaitなんかはダーメ。

あとカーソル変更無しでも良いのですが、ここはリンクだよって明示する為にはあった方がよいと思います。トップページに戻る時にそのサイトのロゴやトップ画像付近を探るってのは結構みんなやる事ではないでしょうか?
トップページへのリンクが他にちゃんと用意されていれば別ですけどね。

そんなこんなで現在のスタイルになったというわけです。
トップページに戻れないサイトは作らない方がよろしー( ´Д`)ノ~

Comments

ライムぱぱ : 大変参考になりました

こんにちは。自分もパペポさんと同様な方法でブログタイトルを画像に置き換えてみたんですが、タイトル画像からトップページにリンクさせる方法で悩んでいました。
しかし、パペポさんのブログのおかげで解決しました。ありがとうございました。

パペポ : ヤッター

>ライムぱぱさん
おぉーそれはよかったよかった^^
問題解決のお手伝いが出来て私もとても嬉しいです(*´д`*)
またお立ち寄りくださいませ~

mirumiru : 助かりました。

検索からこちらへ辿り着きました。
私も同じく、画像をリンクさせる方法で困っておりました。

大変わかりやすく、無事にリンクさせる事ができました。
ホントにどうもありがとうございました♪♪♪

パペポ : 良かったです。

>mirumiruさん
ご訪問どうもですー!
わかりやすいと褒めて頂いて感激です。
こちらこそどうもありがとうございます。
お力になれて良かったです( ´∀`)

はるか : ありがとうございました!

はじめまして!同じようなことに悩んでいました。3時間ほど格闘して、あきらめそうになりましたが、こちらのサイトのお陰で解決できました!本当にありがとうございました。
同じような症状だったので、本当にたすかりました(涙)。

パペポ : No title

はじめまして、はるかさん

コメントありがとうございます。

問題解決に役立てて嬉しいです。

ブログ残しててよかったです。



: 承認待ちコメント

このコメントは管理者の承認待ちです

: 承認待ちコメント

このコメントは管理者の承認待ちです

: 承認待ちコメント

このコメントは管理者の承認待ちです

: 承認待ちコメント

このコメントは管理者の承認待ちです

: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Comment Form