質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • PHP

    24612questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    9153questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

flexboxで配置した背景サムネイルに記事リンクをつけたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 707

goligo

score 9

前提・実現したいこと

flexboxを使用して、背景画像のサムネイルにアイキャッチ画像を表示させていますが、
このサムネイルに記事リンクをつけようとしたら、うまくいきませんでした。

発生している問題・エラーメッセージ

<article class="loop-article">               
    <a href="<?php the_permalink(); //投稿(固定ページ)のリンクを取得 ?>">   

    <?php
        if(has_post_thumbnail()) {
              $image_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');

        echo '<div class="thumbnail-box" style="background-image:url(<?php echo $image[0]; ?>);"></div>';
         }  
        else {    
        echo '<div class="thumbnail-box" style="background-image:url(' . get_template_directory_uri() . '/images/no-image.png);"></div>';
             }
    ?>           
   </a>
   <div class="text-box">
      <p>あいうえおかきくけこ</p>
   </div>
   </article>

articleにdisplay: flex;を使用しています。a要素をとればサムネイル画像は表示されますが、a要素を入れてしまうとサムネイルは消えてしまいます。(flexboxが機能しません)

sass・compassでは下記のように記述しています。

.loop-article{
              padding-bottom: 40px;
              @include display-flex();

     .thumbnail-box{
               background-position: 50% 50%;
               background-repeat: no-repeat;
               background-size: cover;
               @include align-self(flex-start);
               @include flex-basis(45%);
               margin-right: 25px;
                    &:before{
                            content:'';
                            display: block;
                            padding-top: 60%;
                            @include box-sizing(border-box);
                        }

                    }
                    .text-box{
                       }

                    }
}

補足情報(言語/FW/ツール等のバージョンなど)

今回はじめて、アイキャッチ画像をサムネイルの背景画像として設置したのですが、
サムネイルに記事へのリンクを張れなくて困っています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • othersight

    2017/08/21 12:51

    CSSを見てみないと何とも言えないのですが、上記のHTMLに関連する部分だけでも追記可能でしょうか?

    キャンセル

  • goligo

    2017/08/21 13:15

    該当の箇所をsass・compassで記載したバージョンを追記致しました。

    キャンセル

回答 3

+3

Flex コンテナの直接の子要素が、Flex アイテムとなりますが、それが変わってしまっているため、それ用のCSSを用意しないといけません。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

今回の場合、flex-basis、align-self はFlexアイテムに適用するべきものですので、a要素にも用意してあげてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/21 14:09

    そーでしたか。リンクも貼っていただき、ありがとうございます!
    今回の私のケースだと、あまりflexboxのメリットを活かせないようなので、floatで対応致しました。もっとボックス多い場合や高さを揃えたいときに利用しようと思います。

    キャンセル

+2

全てのarticle要素にa要素が入るならば、
a要素にdisplay: flex;を指定すれば表示されるかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/21 13:18

    可能であれば、サムネイルのところだけ、記事リンクを張りたいと思っております。

    キャンセル

  • 2017/08/21 13:19

    aタグの閉じ位置を見間違えました。
    a要素をブロック要素にしてはいかがでしょうか。

    キャンセル

  • 2017/08/21 13:22

    度々失礼いたします。
    align-selfやflex-basisはflexの子要素に指定するものなので、
    孫要素(子孫要素)には効いてないかと思います。
    .thombnail-boxに明確なサイズを与えてあげないと、
    大きさが計算できていないと思います。

    キャンセル

  • 2017/08/21 13:52

    そーでしたか。それでは間にa要素があると、自分が実現したいことはflexboxだと難しそうですね。
    了解しました。ご回答ありがとうございます!
    今回はflexboxにはせず、floatで対応しようと思います。

    キャンセル

  • 2017/08/21 16:15

    すでにfloatで解決されたようですが、
    a要素をブロック要素にして、x_xさんのご回答のようにflex-basis、align-selfを設定してあげれば、
    flexレイアウトも可能ですよ。
    次の機会に使ってみてくださいね!

    キャンセル

check解決した方法

0

flexboxを使用し、サムネイルの背景として、アイキャッチ画像を設定した場合、サムネイルのみにa要素を付けるのはできなそうなので、flexboxを使用せず、floatで対処しました。

そうすれば、サムネイルは背景画像で表示され、さらにサムネイルのみに記事へのリンクを貼ることができました。

 .loop-article{//clearfix指定
            padding-bottom: 40px;


        .thumbnail-box{
              float: left;
              width: 45%;
              background-position: 50% 50%;
              background-repeat: no-repeat;
              background-size: cover;
              margin-right: 25px;
                     &:before{
                       content:'';
                       display: block;
                       padding-top: 60%;
                       @include box-sizing(border-box);
                        }

         }
         .text-box{
                @include calc( width, '100% - 45% - 25px ');
                float: right;
          }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    24612questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    9153questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。