Chanchan.

瀬戸内ことりさま

前回は大変お世話になりました。

確かに！です。

その様な柔軟な考えが無かったです。帰宅後、早速やってみます。ありがとうございました。

瀬戸内ことりさま

こんにちは
解決ずみにしているのに、申し訳ございません。まだ目に留まることを祈りながらコメントをさせていただきます。
教えていただきましたコードを元に、数日色々と奮闘してみましたが手詰まりとなってしまったので、もう少し相談に乗っていただけないでしょうか？

・上段は教わったコードを反映させたものです。最初のタイトル「デットクスで~」を文字センター、左右センターを維持したままもっと上位置にしたい。
・ボタンがまた半分の位置で止まってしまった。

・理想は同じものが下段に表示されていると思いますが、そのようにPC表示の時だけ写真を差し替えたいのですが、文言が画像上にならず、上段に表示されてしまう。

/*上段部分のHTML*/
<div class="box_bubble">
    <img class="bub_top-img" src="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg" alt="画像">
    <div class="bub_top-p1">デトックスで始める予防美容<br>プロ用ナノバブルの登場です。</div>
    <div class="bub_top-p2">使うのは閉じ込めた水と空気だけ。</div>
    <div class="bub_top-p3">大切なのは「無害」であるということ。</div>
    <a href="https://eureka.salon/予防美容/" class="bub_top-btn">もっと詳しく</a>
    <video class="bub_top-video" autoplay loop muted playsinline width="100%" controlslist="nodownload nofullscreen noremoteplayback" src="https://eureka.salon/wp-content/uploads/2024/11/EUREKA_marbb-White02.mp4"></video>
</div>

/*下段部分のHTML*/
<div class="box_bubble">
<picture>
<source media="screen and (max-width:480px)" img class="bub_top-img" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg">
    <source media="screen and (min-width:480px) and (max-width:768px)" img class="bub_top-img" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg">
    <source media="screen and (min-width:768px) and (max-width:1024px)" img class="bub_top-img" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg">
    <source media="screen and (min-width:1024px)" img class="bub_top-img" srcset="https://eureka.salon/wp-content/uploads/2024/11/bubble_01-scaled.jpeg">
    <img class="bub_top-img" src="https://eureka.salon/wp-content/uploads/2024/11/bubble_04-scaled.jpeg" alt="画像">
</picture>
    <div class="bub_top-p1">デトックスで始める予防美容<br>プロ用ナノバブルの登場です。</div>
    <div class="bub_top-p2">使うのは閉じ込めた水と空気だけ。</div>
    <div class="bub_top-p3">大切なのは「無害」であるということ。</div>
    <a href="https://eureka.salon/予防美容/" class="bub_top-btn">もっと詳しく</a>
    <video class="bub_top-video" autoplay loop muted playsinline width="100%" controlslist="nodownload nofullscreen noremoteplayback" src="https://eureka.salon/wp-content/uploads/2024/11/EUREKA_marbb-White02.mp4"></video>
</div>

/*行ったCSS*/
@media screen and (min-width: 1024px) /*PC*/ {
  .box_bubble {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto; /* 行を自動調整 */
    height: auto;
    width: 100%;
  }

  .bub_top-img {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    width: 100%;
    height: auto;
    width: 100vw;/*画像幅いっぱい*/
    margin-left: calc(-50vw + 50%);
    max-width: none; 
  }

  .bub_top-p1,
  .bub_top-p2,
  .bub_top-p3 {
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    color: #3d87c3;
    font-size: 3em;
    font-weight: bold;
    text-align: left;
    z-index: 2; /* 文字を前面に表示 */
    align-self: center; /* 縦中央揃え */
    justify-self: center; /* 文字を中央揃え */
    padding: 10px;
    background-color: transparent;
		padding-top: 10px;
  }

  .bub_top-p2 {
    color: #fff;
    font-size: 2em;
padding-top: 200px;
    align-self: center;
justify-self: center;
  }

  .bub_top-p3 {
    color: #fff;
    font-size: 2.5em;
		padding-top: 300px;
    align-self: center;
    justify-self: center;
  }

  /* ボタンのスタイル */
  .box_bubble a {
    grid-column: 1 / -1;
    grid-row: 2 / 3;
    justify-self: center; /* 横中央揃え */
    align-self: center; /* 縦中央揃え */
    font-size: 0.875em;
    font-weight: bold;
    border: solid #000 0.8px;
    padding: 10px 20px;
    color: #000;
    text-decoration: none;
    border-radius: 60px;
    z-index: 3; /* ボタンを前面に表示 */
    background: rgba(255, 255, 255, 0.8);
  }

  .box_bubble a:hover {
    background: rgba(255, 255, 255, 0.3);
  }
  .bub_top-video{
    display: none;
    }
}

大変読みづらいかもしれませんが、どうぞよろしくお願いします。
下に見ていただきたいページを新たに記しました。

https://eureka.salon/トップページpc用の表示テストページ

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

その様な方法でも良いんですね。ぜひ今後の参考にさせていただきます！考えをまとめて改めて質問をさせていただこうと思います。本当にありがとうございました。

Yukinobu Asakawaさま

プラグインも検討したいと思います。

ひとまずは、エラーの出ない部分まで　phpを戻して対応したいと思います。

また相談の際は、懲りずにお付き合いいただければ助かります。

お忙しい中、本当にありがとうございました。

お忙しい中、ご返信ありがとうございます。以前は大変お世話になりました。今回もご教授どうかよろしくお願いします。

ファンクション152の部分   $seo_title = get_post_meta($post->ID,'seo_title',true);

238    $keywords = get_post_meta($post->ID,'keywords',true);
239    $noindex = get_post_meta($post->ID,'noindex',true);
240    $nofollow = get_post_meta($post->ID,'nofollow',true);

152    $seo_title = get_post_meta($post->ID,'seo_title',true);

310    if($description) return esc_html($description);
327    preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $match);

423   <div class="blogcard_excerpt">'. $excerpt .'</div>

表示されるエラーは、以上となります。

こちらのサポートで丁寧に教えていただいたコードになります。

またphpを更新すると、なぜこのようなエラーが発生してしまうのでしょうか？

最後までお付き合いいただけますと大変助かります。

こんにちは、昨日はありがとうございました。

早速教えていただいた関数をfunctions.phpの３２２.３２３にペーストし、ファイル更新したところ

wp-content/themes/beautiplus_child/functions.php ファイルの322行目でエラーが発生したため、PHP コードの変更が適用されませんでした。修正して再度保存してください。syntax error, unexpected ‘$fb_app_id’ (T_VARIABLE)

上記のようなエラーが出てきました。

これは()内にユーザーIDを入れてないからでしょうか？それともそもそも旧twitterだから起きている事でしょうか？

引き続きよろしくお願いします。

すいません、ファンクションphpですね。

// OGP設定
add_action('wp_head', 'ogp_setting_4536');
function ogp_setting_4536() {
$fb_app_id = get_the_author_meta('fb_app_id',$user_ID);
$twitter = get_the_author_meta('twitter',$user_ID);
$no_img = get_template_directory_uri().'/img/4536_logo.png';

その中の

$fb_app_id = get_the_author_meta('fb_app_id',$user_ID);
$twitter = get_the_author_meta('twitter',$user_ID);

部分が322~323にあたります。

こちらで教わったコードだと思います。

• この返信は1日、 22時間前に瀬戸内ことり (Setouchi Kotori)が編集しました。理由: コードブロックを適切に使用

ishitakaさま

いつも教えていただき、ありがとうございます。

おかげさまで出来ました！
この場合は、category_の部分へは、逆に数字を入れてはいけなかったのですね。

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