WordPressでグリッドを使って写真を並べたい。

CSS
1/*
2GRID
3================================================ */
4.grid {
5    width: 94vw;
6    margin: 0 auto 3vw;
7    display: grid;
8    gap: 2vw;
9    grid-template-columns: repeat(2, 46vw); /* (94 - 2) / 2 */
10    grid-template-rows: repeat(8, 46vw);
11}
12.grid-item {
13    width: 100%;
14    height: 100%;
15    object-fit: cover;
16    object-position: center;
17}
18.grid-big-top {
19    grid-column: 1/2;
20    grid-row: 2/4;
21}
22
23img {
24    width: 100%;
25    height: 240px;
26    object-fit: cover;
27}
28
29/*
30PC
31================================================ */
32@media (min-width: 600px) {
33/* Grid */
34    .grid {
35        width: 80vw;
36        gap: 1vw;
37        grid-template-columns: repeat(3, 26vw); /* (80 - 2) / 3 */
38        grid-template-rows: repeat(5, 26vw);
39    }
40.grid-big-top {
41    grid-column: 3/4;
42    grid-row: 1/3;
43}
44
45```### 前提・実現したいこと
46
47WordPressでグリッドを使って写真を並べたい。
48
49### 発生している問題・エラーメッセージ
50

html上で本を見ながら、グリッドを使って、写真を並べる枠をつくって見たのですが、
WordPressに貼り付けるとうまく機能しません。
使っているテーマはアフィンガー５という有料テーマです。
貼り付けているところは外観＞カスタマイズ＞CSSなので間違えはないと思うのですが。
何かが干渉しているのでしょうか。

始めたばかりの初心者ですが、詳しい方いましたらよろしくお願いします。


### 該当のソースコード

[html]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
        <link rel="stylesheet" href="https://unpkg.com/destyle.css@1.0.5/destyle.css">
        <link href="style.css" rel="stylesheet">
    </head>

	<body>
        <div class="grid">
                <img class="grid-item"
                    src="images/img1-400.jpg"
                    alt="Sainte Chapelle">
                <img class="grid-item"
                    src="images/img2-400.jpg"
                    alt="Fushimi Inari Shrine">
                <img class="grid-item grid-big-top"
				 src="images/img3-400.jpg"
                    alt="The Ocean in Okinawa">
                <img class="grid-item"
                    src="images/img4-400.jpg"
                    alt="Rainbow Colored Ocean">
                <img class="grid-item"
                    src="images/img5-400.jpg"
                    alt="Île de la Cité">
        </div>
    </body>
</html>

試したこと

!important;などで優先度を上げてみましたがダメでした。

補足情報（FW/ツールのバージョンなど）

WordPressでの表示は下記のようになってしまいます。

hatena19

2021/03/15 01:10

どのようになってほしいのか、画像で提示できますか。

Lhankor_Mhy

2021/03/15 04:47

「WordPressに貼り付ける」とは、具体的にはどのような操作ですか？ビジュアルエディタで入力したため、余計な要素が入ってしまっている、ということはないですか？

Lhankor_Mhy

2021/03/15 07:40

hatena19さんの回答へのコメントを拝見しました。やはり、改行を差し込まれているようですね。 HTMLを差し込まないようなコードエディタのモードがあるはずですので、それで個別ページを作成すればいいかと思います。

ovni

2021/03/15 12:28

ご返答ありがとうございます。改行を差し込まないやり方を検索してみたのですがよく分かりませんでした。テキストモードでコピペすれば良いと思っていましたが、何か特別なソフトで行えるのでしょうか？よろしくお願いします。

退会済みユーザー

2021/03/15 23:38

ビジュアルとテキストを切り替えると、それだけで勝手に整形されるんですよね。何度も勝手に挿入される要らないタグに泣かされました。カスタムHTMLというブロックが実装されてから、コードを貼るときはカスタムHTMLを使うようにしています。カスタムHTMLでもダメな場合は回答に追記した方法で解決できるのでは？と考えております。

ovni

2021/03/16 00:29

ご回答ありがとうございます。 WordPress5.4.4を使っているためか、カスタムHTMLが見当たりませんでした。バージョンよって名前が違うのかも知れないので少し探してみます。

ovni

2021/03/22 06:27 編集

wordpressのソースコードというところへペーストしたところ、画像が横並びになったので改行の問題はなくなったと思いますが、CSSが聞いていないのがよく分かりません。。。 ****

退会済みユーザー

2021/03/16 00:43 編集

WordPress4.8から実装されているようなので、通常であればブロックエディタの中にカスタムHTMLというのがあるのですが。ぱっとみただけでは選択肢の中にない場合もあります。回答に画像を足しておきます。

Lhankor_Mhy

2021/03/16 00:50

「CSSが聞いていない」とは、具体的にはどういう現象ですか？

ovni

2021/03/16 00:54

今一度すべてに !importantを入れ直したら、近い形になってきました。しかしなぜか右よりで想定よりも全体的に大きくなってしまいました。あと少しなのですが、どこがわるいのでしょうか。

退会済みユーザー

2021/03/16 00:54

testを拝見させていただきましたが、gridは適用されていますのでCSSは効いてるかと。先ほどは気づきませんでしたが、株式会社様ということで、利益法人だとお見受けいたします。大変申し訳ないのですが、以降のサポートは個人的な理由により致しかねます。利益を出すための活動を無償奉仕にて支えるのはおかしいと感じるからです。出来ないのであれば外注さんへ発注していただけると助かります。

退会済みユーザー

2021/03/16 01:11

26vwを15vwに変更したところ、こちらではgrid全体で920pxほどになりました。右に寄り過ぎるのはgridの大きさが大きすぎるからです。レスポンシブにするのであればそのように記述しないと。アフィンガー側の制御もあるので、本来は無償でやることではないです。テーマですら有料なのにっ

ovni

2021/03/16 01:25

amiya-se様御気分を害してしまい、誠に申し訳ありません。会社正式なサイトは外注しておりますが、このご時世ですので自分でも何か出来ることはないかと思い、特に会社に頼まれたわけではなく、サーバーの使用許可をだけをもらい色々試していました。気分を害されたこと改めてお詫び申し上げます。また個人的に作ることになった際にはご教授ください。

Lhankor_Mhy

2021/03/16 01:33

#content に max-width: 1060px とあるので、vw基準でサイズを指定すると破綻すると思います。パーセンテージにしてはどうですか？

退会済みユーザー

2021/03/16 01:47

> ovni様個人的なスキルアップなんですね～ということであれば、安めのレンタルサーバーを借りてやられる方が良いのかなぁと思います。お金出せないのであれば、一応無料のサーバーもあるみたいですし。 ※おうちにPCが無い場合はごめんなさい。テーマの記述を変えると、サイトが真っ白になることもありますし… 個々のページであればよほど変な書き方をしない限り大丈夫だとは思いますが、万が一があったときに戻せないとかなり困ることになるのでは？ということで、運用されているサイトでの練習はおすすめいたしません。

Lhankor_Mhy

2021/03/16 02:32

または、margin: calc( 50vw - 50% ) などとして、#content をはみ出すようにするやり方も、レイアウト次第ではあるかもしれません。

ovni

2021/03/16 02:36

Lhankor_Mhy様パーセントに変えてみましたが、なぜか全体的に小さくなってしまい高さが低くなってしまったので、いろいろと数字を変更してみましたが、グリッドの水平の空きが狭くなってしったりしてもとの比率のまま縮小とはいきません。正方形のボックスがならび一部縦ラインがくっつくようにしたいのですが・・・パーセントをにしたことで何かを追記する必要があるのでしょうか。聞いてばかりで申し訳ございません。。。

Lhankor_Mhy

2021/03/16 02:40

vw を単純に % に変えてもダメです。単位の意味を理解してください。 100vw は、スクリーンの横幅です。 26vw は、スクリーンの横幅の26%です。 100% は、親要素の横幅です。 26% は、親要素の横幅の26%です。どういうレイアウトにしたいのか、そのためには何を基準にするべきなのか、比率はどうすべきなのか、きちんと考えてください。小手先の修正で上手くいったとしても、次に同じところで失敗します。

行動規範の内容に同意します

回答3件

提示されているコードだけだと、下記のサンプルのようになりますが、これは想定通りのものですか。

CodePenサンプル

もし、そうだとすると、アフィンガー５のCSSが影響しているのでしょう。
下記の対策を試してみてください。

現状のCSSのセレクタの詳細度を上げる。

詳細度 - CSS: カスケーディングスタイルシート | MDN

あるいは、各プロパティに !important を付加してみる。

それでだめなら、検証ツールでどのようなCSSが適用されているか確認して対策を考えることになります。

投稿2021/03/15 01:21

hatena19

総合スコア34073

ovni

2021/03/15 04:21

いただいたサンプル通りになりますが、cssの順番も下の物が優先されるはずだし、当てはるところ全てに!importantをつけてみましたが、ダメでした。デベロッパーツールで見てみると、ベースのグリッドは適用されていますが、写真の位置がおかしな事になってしまいます。それ以外のところは見方もよく分かりませんでした・・・

hatena19

2021/03/15 04:57

有料テーマをインストールしてまで確認はできないので、ワードプレスの該当のページのURLを提示することは可能ですか。可能なら、そのページを検証ツールで確認して原因を特定できるかもしれません。

ovni

2021/03/22 06:27 編集

いろいろとありがとうございます。本番用サイトは提示出来ないので、同じアフィンガーの入っているtestsiteにアップしました。 **** 私の力ではどうにも出来ず、お手数お掛けしますがよろしくお願いします。

行動規範の内容に同意します

###　利益法人様であると気づいたため、これ以降の無償奉仕は行いません。
サポートストップします。
頼むから外注して経済を回してくれっ

追記　問題点は恐らくWPの自動整形による<br>タグの自動付与。
コメント欄にてfunctions.phpへ下記のコードを記述して頂くようにご案内しました。

php
1remove_filter('the_content', 'wpautop');
2remove_filter('the_excerpt', 'wpautop');

####　画像追加　カスタムHTMLの場所
投稿画面で左上のプラスマークをクリック
検索ボックスが出るのでカスタムと入力

以下原因が分かる前の回答

ご提示いただいているコードをローカルで試してみたところ、以下の画像のようになりました。
画像は検証ツールで768px幅で見たものをキャプチャしたものです。

検証ツールでimgにmarginやpaddingが付与されていないかご確認いただけますでしょうか。

以下蛇足。
gridほぼ使わないのでよく使う人来ないかなぁ

投稿2021/03/15 00:36

編集2021/03/16 00:57

退会済みユーザー

総合スコア0

ovni

2021/03/15 04:24

いただいたキャプチャーのようにしたいのですが、imgにpaddingや marginはありませんでした。

退会済みユーザー

2021/03/15 05:21

htmlの中に全角スペースがあったりしませんか？ ※全角スペースもグリッド１個使うようです。あとは、WPなので勝手にpタグを挿入されていないかとか。隙間にhtml要素もしくは全角スペース等が入っていないかご確認いただけますでしょうか。

ovni

2021/03/15 12:35

Lhankor_Mhyさんからのご指摘で、どうやら改行があるみたいですが、WPは目に見えてなくても何かが勝手に入っているものなのでしょうか？テキストエディタで作ったものをコピペで、テキストモードのWordPressに貼り付けましたが、やり方が間違っているのでしょうか？よろしくお願いします。

退会済みユーザー

2021/03/15 23:21

たしかWPには自動整形機能がついているので、勝手にタグを補完してくれたりするんですよね。軽く調べてみたところ、functions.phpに以下の２行を入れると自動整形が止まるようです。 remove_filter('the_content', 'wpautop'); remove_filter('the_excerpt', 'wpautop'); アフィンガー5への影響がどう出るのか分からないため、一度お試しいただいて、他の箇所が崩れてしまうようであれば、お手数ですがお戻しいただけますでしょうか。

行動規範の内容に同意します

自己解決

みなさまいろいろとご教授いただきありがとうございました。
原因としてはwordpress特有の改行と!importantを付けないとCSSが認識しない箇所（この理由は分かりません）があったためだと思われます。
一番の原因は私の知識不足で、みなさんからのコメントや検索したワードの意味を理解するので精一杯でした。。。

写真を並べるだけでここまで苦労するとは思ってもいませんでしたが、
本当にコメントいただけるとは思っていなかったので、それだけでもとてもありがたかったです。

ご協力いただきありがとうございました。
また、機会がありましたらよろしくお願いします。

投稿2021/03/17 00:55

ovni

総合スコア0