サポート » 使い方全般 » 記事一覧のサムネ画像設定

  • 記事一覧にサムネイル画像を使っているのですが
    元画像の大きさによって高さが変わってしまいます。

    サムネイル画像を一定の大きさに切り抜く方法を教えて下さい。
    URLはこちらです。
    現在の自作テーマで該当しそうなのは以下の部分だと思います。

    functions.php

    // サムネイル画像
    function mythumb( $size ) {
        global $post;
    if( has_post_thumbnail() ) {
        $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), $size );
        $url = $postthumb[0];
        } elseif( preg_match( '/wp-image-(\d+)/s', $post->post_content, $thumbid ) ) {
               $postthumb = wp_get_attachment_image_src( $thumbid[1], $size );
               $url = $postthumb[0];
        } else {
               $url = get_template_directory_uri() . '/966.png';
        }
    
        return $url;
    
    }

    index.php

    <div class="contents">
      <?php if(have_posts()): while(have_posts()):
      the_post(); ?>
      <article <?php post_class( 'gaiyou' ); ?>>
      <a href="<?php the_permalink(); ?>">
    
      <img src="<?php echo mythumb( 'medium' ); ?>" alt="">

    style.css

    /* 概要 */
    .gaiyou a       {display: block;
                     padding: 20px 0;
                     border-bottom: dotted 2px #dddddd;
                     color: #000000;
                     text-decoration: none}
    
    .gaiyou a:hover {background-color: #eeeeee}
    
    .gaiyou a:after {content: "";
                     display: block;
                     clear: both}
    
    .gaiyou img   {float: left;
                   width: 200px}
    
    .gaiyou .text   {float: none;
                     width: auto;
                     margin-left: 230px}
    
    .gaiyou h1      {margin-top: 0;
                     margin-bottom: 10px;
                     font-size: 20px}
    
    .gaiyou p       {margin: 0;
                     font-size: 14px}
    
    .gaiyou .kiji-date  {margin-bottom: 8px}
    
    @media (max-width: 599px) {
        .gaiyou a   {padding: 10px 0}
    
        .gaiyou img {width: 80px}
    
        .gaiyou .text {margin-left: 100px}
    
        .gaiyou h1    {font-size: 16px}
    
        .gaiyou p     {visibility: hidden;
                       height: 0}
    
        .gaiyou .kiji-date   {margin-bottom: 0}
    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • css で高さを規定して、はみ出しを隠す方法もあるでしょう。

    wp_get_attachment_metadataで画像のサイズを取得できます。そこから表示したいサイズや、センタリングするならずらしたり計算して、the_post_thumbnail()のパラメータにstyleを指定する方法でやったことがあります。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「記事一覧のサムネ画像設定」には新たに返信することはできません。