テーマ『raindrops』のアイキャッチ表示サイズ変更

  • 解決済 j2cklive.jp

    (@j2cklivejp)


    9年、 10ヶ月前

    一昨日、テーマ『raindrops』の使用方法で質問させていただいたものです。
    度々恐縮ですが、もう一件だけアドバイスをお願いしたく思います。

    TOPページの記事一覧で表示される「アイキャッチ画像」のサイズ変更は可能でしょうか？
    現状では長辺50pix程の小さなものに自動縮小されてタイトル横にぽつんと表示されるのみ。アイキャッチ画像のサイズ、「設定」→「メディア」での画像サイズ設定値も反映されません。

    出来れば任意のサイズ（長辺あわせ）で設定したいのですが・・・

    よろしくお願い致します。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • nobita

    (@nobita)

    9年、 10ヶ月前

    もう一件だけアドバイスをお願いしたく

    気にしないで、どんどん質問してください。

    j2cklive.jpさんの疑問は、たぶんみんなの疑問なので、質問する勇気はないけれど、解決したいと思っている人は、たぶんいると思うので、質問大歓迎です。

    「設定」→「メディア」での画像サイズ設定値

    これは、アップロードした画像の大中小それぞれのサイズを決めるものなので、テーマで、直接反映はしない事もあります。

    ところで、どんな風にカスタマイズしたいかによってやり方は異なるので、

    下に、アイキャッチ画像を、ちょっとカスタマイズして変更したもののスクリーンショットを用意したので、どんな感じにしたいか　もう少し詳しく教えていただけますか。

    それと、Raindropsテーマの場合、それぞれの投稿やページ特有のアイキャッチ画像のカスタマイズもできますし、style.cssで全体のアイキャッチ画像の設定を変更することもできるので、そのどちらの方法が希望なのかも書いていただくとうれしいです。

    http://www.tenman.info/wp3/manualraindrops/files/custom-featured-image.jpg

    トピック投稿者 j2cklive.jp

    (@j2cklivejp)

    9年、 10ヶ月前

    親切なご返答、ありがとうございます!

    希望していたスタイルは、「2」の形です。アイキャッチ画像のみ左側に設置して、タイトル・投稿者含む文面は右側におき重ならない。2カラムになっているような状態が理想です。

    これで、アイキャッチ画像の自動縮小表示サイズがある程度任意で設定できればと思います
    （例えばアイキャッチの元サイズが300pix×600pix。それをTOPページでは自動で100pix×2100pix又は75pix×150pix、200pix×400pix等になるよう選択・設定。
    個々の記事上部に表示されるアイキャッチは300pix×600pixのまま　といった具合に）

    「それぞれの投稿やページ特有のアイキャッチ画像のカスタマイズ」というのにも惹かれますが、とりあえずはサイト全体のデザインを統一したいので「style.cssで全体のアイキャッチ画像の設定」をご指導いただきたく思います。

    色々質問させていただいておりますが、現状でも理想に近い形にはなっており『raindrops』、スタッフ様には感謝の気持ちでいっぱいです。複数サイトを製作予定ですので他のテーマも含め今後とも活用させて頂きたく思っております。

    よろしくお願い致します。

    nobita

    (@nobita)

    9年、 10ヶ月前

    まずは、一番シンプルなカスタマイズについて

    ループページのアイキャッチ画像は、デフォルトで　48px48pxですから、大きくした場合には、アイキャッチも大きめにしないとぼやけるので

    functions.phpに、フィルタを追加します。

    add_filter( 'post_thumbnail_size', 'my_post_thumbnail_size' );

function my_post_thumbnail_size( $size ) {

	if ( in_the_loop() && !is_singular() ) {

		return 'large';
	}
	return $size;
}

    続いて、レイアウト崩れを防ぐための基本設定を
    style.cssに書きます

    .h2-thumb{
    display:block;
    margin-bottom:1em;
}

    更に、以下のスタイルを記述します。

    /*-----------------------featured-special basic-----------------------*/
.h2-thumb{
    display:block;
    margin-bottom:1em;
}
/*-----------------------featured-special-large-----------------------*/
.featured-special-large .hentry{
    position:relative;
    min-height:360px;/* 調整してください*/
}
 .featured-special-large .wp-post-image{
    position:absolute; left:0; width:30%; /* アイキャッチ画像幅 */
}

 .featured-special-large #nav-below,
 .featured-special-large .entry-meta-default,
 .featured-special-large .entry-meta,
 .featured-special-large .entry-title,
 .featured-special-large .posted-on,
 .featured-special-large .hentry .entry-content,
 .featured-special-large .posted-in{
    margin-left:33%; /* コンテンツ部分のマージン */
}
/*-----------------------featured-special-medium-----------------------*/
.featured-special-medium .hentry{
    position:relative;
    min-height:220px;/* 調整してください*/
}
.featured-special-medium .wp-post-image{
    position:absolute; left:0; width:20%; /* アイキャッチ画像幅 */
}

 .featured-special-medium #nav-below,
 .featured-special-medium .entry-meta-default,
 .featured-special-medium .entry-meta,
 .featured-special-medium .entry-title,
 .featured-special-medium .posted-on,
 .featured-special-medium .hentry .entry-content,
 .featured-special-medium .posted-in{
    margin-left:24%; /* コンテンツ部分のマージン */
}

    以上の設定を行ったうえで

    header.php line:14

    <body id="<?php echo $raindrops_current_theme_slug; ?>" <?php body_class(); ?>>

    に、以下のように、featured-special-medium や　featured-special-large　を引数として追加すると、サイズの変更が可能になると思います。

    <body id="<?php echo $raindrops_current_theme_slug; ?>" <?php body_class('featured-special-medium'); ?>>

    問題　現行バージョンでは、ウィジェット、カテゴリ毎の最新投稿で画像が、おかしくなると思いますので

    チャイルドテーマ化して、次のバージョンで　以下のフィルタが追加されるので、それで対応してください。(レビュー申請済みです）

    add_filter( ‘raindrops_group_by_category_icon’, ‘__return_false’ );

    レスポンシブ対応の問題も検討すべきと思います。

    Raindropsには、テンプレートでも、投稿内でも使える　レスポンシブグリッドクラスがありますので、それも検討してみてください。

    例

    以下のクラスは、ブレークポイント640pxのレスポンシブクラスになっています

    <div class="line">
<div class="unit size1of2 gradient3">1/2</div>
<div class="unit size1of2 gradient2">1/2</div>
</div>
<div class="line">
<div class="unit size1of2 gradient3">1/2</div>
<div class="unit size1of4 gradient2">1/4</div>
<div class="unit size1of4 gradient1">1/4</div>
</div>
<div class="line">
<div class="unit size1of3 gradient3">1/3</div>
<div class="unit size1of3 gradient2">1/3</div>
<div class="unit size1of3 gradient1">1/3</div>
</div>
<div class="line">
<div class="unit size1of3 gradient3">1/3</div>
<div class="unit size2of3 gradient2">2/3</div>
</div>
<div class="line">
<div class="unit size1of4 gradient3">1/4</div>
<div class="unit size1of4 gradient2">1/4</div>
<div class="unit size1of4 gradient2">1/4</div>
<div class="unit size1of4 gradient2">1/4</div>
</div>
<div class="line">
<div class="unit size1of5 gradient3">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
</div>
<div class="line">
<div class="unit size2of5 gradient3">2/5</div>
<div class="unit size1of5 gradient2">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
</div>
<div class="line">
<div class="unit size3of5 gradient3">3/5</div>
<div class="unit size1of5 gradient2">1/5</div>
<div class="unit size1of5 gradient2">1/5</div>
</div>
<div class="line">
<div class="unit size4of5 gradient3">4/5</div>
<div class="unit size1of5 gradient2">1/5</div>
</div>

    トピック投稿者 j2cklive.jp

    (@j2cklivejp)

    9年、 10ヶ月前

    お礼が遅くなり申し訳ございません。
    詳しい説明ありがとうございます!

    ただ、最初の「functions.phpに、フィルタを追加」の段階でページが完全に表示されなくなってしまいました。（ただ書き込むだけではだめだったんでしょうかね・・。）
    また、それ以降もかなり細かな設定及びレイアウト崩れへの対応が必要な感じですので、とりあえずキャッチ画像の表示はあきらめ ウィジェット等で何とかデザインを構成したいと思います。

    せっかくアドバイスいただけたのに活かせず申し訳ございません。
    とはいえ、テーマ自体はとても気に入っているので、今後とも細部をいじりつつ活用させていただきたく思います!

    ありがとうございました。

    nobita

    (@nobita)

    9年、 9ヶ月前

    ウィジェット等で何とかデザインを構成したいと思います。

    はい、了解しました 🙂

    最初の「functions.phpに、フィルタを追加」の段階でページが完全に表示されなくなってしまいました。

    雑な書き方をして、ごめんなさい。

    functions.php にコードを記述する例を書いておきます

    <?php
/*　ここから　追加部分 */
add_filter( 'post_thumbnail_size', 'my_post_thumbnail_size' );

function my_post_thumbnail_size( $size ) {

	if ( in_the_loop() && !is_singular() ) {

		return 'large';
	}
	return $size;
}
/* ここまで　*/
/* 以降、追加する前に記述されているコード　*/
/**
 * functions and constants for Raindrops theme
 *
 *
 * @package Raindrops
 * @since Raindrops 0.1
 */
if ( !defined( 'ABSPATH' ) ) {

	exit;
}
    トピック投稿者 j2cklive.jp

    (@j2cklivejp)

    9年、 9ヶ月前

    しばらくログインしておらず、お返事いただけていたことに気づきませんでした。
    大変遅くなりましたが丁寧な返答を頂きありがとうございます。

    先ほどテーマ『raindrops』の新しいVer1.275 を確認しました。
    偶然･･･ではないですよね？おかげさまで理想のページが作成できました!
    本当にありがとうございます。

    今後ともよろしくお願い致します。

    nobita

    (@nobita)

    9年、 9ヶ月前

    あっ、

    『raindrops』の新しいVer1.275

    これ、バグがありました。お手数ですが、

    http://www.tenman.info/wp3/raindrops/

    にバグの修正方法を書きましたので、修正の程よろしくお願いします

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「テーマ『raindrops』のアイキャッチ表示サイズ変更」には新たに返信することはできません。

タグ