クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | | > Blogger の「スライドショーガジェット」の画像表示サイズを大きくする方法

Blogger の「スライドショーガジェット」の画像表示サイズを大きくする方法

サイドバーに画像を表示するガジェットとして、Blogger には「スライドショーガジェット」というのもが存在します。このガジェットを使うと、Picasa ウェブアルバムや Flickr やその他写真を含む フィードを登録することで、簡単にスライドショーを設置することができます。

Blogger のスライドショーガジェット

このブログのサイドバーに、試しにつけてみたのが下の画像。

Blogger のスライドショーガジェット

「小さい!」というのが第一印象なんじゃないでしょうか。ガジェットのタイトル間が妙に空いてしまうのも困りものですね。ガジェットの設定画面で調節できるといいんですが、あいにくこのガジェットの設定画面には、画像の表示サイズを指定する項目がありません。

そこで、今回のブログカスタマイズです。表示される写真を拡大して、最終的にこんな感じになります。

Blogger のスライドショーガジェット

手順

1.ブログの管理画面「テンプレート > HMTL の編集」(旧インターフェースでは「デザイン > HMTL の編集」)を開きます。

2.次のコードをみつけます。(ブラウザの検索機能を使うと便利です。)

]]></b:skin>

3.そのコードの直前に、以下の赤字のコードを挿入します。
.slideshow-container {
  width: 300px !important;
  height: 200px !important;
}

]]></b:skin>

4.「テンプレートを保存」ボタンを押します。

これだけです。

下線部分の値はこのブログ用のものになっています。自分のブログのサイドバーのサイズに合わせて使ってください。width をサイドバーのコンテンツの幅にして、height の方は写真の中で一番多いアスペクト比で指定するのがいいんじゃないでしょうか。

たとえば、うちのブログの場合、サイドバーのコンテンツのサイズは 320px なので、少し余裕を持たせてガジェットの幅(width)は 300px に、写真はほとんどが横縦比 3:2 なので、高さ(height)を 200px に、という風に指定しました。

みなさんも、ぜひいろんなサイズでスライドショーをレイアウトしてみてください。

参考:


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:1

  1. こちらを拝見してスライドショーの画像、
    大きくできました!
    HTMLをいじるのが不安でしたがそのままコピペさせて
    いただき問題なしでした。
    ありがとうございます!

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.