フォーラムへの返信

13件の返信を表示中 - 1 - 13件目 (全13件中)
  • フォーラム: 使い方全般
    返信が含まれるトピック: “wp-image-” のないimgタグで起こりえる問題は?
    トピック投稿者 makotos1112

    (@makotos1112)

    ご回答ありがとうございました。
    色々と試してみます。

    フォーラム: 使い方全般
    返信が含まれるトピック: “wp-image-” のないimgタグで起こりえる問題は?
    トピック投稿者 makotos1112

    (@makotos1112)

    回答ありがとうございます。
    グーグルサーチコンソールでCLS警告が発生しており、ご回答頂いた内容がまさに知りたいことでした。

    その原因が上記のクラスの有無である影響があるか気になった次第で質問したのですが、“wp-image-xxxxx”がなくともwidth,heightはタグに記載がありますので、CLS警告に関するの根本の問題は、Lazyloadによってレイアウト全体がずれながら表示されること、である可能性について理解ができました。

    質問が脱線してしまいますが、CLSの発生を回避する有効は方法はありますでしょうか?
    思いついたのはimgが収まっているdivにheightを明記しておけばレイアウトのズレはなくなり、評価が改善につながるんでしょうか?

    トピック投稿者 makotos1112

    (@makotos1112)

    御両名とも回答頂き大変助かりました。
    WPの知識が深まりました。

    トピック投稿者 makotos1112

    (@makotos1112)

    ありがとうございます、上記のコードを反映させた後、ショートコードの仕組みが理解できました。
    これなら画像名から事前にマークアップできそうです。

    Chromeなどの検証で表示されるDOMも最終的にこのようなショートコードが展開されて表示されるわけですね。色々と理解が深まりました。

    最後に1つ、追加で質問させて頂きたいのですが、
    同じギャラリーを作成するとして、
    ・投稿にショートコードを用いて表示させる場合と、
    ・ショートコードを用いずに純粋なマークアップだけで作成する場合
    とで、ブラウザでの表示速度や、その他、違いが生じる部分はありますでしょうか?

    トピック投稿者 makotos1112

    (@makotos1112)

    回答ありがとうございます。

    なるほど、ショートコードの実態を表示させる方法があるということですね。
    上記のコードはどこに設置させてどのように反映させるものでしょうか?
    function.phpに記述させれば良いですか?

    トピック投稿者 makotos1112

    (@makotos1112)

    回答ありがとうございます。質問が分かりづらく申し訳ありません。
    おっしゃるように、確かに画像単体のURLであればファイル名称を元に、事前にマークアップしておくことはできます。
    そうではなく、私がやりたいのはギャラリーを事前にマークアップしておく方法です。

    もう少し具体的に状況をお話します。
    フォルダにある aaa.jpg, bbb.jpg, ccc.jpg という3つの画像について、
    ・各画像単体で表示させる
    ・ギャラリーとして表示させる
    の2つをやりたかったとします。

    最初の単体で表示させる分にはご回答の通り、
    アップロードする前から各画像のタグは分かりますので、
    事前に3つの画像のマークアップは可能ですでに実現できています。

    問題は2つ目のギャラリーとして表示させる場合で、
    ギャラリーに使用される画像のIDは画像アップ後に割り振られる(と理解しています)ため、
    例えば上の3つが順番に格納されたギャラリーを事前にマークアップしておきたくても、

    [gallery link="file" columns="4" size="large" ids="???,???,???]

    における???はアップしてから初めて分かるものなので、事前にマークアップを済ませておくことができません。

    私の質問はご理解頂けましたでしょうか?
    ギャラリーの仕様について私は上記の様に理解しています。
    個人的な予想ですが、画像アップ後にidが割り当てられる以上、事前にマークアップを済ませておくことは
    不可能ではないかな?と考えており、それを確かめるために質問させて頂いております。

    もしも、事前にギャラリーのマークアップができる方法があれば
    具体的なコードの例を示していただけると大変ありがたいです。

    トピック投稿者 makotos1112

    (@makotos1112)

    自己解決できたのでクローズします。
    <div>自体をクローン要素として取得するのではなく、厳密にをコピーして複製することで安定して出力できるようになりました。

    トピック投稿者 makotos1112

    (@makotos1112)

    $(window).on(‘load’, function(){
     var content_area = window.document.getElementById(“content_area”);
    var contentsNode = window.document.getElementById(‘appendclone’);
     var newNode = content_area.cloneNode(true);
    newNode.id = “content_area2”;
    contentsNode.appendChild(newNode);
    });

    ウェブページを参考に、$(window).on(‘load’, function(){ });
    で処理を囲ってみました。結果、スマホでクローン先(appendclone)の画像が見えたり見えなかったりします。PCの結果は正常です。

    まだ画像の出力が不安定なため、安定して出力できるようアドバイスをお願いします。

    トピック投稿者 makotos1112

    (@makotos1112)

    ありがとうございます。ネットでCSVでまとめてインポートするプラグインを見つけました。
    こちらで試してみます。

    フォーラム: 使い方全般
    返信が含まれるトピック: ギャラリー画像に個別にスタイルを付けたい
    トピック投稿者 makotos1112

    (@makotos1112)

    今度こそ自己解決できました。

    #gallery-1 dl:nth-of-type(1) img {
    border:5px solid #896541;
    border-radius:5px;
    }
    #gallery-1 dl:nth-of-type(3) img{
    border:5px solid red;
    border-radius:2px;
    }
    /* borderの太さを高さと幅に含める */
    .wp-block-gallery img {box-sizing: border-box;}

    5枚目から1つずつ要素がずれてしまったのは、4カラムにしているせいで
    <dl>・・・</dl>
    <dl>・・・</dl>
    <dl>・・・</dl>
    <dl>・・・</dl>
    <br style=”clear: both”> >>この要素をカウントしているからでした。

    nth-child を nth-of-type に書き換える事で指定の要素のみをカウントできるようになり、
    任意の画像にスタイルを付ける事が出来ました。

    フォーラム: 使い方全般
    返信が含まれるトピック: ギャラリー画像に個別にスタイルを付けたい
    トピック投稿者 makotos1112

    (@makotos1112)

    上記のスタイルで解決したかと思いましたが、別の問題が発生しました。
    指定した番号と違う画像に枠がついてしまいます。

    ギャラリーの1から4番目には指定通り付きますが、5番目の画像には枠が付きません。
    おそらくこれはカラム数に影響を受けているようです。

    ギャラリーを作り直してみても、症状は同じで、スタイルの根本的な記述を改めないといけないような気がします。

    どのように記述すればよいかアドバイスお願いいたします。

    フォーラム: 使い方全般
    返信が含まれるトピック: ギャラリー画像に個別にスタイルを付けたい
    トピック投稿者 makotos1112

    (@makotos1112)

    画像にのみボーダーを付ける事が出来ました。
    上記の記述にimgを追記することでいけました。
    回答頂き大変助かりました。

    #gallery-1 dl:nth-child(1) img {
    border:5px solid #896541;
    border-radius:5px;
    }
    #gallery-1 dl:nth-child(3) img{
    border:5px solid red;
    border-radius:2px;
    }
    /* borderの太さを高さと幅に含める */
    .wp-block-gallery img {box-sizing: border-box;}

    フォーラム: 使い方全般
    返信が含まれるトピック: ギャラリー画像に個別にスタイルを付けたい
    トピック投稿者 makotos1112

    (@makotos1112)

    回答ありがとうございます。

    しかしながら、投稿ページのカスタムCSSフィールドに貼り付けてみても、style.cssに貼り付けてみてもギャラリーの画像には反映されていません。

    使い方は合っていますでしょうか?フォロー頂ければ幸いです。
    ブラウザはgoogleを使用しています。

    なお、下記の様にカスタムフィールドに記述したところ、理想の形ではありませんが、個別に指定できることは確認しました。デベロッパツールでギャラリのID名がgallery-1であったため、そこから下位の要素を指定できないかと試した結果です。しかしながら、画像だけでなくdlタグ全体にボーダーがついてしまいました。

    #gallery-1 dl:nth-child(1) {
    border:5px solid #896541;
    border-radius:5px;
    }
    #gallery-1 dl:nth-child(3) {
    border:5px solid red;
    border-radius:2px;
    }
    /* borderの太さを高さと幅に含める */
    .wp-block-gallery img {box-sizing: border-box;}

13件の返信を表示中 - 1 - 13件目 (全13件中)