BTemplates.com

2013年3月12日火曜日

bloggerでサムネイル付きリンクを上手く表示させる方法(chrome)

スポンサーリンク




※追記
頂いたコメントを参考にしたらきれいにできました!!









こっちの方がいいので参考にしてください!以下は私の奮闘記だと思ってくださいww



******



この方の記事を参考にchromeでShareLinkを使ってみたんですが

yocchy.com » 初心者向け!ブログを紹介するブックマークレット「ShareHtml」使い方





謎の白い四角が…!!!!どうもこの四角は、はてなブックマーク数みたい。
なぜ表示されず白い四角になってしまってる。



なので、下の太文字部分<a href="http://b.hatena.ne.jp~から全てをとってみたら




<a href="http://yocchy.com/uncategorized/93/" target="_blank"><img align="left" alt="" border="0" class="alignleft" height="130" src="http://capture.heartrails.com/150x130/shadow?http://yocchy.com/uncategorized/93/" width="150" /></a><a href="http://yocchy.com/uncategorized/93/" style="color: #0070c5;" target="_blank">yocchy.com » 初心者向け!ブログを紹介するブックマークレット「ShareHtml」使い方</a><a href="http://b.hatena.ne.jp/entry/http://yocchy.com/uncategorized/93/" target="_blank"><img alt="" border="0" src="http://b.hatena.ne.jp/entry/image/http://yocchy.com/uncategorized/93/" /></a>





yocchy.com » 初心者向け!ブログを紹介するブックマークレット「ShareHtml」使い方










白い枠を消すことに成功!いえーい!



しかしホンネはchromeのCreareLinkの方が楽だからこっちを使いたい…



「りくまろぐ」さんの記事通りにCSSも足してみたが、サムネイルの姿形もない…
(WP向けの記事だからbloggerじゃ無理だったのか)




[browsershot url="http://rikumalog.com/wordpress/bmshots-createlink.html" width="200"]
ブログ記事をサムネイル画像+はてブ数付きで紹介する方法・Chrome版 : りくまろぐ *





「ウェブシェフ」さん記事通りだとサムネイルはあるけど非表示(Safariで見たら画像見えた、でもどっちとも白いはてぶの四角がある)




他サイト紹介記事に便利!サムネイル画像付きリンクを5秒で生成する方法 |ウェブシュフ




そして私は「りくまろぐ」さんのCSSつけて
(テンプレート→カスタマイズ→アドバンス→CSSを追加というとこにペーストしてエンター押してブログに適用をクリック)※エンターおさないと保存できなかった



/* サムネイル画像 */
div.browsershot img {
    float: left;
    margin-right: 15px;
}

/* 右側タイトル内の画像、はてブ */
div.bshotdetail span img,
span.hatebuuser img {
    float: none;
    margin-left: 5px;
}

/* 回り込みの解除 */
div.divclear {
    clear: both;
}



さらにCreareLinkには、ウェブシェフさんのHTML



<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>



を、CreateLinkのHTML部分にペーストしたら出来たーーー!!!!!!!!!!!




やったーーーー!!!先人の知恵最高!!!!!





超簡単!サムネイル付きで記事を紹介する方法。 » beat910.com 零式 | beat910.com 零式




でも今度は、はてぶの白枠が気になる・・・画像認識しちゃってる…


ウェブシェフさんのHTMLのはてぶの部分いろいろと消してみたら、サムネイルが表示されなくなったのでHTMLいじるのは断念して、一回一回消すことにした。




超簡単!サムネイル付きで記事を紹介する方法。 » beat910.com 零式 | beat910.com 零式









bloggerの作成画面から、はてぶの「×user」となっているとこをクリックして出てきた画面の右下にある削除ボタンを押して消してる。


なんか良い方法あったら教えてください!!!




スポンサーリンク

SHARE 

2 件のコメント:

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

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

    ではダメでしょうか?

    <div class="hogehoge">
    ~~~作られたリンク~~~
    </div>

    とかに放り込んで上げる感じです。

    返信削除
  2. なるほど!divのクラスで囲む手がありましたね!!

    喫茶店さんの教えてくれたccsを足したとこ少し白枠?が残ったので

    padding: 0;
    border: 0 none;

    を付けたしたら、全てなくなりました!

    しかし画像が表示されなくなったので考えますw
    アイディアありがとうございました!

    返信削除