2012/10/07

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

follow us in feedly
follow us in RSS

こんばんは!パズドラ始めてみたら、ちょっとハマり気味で色々危険な感じがする最近・・・すなふ(@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件」表示などにすれば、ぴったり収まるし良い感じかも。

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


・・・って、あ!!


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

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

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


あとがき


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

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

という感じです。


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

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

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

それではまた!

5 件のコメント:

  1. 早速のご回答ありがとうございます。
    とてもわかりやすく簡単に設置できました。
    感謝の気持ちでいっぱいです。
    これからもいろいろなカスタマイズを紹介してください。

    ありがとうございました

    返信削除
  2. 多少なりともお役に立てたようで良かったです。
    これからもよろしくお願い致しますヽ(´ー`)ノ

    返信削除
  3. はじまして。
    実は路頭に迷いこのサイトにたどり着いたものです。

    ご相談なのですが、現在社内で連絡用にBloggerをメンバーだけのクローズで使用しております。各投稿のコメントでメンバーの閲覧記録として残したいのですが、
    コメント欄に何も入力しないで公開することはできないものでしょうか?
    (未入力ですと空に出来ませんとなります)

    FaceBookのいいね!のようにワンアクションで出来れば理想なのですが
    TOPの投稿にあるコメントリンク→内容入力→公開ですと作業が多く
    なかなか返答してもらえません。もしお分かりになればご教授して頂けると幸いです。突然のコメントより失礼致します。

    返信削除
  4. 初めまして!コメントありがとうございます!

    コメントを読んでから、どうにかなるものかと調べたり、記憶を探ったりしたのですが、コメントを空白のまま公開する方法は、分かりませんでした。
    また、コメントの全文をトップページに表示すれば・・・とも思いましたが、こちらも同じく方法不明。

    お力になれず申し訳ありません。
    しばらく、折を見て方法を探ってみます。

    返信削除
  5. 早速のご回答有難うございます!!
    いろいろと調べて頂いたようですみませんでした。

    私もいろいろと試みたのですがなかなかうまくいきませんでした。
    改めて分かったのですが
    いいねボタンなど共有ボタンなるものは実はすごいのですね。

    有難うございました。




    返信削除

Related Posts Plugin for WordPress, Blogger...