BTemplates.com

2013年3月31日日曜日

blogger サムネイルリンクだけの画像枠を表示させない方法、完成版(chroma)

スポンサーリンク




bloggerでサムネイル付きリンクを上手く表示させる方法(chrome)の続きで、完全版です!

こっちの記事の方を参考にしてください☆

bloggerでサムネイルリンク使うとブクマにもサムネイルにも枠がついて困る!でもサムネイルリンク以外の画像には枠をつけたままが良い!という私みたいな人必見です。


前回の記事にありがたいコメントが付きました!


divのクラスで囲ってあげて、


 .○○(クラス名) img{
border: 0 !important;
box-shadow: none !important;
}


 ではダメでしょうか?


 <div class="hogehoge"> ~~~作られたリンク~~~ </div> とかに放り込んで上げる感じです。




そ、divクラスで囲む…その手があったか!!

このcssのままだと白枠が表示されるので、にさらにpadding: 0;を付け足しました。


.hogehoge img{
padding: 0;
border: 0 !important;
box-shadow: none !important;
}


これだとばっちりです!
うわーい!できたよぉぉぉおおおおお!!!


このサムネイルリンクはコメントくれた喫茶店さんのブログです☆









喫茶店な!










やっとできたーww長かったーwwww喫茶店さんありがとうぅぅぅううぅぅううううぅぅ><



では、おさらいします。


createLinkのFormatにこのHTMLを入れます。



<div class="hogehoge"><a href="%url%" target="_blank"><img class="alignleft" align="left" border="0" src="http://capture.heartrails.com/150x130/shadow?%url%" alt="" width="150" height="130" /> </a> <a style="color:#0070C5;" href="%url%" target="_blank">%title%</a> <a href="http://b.hatena.ne.jp/entry/%url%" target="_blank"> <img border="0" src="http://b.hatena.ne.jp/entry/image/%url%" alt="" /> </a> <div style="clear:both;"></div></div>




次にbloggerのテンプレート→上級者向け→cssを追加に、以下のcssを追加



.hogehoge img{
padding: 0;
border: 0 !important;
box-shadow: none !important;
}



で、完成です!いやー…今まですごく迷ったけど簡単にできました…。
私みたいなHTML・cssを理解してない同じ悩みの方にぜひ見てほしいですw


ちなみにhogehogeの部分はどんな名前でも良いですが、私は気に入ったのでhogehogeのままにしましたw

(名前はなんでも良いけどdivクラスで使った名前をcssを指定してね。)


ちなみに前回(ミンショジョ: bloggerでサムネイル付きリンクを上手く表示させる方法(chrome))以下のcssを追加していたんですが、消しても大丈夫だったので消しました。
(長くなるので改行省略w)


/* サムネイル画像 */ div.browsershot img { float: left; margin-right: 15px; } /* 右側タイトル内の画像、はてブ */ div.bshotdetail span img, span.hatebuuser img { float: none; margin-left: 5px; } /* 回り込みの解除 */ div.divclear { clear: both; }


同じ悩みの方ぜひやってみてくださいね☆


4/13追記:「なんでかクラスで囲ったらサムネイル表示されなくなった!でも <div style="clear:both;"></div>の位置を変えたら画像表示された!」と、書いたんですが、勘違いでした。追記を重ねるとややこしくなるので、新規さんに見やすいようにその部分は消しました>< 


たまたまcapture.heartrails.comの調子とあっただけみたいで位置は関係ないみたいです。<div style="clear:both;"></div>は回り込み解除するためにimagの後にないとダメです!!

<div style="clear:both;"></div>は周り込み解除の意味があるってコメント欄で教えてもらって知りましたw喫茶店さんありがとう!!

画像の横に文字がきて困っていたのですが、これが回り込みという現象だと検索して知りましたww

なんかここまでに、いっぱいミスしたけどやっとサムネイル付きリンクちゃんと使えるようになった…長かった…。




スポンサーリンク

SHARE 

2 件のコメント:

  1. いつも見てます^^
    とても参考になりました

    返信削除
  2. ぉ、できてよかったです。

    clear:bothについてですが、あれは回りこみを解除するために必要です。
    Divをつかわずに、

    <br style="clear:both;" />
    を使っても良いです。

    青文字部分を上記ととっかえて利用も可能です。

    返信削除