[Blogger]人気の投稿ガジェットのスタイルを変更する！・・・その２。サムネイル画像だけの表示にする編。

こんばんは！パズドラ始めてみたら、ちょっとハマり気味で色々危険な感じがする最近・・・すなふ(@sunafu35)です。

先日、ブログの記事にコメントを頂きました。

こんなコメントを頂きました

[Blogger]標準の「人気の投稿」ガジェットのスタイルを自分好みに変更する方法！ - Sunabox

▲こちらの、Blogger標準ガジェットとして用意されている、「人気の投稿」の見た目を変更してみようという記事に頂いたコメント。

▲コメントありがとうございます(｣°□°)｣

さて、コメントでは、見た目の変更で、さらに「記事のタイトル」と、「記事本文の抜粋」部分を表示させないで、サムネイルだけに変更できませんか？という内容。

CSSを使ってなんとかなりそうだったので、挑戦してみました！

人気の投稿ガジェットの「記事タイトル」「記事抜粋」を表示させないようにする方法

CSSのクラス名の確認については、上の記事リンクで確認して頂きたいと思います。
見出しの「CSSの確認」という部分の、Chrome標準機能を使った確認方法です。

それを踏まえて、カスタムCSSにコードを追加していきます。

▲【管理画面>テンプレート>カスタマイズ>アドバンス>CSSを追加】から、カスタムCSSを追加フォームを表示させます。

フォームに、

#PopularPosts1 .item-title{display:none;}
#PopularPosts1 .item-snippet{display:none;}

の2つを追加。

それぞれ、記事タイトルと記事の抜粋部分を、画面上に表示させないという設定です。

『#PopularPosts1』という部分は、もしかしたら人によって変わってきますので、

[blogger]もっと詰めて！サイドバーのガジェット上下の余白を詰めて配置する方法。(04/28追記) - Sunabox

▲こちらを参考に、ご自分の「人気の投稿」ガジェットのクラス名も確認してください。

『#PopularPosts1』の中にある『.item-title』を設定する。という感覚です。


この2つの設定で、

▲このようになりました。サムネイルだけの表示ですね。

さて、このままだと余りに見た目があれなので、サムネイルのサイズを調整したいところですが・・・。ここでちょっと問題が。

▲サムネイル画像のサイズを、サイドバーの幅いっぱいに広げて表示してみようと、

.PopularPosts img {width:300px;height:180px;}

を追加して、幅と高さを大きくしてみます。

▲画像・・・ぼけぼけ(ﾉ_･｡)

これは、「人気の投稿」ガジェットが、サムネイルのサイズを元々は【72px 72px】で拾ってきているところを、無理に拡大させているためにボヤけてしまった・・・という感じのようです。

拾ってくるサムネイルサイズを直接変更する方法が、どうも分かりませんでした・・・。

画像のように、大きなサムネイル画像で縦に並べたい場合は、以前紹介した【複眼RSS】というツールを使うのがいいかもしれません。

[blogger]サイズ自由のサムネイル表示で、ランダムに記事を表示可能なブログパーツ！『複眼RSS』 - Sunabox

▲ここでは、タイトル表示をさせていますが、タイトルをサムネイルの上に重ねたり、表示させない設定もあったはずです。動作が、少し重い時がありますけどね。

そこでこんな提案！

これでは何だか面白くないので、「人気の投稿」ガジェットで、こんなスタイルのサムネイルだけの表示はどうだろう？と思ったので、ご紹介しておきます。

▲今までの方法と同じく、カスタムCSSを使用します。

.PopularPosts img {width:90px;height:90px;}
.PopularPosts .widget-content ul li {float:left;border-top:none;}

「記事タイトル」「記事抜粋」の非表示コードに加えて、この2行を追加。

◆1行目のコードで、「サムネイル画像サイズ」を【90px 90px】に調整。←私のブログでの調整ですので、数値は調整してみてください。

◆2行目のコードで、人気の投稿を表示しているリスト部分を【左詰め】【記事毎の境界線を除去】

こんな感じの事を設定しています。


仕上がりは・・・

▲こんな感じになりました。

記事の表示数を設定して「9件」表示などにすれば、ぴったり収まるし良い感じかも。

▲ブログの設定画面の『レイアウト』から「人気の投稿」ガジェットの設定ができます。


・・・って、あ！！


この設定画面で「記事本文の抜粋」の表示選択ありましたね！失敗した！ｗ

という訳で、一番初めにカスタムCSSに追加した『#PopularPosts1 .item-snippet{display:none;}』は、こちらで設定すれば必要ないと思います(°⌓°)

「記事タイトル」を消して、サムネイルだけにするには、カスタムCSSは必要です。

あとがき

最後の最後で、標準で設定出来る部分に気付かず書いていましたが、今回試したことは、

• 記事タイトル、記事の抜粋を非表示。
• サムネイル画像のサイズを変更して、左詰めに並べる。
• 境界線を消す。

という感じです。


記事の抜粋部分だけ、標準で設定できますので、その部分のCSSコードは、どちらで設定するかで選択してもらえると、記事を書きなおさなくて済みますので、よろしくお願いします（・・；

コメントで頂いた要望に答える形で挑戦してみましたが、いかがでしょうか？

サムネイルのサイズを大きくするということがうまく出来なくて、その点希望とは違ったかもしれませんが、また方法が見つかったらご紹介したいと思います。

それではまた！