タイトル・説明文を消し画像へリンクを挿入 [ソネットブログカスタマイズ]
前回はタイトルの文字位置変更をやりました。
今回はそのタイトルと説明文を消し、且つタイトル画像へ自分のサイトのトップページのリンクが入る方法です。
また、当サイトのソネブロカスタマイズのまとめ目次ページのようなものを作ってみました。
このページはブログカスタマイズ記事更新ごとに目次ページも更新するようにする予定です。
では早速、タイトルと説明文を消し去りましょう。
今回いじるタグは前回同様/*-----Header-----*/内の
| #banner（タイトル画像分） |
| #banner h1（タイトル文字部分） |
| #banner h1 a（タイトル欄へのリンク） |
| #lead（説明文） |
になります。何もいじってない状態は以下の通りです。
| #banner { height:100px; padding:0 20px; background:#d0ceb7; clear:both; } #banner h1{ margin:0; padding:20px 0 5px 0; font-size:x-large; } #banner h1 a{ } #lead{ margin:0; } |
最近知ったソネブログ教室によると、
| #banner { background:url(画像パス) no-repeat; ←画像を指定 height:200px; ←タイトルバナー高さ指定 clear:both; } #banner h1{ } #banner h1 a{ text-indent:-3000em; ←タイトルテキストを消す記述 display:block; ←ここから下3行がリンクを有効にする指定と有効範囲の記述 width:770px; height:200px; } #lead{ text-indent:-3000em; ←ブログ説明文を消す記述 } |
これをそっくりそのまま自分のものに置き換えると、私はタイトル画像の高さが183pxなので、赤字の部分だけ書き換えてます。
| #banner { background:url(/blog/_images/blog/_d8f/●/●●.gif) no-repeat; height:183px; clear:both; } #banner h1{ } #banner h1 a{ text-indent:-3000em; display:block; width:770px; height:183px; } #lead{ text-indent:-3000em; } |
これで↓画像でいくと、の青枠部分をクリックすると、自分のページトップにリンクされるようになるようです。
が、
問題発生。このままだと、青の矢印部分に大きな余白が出来てしまいます。
ファイヤーフォックスに至っては、この余白が上部分（赤矢印部分）に来てしまい、とてもじゃないけどオススメできません。
（関連：Firefoxとは）
実際私もインターネットエクスプローラーで作成した為、Firefoxで見るとめちゃくちゃな箇所が多々あり、この記事を書きながら本ブログを修正したりしています。まだまだ、インターネットエクスプローラーを使ってる人の方が圧倒的に多いですが、Firefoxを使用している人もかなり増えていますので、どちらで見ても同じように見えるようにカスタマイズした方がいい。と思います。
で、
他のタグをいじくって修正するとことまでわからないので、（勉強不足ですいません。わかる方いましたらアドバイス下さい。また他をカスタマイズした時にココにたどり着いたときにまたＵＰします。）タイトル画像全体リンクするのではなく、タイトル周辺をリンクする形で解決させました。
| #banner { background:url(/blog/_images/blog/_d8f/chocolaboo/8742970.gif) no-repeat; height:183px; width :770px; clear:both; } #banner h1{ margin:0; padding:40px 0 0 30px;（①タイトルがリンクされる位置） text-indent:-3000em; } #banner h1 a{ display:block; height:100px;（②リンクが囲まれる高さ） width :420px;（③リンクが囲まれる幅） } #lead{ margin:0; text-indent:-3000em; } |
□青枠内にをクリックするとリンクが入るようになりました。（※□青枠は通常表示されません。）
①②③は自分で作った画像に入ってるタイトル位置によって異なります。
ちなみに画像で説明すると
paddingは、
padding:40px 0px 0px 100px にすればもっと右に・・・
padding:10px 0px 0px 100px にすればもっと上で、右に・・・といった感じです。
あまり上に余白をあけると、最初のような記事との間に余白があいてしまうので注意です。（関連：padding）
私も自分で記事にしながら勉強中なので、他にもやり方はあると思います。参考まで・・・
ソネットブログカスタマイズ目次
