スライドショーのサイズ変更
-
-
-
早速のアドバイスありがとうございます。
「大サイズ」を1024×1024と最大にしていますが、このように大きくなりません。
http://fujisawaphotoclub.wordpress.com/2011/09/22/%E5%A4%A7%E9%9B%AA%E5%B1%B1%E3%81%AE%E7%B4%85%E8%91%89/
[sildeshow]のHTMLにwとhを設定できないのでしょうか？
-
[sildeshow]のHTMLにwとhを設定できないのでしょうか？
できないようです。
（参照：Slideshows — Support — WordPress.com）CSSの方を確認してみたところ、410pxの高さ制限がかかっています。
カスタムデザインにアップグレードし、以下のCSSを追加するとデモのような感じになります。
#gallery-1-slideshow .slideshow-slide img { max-height:610px!important; } .slideshow-window { height:610px!important; }デモ：スライドショー « WordPress.com Theme Demo Site（作業用ですので、しばらくすると他のテーマに入れ替わります。）
-
デモサイトを拝見しました。これなら問題ありませんね。
でも、「カスタムデザインにアップグレードし、以下のCSSを追加する」には抵抗を
感じます。それほどの知識がないからです。「slide」と比べてWPのスライドの画質がよくないことも気になっています。
いろいろと教えていただきありがとうございました。
-
追伸
「slide」のサービスは停止されていました。今までのスライドは動いているようですが、何時まで続くか分かりません。
となると、asazuki50さんの指示にしたがって、アップグレードを考える必要があります。しばらく考えます。 -
カスタムデザインについては、それぞれに事情があると思いますので、あくまで、手段のひとつとしてご検討下さい。
「Slide」というサービスだと画面いっぱいにスライドショーが表示されていたのですね。初めて知りました。迫力がありますね。新しく作成することができなくなったのは残念です。
テーマ「Twenty Eleven」でも似たようなレイアウトが実現できるので、ちょっと試してみましたが、写真がいまひとつ小さいように感じます。
デモ：スライドショー | Twenty Eleven（デモ用ですので、しばらくするとレイアウトや色が変更されるかもしれません。）私の方でも他に方法がないか、しばらく考えてみます。
-
-
「slide」の情報ありがとうございます。
「slide」はGoogleに買収されていたことは始めて知りました。ただ、ダボス会議でのMax Levchin氏の発言などを聞いて、まだ若い方ですが実力をもっていると感じていました。だから、きっと何か新しいことを始めると思います。
しかし、Googleは「slide」のアプリをどうするのでしょうね。Googleブログに使うのでしょうか。このまま消滅させるにはもったいないアプリだと思います。めぐるましく動くネット社会には少々滅入っています。
-
「Slide」はバージョンアップしてまた復活するといいですね。あんなふうにスライドショーを大画面表示できることは知りませんでした。
いろんなサービスがあるので使いこなすのがなかなかたいへんですね。新しいことを次々と覚えるのはたいへんなので、使うツールを絞り込みたいところですが、今回のようなこともあるのでなかなか難しいところですね。
あと、スライドショーを画面いっぱいに表示する方法についてですが、テーマ「Modularity Lite」や「Pilcrow」でも背景黒で１カラムのレイアウトにできるので確かめてみたのですが、どうやら、テーマの種類如何にかかわらずWordPress.comのスライドショーのサイズ自体が画面いっぱいに表示されない仕様になっている、ということのようです。
あと考えられう方法としては、flash作成サービスでスライドショーを作成し、web上のflashストレージへ保管し、gigyaのショートコードで貼り付ける、という方法がありますが、以前やった記憶だと、表示がかなり重くなりましたので、おすすめしません。
そういうわけで、画面いっぱいにスライドショーが表示されるタイプのテーマがリリースされるのを待つか、カスタムデザインにアップグレードして修正するか、といったところではないでしょうか。
-
あと、もうひとつ代案としては、テーマ「Nishita」のままで、スライドショー用の画像を別途作成するという方法が考えられます。
画像は、横：縦が 73：41 になるようにトリミング（切り抜き）加工します。
するとこのような感じになります。
デモ：スライドショー « Nishita（デモ用ですので、しばらくするとレイアウトや色が変更されるかもしれません。）画像単体よりもスライドショーの方がひとまわり小さくなりますが、統一感は増すように思います。
トリミング処理はWordPress.comの画像処理機能でも可能ですが、多くの画像を一括処理したいときには、PhotoScapeの一括編集機能を使うと便利です。
考えながらの回答で冗長になってしまいました。改めて整理しますと、
①画面いっぱいにスライドショーが表示されるタイプのテーマがリリースされるのを待つ。
②カスタムデザインにアップグレードして修正する。
③横：縦が 73：41 になるようにトリミング加工してからスライドショーを作成する。の３つの方法を提案します（順不同）。長くなりましたが以上です。
-
いろいろお世話をおかけします。
「横：縦が 73：41 になるようにトリミング加工してからスライドショーを作成する」
をテストしました。いま掲載していますので、見ていただけますでしょうか。これならば、満足できるクオリティです。トリミングはGIMPで簡単にできます。
横長の画像はこれで処理して実験をしてみます。縦長については省略することになるのでしょうか。本当にありがとうございました。
アップグレードも考えています。コードは分かるのですが、どこに入れるかに自信がありません。教えていただけるのでしょうか？
-
おはようございます。
今、拝見しました。統一感が出て、とても良い感じではないでしょうか。僭越ながら。GIMPでもトリミングできるのですか。知りませんでした。
ブログ全体の統一感の方を優先させたいのであれば、縦長の画像については、というよりも、縦長・横長織りまぜてのスライドショーの使用は控えたほうがいいのではないかと個人的には思います。
アップグレードして縦方向の寸法制限を解除してやれば、縦長の画像が極端に小さくなることはなくなると思うので、縦長・横長織りまぜてもそれなりに良い感じになるような気がします。
コード（CSS）を入れる場所については、Firefoxの「firebug」というアドオンを使えば簡単にわかります。この記事を読めば、どういうものか何となくわかってもらえると思います。
意外と知られていない機能が多い！？Firebugの使い方 | THE HAM MEDIA BLOGコードを入れる場所がわからないときは、このフォーラムで質問して頂ければ、答えられる範囲でお答えます。ただし、申し訳ありませんが、人工衛星の破片が私にぶつかったりしたときには他の方に委ねることになります（笑）
-
縦長も入れて試してみました。おっしゃる通り統一感に欠けますね。
ご意見大変役立ちました。「firebug」についてはこれから試してみます。
それにしても朝4時とは早いですね。朝２時に目さめてテストをして
二度寝をしていま起きたところです。なにとぞ今後もよろしくお願いします。
-
追伸
「firebug」でCSSを表示させました。画像表示のコードはこれだと思うのですが、
先だって教えていただいたコードとは違っています。これ以上のことはさっぱり分かりません。よろしくお願いします。.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail, .photo-inner img, .page-body img {
height: auto;
max-width: 100%;
}
.wp-smiley {
display: inline;
}
.gallery-item {
margin-top: 0 !important;
}
.gallery-item img {
border: 2px solid #F2F2F2 !important;
height: auto;
max-width: 150px;
padding: 2px;
}
.gallery-caption {
font-size: 10px;
text-transform: uppercase;
}
.entry-attachment img {
display: block;
margin: 0 auto 18px;
} -
いろんなツールを使っている中で「Firebug」は長年愛用しているものです。是非お試し下さい。
私もそろそろ二度寝しようと思います。寝不足です。
こちらこそ今後もよろしくおねがいします。 -
「firebug」にはCSSを表示させる機能もありますが、firebugに表示されているCSSの数値をいじって、どのようにブログの表示が変化するのかをリアルタイムに確認することもできます。
上記で提案したCSSの修正案はそうやって見つけたものです。idやclassをひとつひとつチェックしているわけではなく、該当部にマウスをあてると対応したHTMLがハイライトされ、右側にCSSが表示されます。それらの数値をいろいろといじっていると（今回の場合ですと、「height」か「max-height」を探し出し、その数値を変更してみます。）、スライドショーの画像の大きさが変化するところを見つけることができます。あとは、それをコピー＆ペーストし、適宜、!importantやid,classを追加して、CSSの優先順位を上げてやれば完成です。
そうやって見付け出したのが、
#gallery-1-slideshow .slideshow-slide img { max-height:610px!important; }.slideshow-window { height:610px!important; }の部分は、ソーシャルボタンなどがスライドショーと重ならないようにするための修正です。
いずれにしても、カスタムデザインを効果的に利用するためには、firebug等を使って、リアルタイムにCSSを修正する要領をつかむことが肝要かと思います。このあたりの要領をつかめば、あとは早いと思います。
-
あと、念のために補足しておきますと、カスタムデザインというのは、変更部分のCSSだけを追加するとその部分だけを上書きしてくれます。ですので、例えば、私が提案したCSSをそのままカスタムデザインの編集画面に貼り付けるだけでOKです。
- トピック「スライドショーのサイズ変更」には新しい返信をつけることはできません。
WordPress.com 日本語フォーラム 