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なんかはダーメ。

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

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

ブログ記事にコードを貼りつける良い方法

私のブログは、よくブログパーツとか記事にしているので記事にJavaScriptを直接貼りつけて実行させる事がよくあります
しかし、JavaScriptなどのコード自体を記事にする機会はあまりありません。
好きですがあまり得意ではないもんで…

前回、『最新記事に新着マークをつける』で書いた時にさんざん迷った挙句、<textarea>~</textarea>内にコードを記述しました
Ctrl+Aでエリア内のコードを全選択できるので便利かなと思ったんです。

でも、今回、またコードを書いた際にやっぱ面倒だなと思った事が3つ。

  1. 改行の扱いを「HTMLタグのみ 」にしないと、テキストエリア内の改行が「<br />」と表示されてしまう。
  2. 改行の扱いを「HTMLタグのみ 」にするという事は普通に改行する時にも一々<br />と改行タグを書かなくてはならないという事。(「自動改行」のが断然楽!)
  3. リストタグ(<ol>~</ol>)などのマージンがなくなって詰まって表示されてしまった。

これでは不便です~。
もしかしたらこれからコードを紹介する機会が増えるかもしれないので結論を出しました。
今回は、i d e a * i d e aさんの『ブログにコードを貼り付ける方法で悩むの巻』を参考にさせていただきました。

ブログ記事にコードを貼りつける良い方法

  1. <textarea>~</textarea>はとりあえず封印。(全選択は諦める。)
  2. <pre><code>~</code></pre>が正しいらしいのでこれを使う。
  3. 中のコードの「<」や「>」は実体参照を使う!(蓄々HTML実体参照変換が便利
  4. フォントはCourier Newや、monospaceなどのコードが読みやすい等幅フォントを使う。
    (cssで設定出来ます。font-family:"Courier New",monospace;)
  5. 変なところで改行されると見にくいので、overflowでscroll表示する。
    でも、画面から隠れるのも見づらいかも…
  6. <pre class="code">のようにpre要素にクラスを付けてcssで見てくれなどを処理する手もある。

というわけで、当ブログのコードを書くエリアは<pre><code>~</code></pre>で囲む事になりました
残念ながらCtrl+Aは使えません。
コードをコピーする際は隠れた部分を残さないように注意しましょうね