[Olein_jp]

どのようにされたいのか次第ですが、以下の点を吟味された方が良いかもしれませんね。

• <div class="c-entry-summary__content"> の直下に挿入するべきなのかどうか
• なぜ .reserve-link に display: flex しているのか

単純に <div class="c-entry-summary__content"> の閉じタグの後に挿入してスタイリングを行えば良いのではないでしょうか？スタイリングに関する知識が必要な場合は検索するとたくさん出てきます。

♥ 0

いいねをした人: 居ません

[Olein_jp]

毎回入力するものに関してはテンプレ化したい

この「テンプレ化」の定義が全くされていないのでアドバイス差し上げることも難しいです。

♥ 0

いいねをした人: 居ません

[Olein_jp]

実際の状況を確認できるURLを共有してください！

♥ 0

いいねをした人: 居ません

[Olein_jp]

方法としては以下のような流れで実現は可能かと思います。

• カスタム投稿タイプに紐付いているカスタムタクソノミー（ライブ情報）を選択した際にリンク先URLを設定できるカスタムフィールドを用意する
• template-parts/loop/entry-summary/content/content or template-parts/loop/entry-summary/meta/meta 辺りにフックでカスタムフィールドを出力させる

ただし、こちらを実現するために必要な知識としては、

• カスタムフィールドを設定・設置
• PHPにてフックの処理を

となります。ただ、

カスタムフィールドを自分で実装したことがないので、まだよくわからず…

と書かれている状態を推測すると、難易度はかなり高めと考えていただいた方が良いかもしれません。

挑戦される場合には、以下のリソースでいけると思います。

Smart Custom Fields の基本的な使い方 | オレインデザイン – 岐阜県岐阜市のWordPress専門家

多くの方が WordPress でウェブサイトを作る際に、必要に応じてカスタムフィールドを活用して、独自の入力フォームと値を投稿や固定ページ、カスタム投稿に持たせるといっ…

olein-design.com

snow_monkey_template_part_render

テンプレートの部分的な書き換えなどを行う際によく利用します。 実験的にここでは、投稿の詳細ページのタイトル部分…

happy-snow-monkey.olein-design.com

♥ 3

いいねをした人:

[Olein_jp]

個人的にインラインでスタイルを入れる方法で実装した経験がほとんどなく、基本的にフロントとエディター向けにそれぞれCSSファイルを用意するというスタイルで実装しています。

分ける一番の理由は、フロント側とエディター側でスタイルの当てからが変わってくる場合があるからです。例えば、Snow Monkey で言うと、コンテンツエリアのラッパークラスをフロント側では利用することで書きやすくなりますが、エディター側ではそのラッパークラスは不要になるからです。

トピックに掲載されているコードを拝見する限り、エディター向けにCSSファイルを用意されているようですので、こちらを使い分けることでもう少し手軽にブロックスタイルを活用いただけるのかなと感じました。

試しに以下のようにブロックスタイルを追加してみました。そして、コンテンツ部分の見出しスタイルは無効にしています。その場合でも正常に動作しています。

add_action(
	'init',
	function () {
		register_block_style(
			'core/heading',
			[
				'name' => 'sample-block-style',
				'label' => 'サンプルブロックスタイル'
			]
		);
	}
);

editor-style.css にはこのように書いています。

.is-style-sample-block-style {
  padding: 1rem;
  background-color: #000;
  color: white;
}

こちらで正常にフロント/エディターともに表示されることが確認できました。こちらをヒントにエディター側のスタイルの書き方を工夫されるとスムーズに実装できそうな気がします。

ご参考にどうぞ。

♥ 0

いいねをした人: 居ません

[Olein_jp]

ブロックスタイル自体も反映されているようですので、CSSの詳細度の問題なのかなと思われます。エディターのラッパークラス（名前忘れてしまいました）を併用した書き方を併記してはどうでしょうか？（未検証ですが）

.editor-wrapper-class-name .is-style-side-line,
.is-style-side-line {
  border-left: solid 10px red;
  padding-left: 15px;
}

♥ 0

いいねをした人: 居ません

[Olein_jp]

素直に Contact Form 7 を使った方が早いのではないでしょうか？

Snow Monkey Forms を使わないといけない理由があるのでしょうか？

♥ 1

いいねをした人:

[Olein_jp]

これ難しい問題だなぁと思っていて、それをすることでどんな画像でも全幅でいけるんですけど、逆に解像度気にしない問題も発生しそうだなーと思うところですね…むずかしや…

♥ 2

いいねをした人:

[Olein_jp]

拝見しましたが、スライダーに設定されている画像自体が小さいのではないでしょうか？拝見したところ、幅1000pxでした。

「全幅表示させたい」の全幅の最大値をどれくらいに定めるかにもよりますが、それよりも大きい幅の画像を設定してみて動作を確認してみてください。

♥ 3

いいねをした人:

[Olein_jp]

該当ページにて、右にサイドバーが表示されるテンプレート（でウィジェットを登録されていない状態等）を選択しているということはありませんか？

該当ページなどを共有できない場合は、スクリーンショットなどを併記されると解決が早いかと思います。

♥ 1

いいねをした人:

[Olein_jp]

Snow Monkey だけで完結しようとするならば、セクションブロックのパララックス機能を利用して実現可能な範囲で〜となるのかなと思います。が、この機能は現在非推奨となっているので、そのあたりは理解の上でとなるかと思います。

あとは、何か別にブロックを用意して活用するというのはあると思います。あとは自前でコードを書くか、ですね。参照サイトのように〜というのであれば、実現するだけであればコードを書いた方が早そうかなとも思いました。（実現できるプラグインのセットを検証するのが大変そうっていう意味です）

♥ 3

いいねをした人:

[Olein_jp]

過去トピックの存在をあさらず配信ネタのために実験してしまったのでソースコードだけ置いておきます。供養させてください…。。

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'vagas_css',
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css'
		);

		wp_enqueue_script(
			'vagas_js',
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js',
			['jquery'],
			null,
			true
		);

		wp_enqueue_script(
			'vagas_function',
			MY_SNOW_MONKEY_URL . '/js/main.js',
			['jquery'],
			filemtime( MY_SNOW_MONKEY_PATH . '/js/main.js' ),
			true
		);
	}
);

Vegas Background Slider を利用するために必要なソースコード（ js/main.js 含む）となりますので、別途スタイルなどは読み込んでくださいね。

ちなみに実験がてら書いた main.js のコードも供養させてください。

jQuery(function($){
  $(".vegas-background-demo").vegas({
    slides: [
      { src: "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" },
      { src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" },
      { src: "https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1642&q=80" },
      { src: "https://images.unsplash.com/photo-1604537466573-5e94508fd243?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" }
    ]
  });
});

任意のセレクタを指定してあげれば実験にでも使えるかもしれません。画像はUnsplashに直リンクしているのでよろしくはないです。

以上、よかったら参考にしてみてください。（過去トピックあるかどうか先に探せばよかった…

♥ 4

いいねをした人:

[Olein_jp]

両端にパディングが発生して余白が出来ることは仕様ですね。なので、そういったものという事です。

ですので、理想の形にされたい場合には、追加でCSSを書かれたりしてカスタマイズする必要がありますね。

♥ 1

いいねをした人:

[Olein_jp]

例えば仮に、カスタマイザー→デザイン→フッターにて、レイアウトはデフォルト、１カラム、全幅にチェックを入れます。

そして、以下のようなコードをウィジェットエリアにカスタムHTMLブロックを利用して設置します。

<div class="”navlink”">

<p>Tristique neque augue fermentum porta egestas ultricies blandit litora, ligula dignissim inceptos fusce conubia proin mus, laoreet hac a felis integer ad volutpat. Platea sociosqu nulla risus fermentum leo magnis nostra varius dictumst inceptos, augue montes fusce tellus turpis integer tristique nullam dignissim. Tortor auctor accumsan nulla fringilla sagittis est phasellus, aliquam venenatis cursus interdum sem dolor parturient, augue suspendisse posuere sapien ligula himenaeos.</p>

</div>

その場合、以下のような表示になるかと思います。

サンプルの英文がずらーっと表示されていることが画像から確認していただけるかと思います。

試しに画像だからダメなのかと思い、テキストブロックに「あいうえお」と日本語で書いて保存してみましたが、やはり余白が空きました。

ここで言われている「余白」というのは、画像の両橋の黄緑色の部分のようなことを言ってみえるのでしょうか？もう少し詳細をお教えいただけますと助かります。

♥ 1

いいねをした人:

[Olein_jp]

まずは方法ですが、スクロールでメニューバーが切り替わる形だと、常設のメニューと追従のメニューそれぞれの見栄えを統一しないといけなくなります。

それはちょっと大変な作業になるので、ヘッダーを上部固定系に設定し、そちらで設定を進めるという方法もあるかと思います。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿