Facebook
RSS Feed
Feb 20, 2012

WordPress初心者講座・Q&A:スライドショーのサイズって変更できますか?

こんなご質問をいただきました。

スライドショーのサイズって変更できますか?

Minimal WPのテーマはトップページにスライドショーを配置したものが多いんですが、
高さを好みの感じに変えたいと言う要望もあるかと思います。

もうちょっと細いのが好きとか、思い切ってアホみたいに長ーくしてやるぜーとか。
幅を変えるのはちょっとめんどくさいんで今回は置いておきますが、
高さを変えるのは割と簡単なので、ぜひ試してみてください。

スライドショー画像の高さを変更する方法(作業時間3分)

サイズの変更はスタイルシートをちょいちょいっといじるだけでOKです。

ダッシュボード > 外観 > テーマ編集 > スタイルシート

スタイルシートの中に以下のような感じの部分が出てくると思います。

/* ************************************************
* スライド
* ************************************************ */

#slide{
width:910px;
height:400px;
margin:0 0 20px 0;
overflow: hidden;
}

見つかりましたか?
いかにもスライドに関することが書いてありそうな予感がしますよね。

height:400px;
よく見るとheightって書いてますよ!これって日本語で高さですよ!
と言う訳なので、この高さを好きな数字に変えるだけでOKです。

あーら簡単。
もちろん、スライドショー用にアップロードする画像も高さを変更しておいてくださいね。
そうじゃないと下の方がただ切れた感じで表示されちゃいますよ。

以上!
 
 
 
と思ったんですけどね、
テーマによっては画像の下に影がついてるやつがあります。
「Tambourine Man」とか。
余計なことしちゃいましたね。影があるだけでカスタマイズのめんどくささ倍増です。
影の正体はここです。

.slide_shadow{
width:910px;
height:420px;
background: url(images/main_bg.png) no-repeat;
}

これの高さもさっき変更した(増減した)のと同じ割合で変更します。
で、さらにmain_bg.pngっていうのをimagesフォルダから探してきて、
同じ割合だけ上部を増減させます。
 
 
例えば高さ400pxのスライドショーを300pxに変更する場合は、

#slide{
width:910px;
height:300px;
margin:0 0 20px 0;
overflow: hidden;
}

.slide_shadow{
width:910px;
height:320px;
background: url(images/main_bg.png) no-repeat;
}

こんな感じで100pxずつ減らして、スライドショー画像も910px×300pxのものに変更。
さらにシャドウ画像も上部を100px切り落とす。と。
なんかめんどくさいですね。

この辺でムキー!ってなった人は、シャドウ消しちゃえばいいかもしれません。

.slide_shadow{
width:910px;
height:420px;
background: url(images/main_bg.png) no-repeat;
}

太字の部分をザックリと削除しちゃいましょう。
これで問題解決。あとは知らん顔しましょう。
 
 
*毎度書いてますが、テーマファイルをいじる場合は必ずバックアップを取ってからね!

Posted in Blog, WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト