ブログカスタマイズ

Thumbnails の表示 その2

2 0
20121009-02.jpg今年の2月に導入し重宝していた「Tumblr」のサムネイルを表示出来るブログパーツ「Tumblr Tumblr Thumbnails」。(略称 Thumbnails)
公開されているコードでは画像が縦に並んでしまうので、いろいろ探し回ったところ、なんとか横並びに出来る方法を見つけ出し、ホクホクしながら使っていたのですが、9/19にブログのテンプレート(スキン)=デザインを変えたところ、横表示に出来なくなりまして~

いろいろやってみたんですが、全くダメ!
仕方ないので「複眼RSS」で表示させていたんですが、それだとGIFの画像が表示出来ないんですよねえ。それで今日、なんとかならないものかと再びコードの見直しをしまして、半日くらいかかってやっと原因を突き止めることが出来ました~。

って、結局マージンの指定が広すぎただけだったんです~。

■ 私が使用したHTML(プラグインに追加)

<div id="tumblr">
<script type="text/javascript" src="http://th.umbls.com/js/thumbnails.js?user=ユーザー名&num=表示数"></script>
</div>
<div style="clear:left;">
</div>


■ 私が使用したCSS(テンプレートのCSS最下部に追加)

#tumblr li{
float: left;
list-style-type:none;
}
#tumblr img{
float:left;
margin:5px;    margin:4px;
border-style:solid;
border-color:#999999;
border-width:1px;
}


margin:5px; を margin:4px; に変えたら横表示出来るようになりました。
何のことはないマージンを取りすぎて改行されちゃってただけだったんです~。
あんなにいろいろコードを貼り直したのがバカみたい…。
なんでそれに気づかなかったんだろうなあ。
いや、実際HTMLの勉強してやってるわけじゃなくて当てずっぽうなんで…
それでわかったのは奇跡だったかも~。(笑)


blog-koushin-02.jpg
マクタロウとふたりで運営する「のほほん本舗」トップページ:今日の空
「日刊のほほん本舗」今日の空の全景写真のブログ


 ←ポチッと押してね!

Comments 2

There are no comments yet.

さくら

No title

こんにちは~♪
マクノスケさん、ご自分でテンプレート作られるんですか?
全然わからないけどすごいです~!!
私なんて「改行」くらいしかわからないです・・・。
私が使っているテンプレートあるでしょ。
あれを作ったお友達も独学で覚えたらしくって、
ホント、頭が下がります。
自分で作れたらいいですよね~。
また頭が切れたらいけないのでやりませんが・・・。

↓はまはつフラワーパーク、綺麗ですね♪
静岡って、遊びに行けるところがたくさんあってうらやましいです。
もう咲いている桜があるんですね!ビックリ!!(*・0・*) ワオ

マク→さくらさん

さくらさんへ

いえいえ~。コードやタグは根本的にわかってなくて~。
テンプレートのカスタマイズとプラグインに少々手を加えているだけなんです。
だから Firefox でちゃんと見れるけど Internet Explorer だとデザインが
崩れてるなんて事がしょっちゅうあります。(汗)

今回のも他の方が公開されているブログパーツを自分のブログでも
表示できるようにしてみたんですが、前回テンプレートを変えたら
表示が変になっちゃって~ずーっとあれやこれややってたんですけど、
ちゃんと表示が出来るようになってイライラが解消されて良かったです~。
でも、お友達、凄いですねー。
テンプレを一から作れる人って心から尊敬しちゃいます。
ホントに自分で作れたらいいですよねえ。

フラワーパーク、お花以外にも噴水やら池の鯉やら楽しかったです。
桜は二度咲きの桜のようで春と秋に咲くみたいで~。
本当に春に咲く桜と変わりなくて季節を間違えたかと思うほどでした。