Stinger3カスタマイズ!サムネイルが大きくできないときは.sumboxが原因かも

公開日: : 最終更新日:2014/08/28 Stinger, Wordpress ,

Stinger3カスタマイズ!サムネイルが大きくできないときは.sumboxが原因かも

サムネイル、トップページで記事の横に出てくる画像ですね。
記事の顔になってくる部分なのでカスタマイズしている方も多いのではないでしょうか。

Stingerのサムネイルサイズはデフォルトでは150*150pxになっています。
このサイズ、小さくする場合には簡単なのですが大きくする場合には少し落とし穴があるんです

今回はサムネイルサイズを150*150pxより大きくする際につまづきがちなポイントと対処法をご紹介します。

Sponsored Link


基本の作業

まずは拡大・縮小共通の作業から。
変更するのは「functions.php」と「home.php」です。

Step1 functions.phpの変更

まずfunctions.phpの7行目あたりをみるとこのような記述があると思います。

//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);

ここに自分の設定したいサイズを追記しましょう。

//アイキャッチサムネイル
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,100,true);
add_image_size('thumb110',110,110,true);
add_image_size('好きな名前',横幅,縦幅,切り抜きでよければtrue);

Step2 home.phpの変更

続いてhome.phpも変更していきます。
以下のコードを探してください。

<?php
$title= get_the_title();
the_post_thumbnail(array( 150,150 ),
array( 'alt' =>$title, 'title' => $title)); ?>

この中のarray(150,150)がサイズを表しています。
ここをさきほど設定した名前に変更してください。

<?php
$title= get_the_title();
the_post_thumbnail('さっき決めた名前',
array( 'alt' =>$title, 'title' => $title)); ?>

サムネイルを小さくしたい場合にはここまでで作業は完了です。
例えば50*50pxだとこのようになります。

50*50pxの場合

ここからポイント!

ではいよいよ大きくするときのポイントです。
150*150px以上にする場合にはもう1つ作業が必要になります。

問題の場所

Stingerのサムネイル周りはこのような構造になっています。

.entryの中身

サムネイル画像は.sumboxの中に入っているんですね。
で、問題になってくるのがcssのこのコード。

.entry .sumbox {
	float: left;
	height: 150px;
	width: 150px;
}

そうなんです、外枠の.sumboxが150*150pxに指定されているんです。
これでは大きくならないわけですね。
以下のように修正しましょう。

.entry .sumbox {
	float: left;
	height: さっき決めた縦幅;
	width: さっき決めた横幅;
}

見た目の調整のためにこちらも変更します。

.post .entry .entry-content {
	float: right;
	width: (380-sumboxを大きくした分)px;
	padding-left: 20px;
}

これで作業は完了です!
cssを設定する前とあとを比較するとこのようになります。

css設定前後

あとがき

僕がサイトを作る際つまづいたポイントだったので、記事にしました。
お役に立てば幸いです。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。

jimon


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

Comment

  1. 初心者です より:

    初めまして。
    stinger3のカスタマイズに取り掛かっている初心者です(^^)
    とても分かりやすくて見やすくて読みやすいので参考にさせてもらっています。
    サムネイルの画像がどうしても大きくならずに困っていました!
    そして諦めて放置しておりました(^^;

    再びチャレンジしようと、こちらに書かれている通りに「.sumbox」と「.post .entry .entry-content」を変更してやってみたのですが大きくならず、「何か変更するべき箇所が抜けているのだろうか~??」としばらくスタイルシートを見つめていました(笑)
    少し下の「.entry .sumbox」のheight:150pxとwidth: 150pxを変更してみたところ、画像が大きくなりました。

    それに気付けたのは「問題の場所」で構造を教えていただいたからです。
    本当にありがとうございました。

    これからも記事の更新を楽しみにしております!

    • Jimon より:

      ご報告ありがとうございます。

      記事内のコードを修正致しました。
      ご迷惑をお掛けして申し訳ありません。

      お力になれたようでなによりです^^
      今後もよろしくお願いします^^

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑