[キタジマ タカシ]

下記のトピックを参照してみてください。

適正なメディアファイルのサイズ

タグ: 画像 このトピックには2件の返信、2人の参加者があり、最後にTomokoにより1年、 1ヶ月…

snow-monkey.2inc.org

♥ 0

Who liked: No user

[ベジータ]

【お使いの Snow Monkey のバージョン】17.2.4
【お使いの Snow Monkey Blocks のバージョン】16.0.4
【お使いの Snow Monkey Editor のバージョン】8.0.1
【お使いのブラウザ】Chrome
【当該サイトのURL】https://www.extage-marketing.co.jp/web-school/
### 実現したいこと
添付画像にあるように「カテゴリータブ」を表示させてたいです。

さまざまなテーマで表現されている「カテゴリータブ」を、スノーモンキーでも同様に再現したいです。

### 試したこと
スノーモンキー機能を調査、およびGoogle検索してみたが、解決できない。

[ベジータ]

【お使いの Snow Monkey のバージョン】17.2.4
【お使いの Snow Monkey Blocks のバージョン】16.0.4
【お使いの Snow Monkey Editor のバージョン】8.0.1
【お使いのブラウザ】Chrome
【当該サイトのURL】https://sn-blog.demorecommend.site/
### 実現したいこと
スノーモンキーにおけるサムネイルの推奨サイズを知りたい

### 発生している問題
サムネイル画像を設定しても、推奨サイズでないためか、見切れてしまう

### 試したこと
スノーモンキー機能を調査、およびGoogle検索してみたが、解決できない。

[いとすりょう]

下記のCSSをかけたら消すことができました！

ありがとうございます！

/* フッターの上の線消す */
.l-footer {
  border-top: 0px solid var(--_lighter-color-gray,#eee);
  overflow: hidden;
}

♥ 1

Who liked:

[meg]

オレインさん、お忙しい期間中にも関わらずありがとうございます。
ご提示いただいたコードで、無事やりたいデザインが実現しました！

＞恐らく特別なケースやニーズがあるのだと思うのですが、一般的に考えると「アイキャッチ画像に設定している画像を削除すれば良い」となるかなと思いまして、もしかしたら運用部分でカバーできるものなのかお聞かせいただければと思います。

昔ながらの「細めのヘッダー画像上にページタイトルが重なったデザイン」をクライアント様が希望されたことがベースにあります。

単純に考えると
・CSSで画像の高さを調節
・カスタマイザーで「ヘッダーの上にタイトル」
・デフォルトヘッダーに任意の画像を設定

すれば、上記のデザインは可能です。

ただしそうすると、
・記事一覧でリッチメディアの画像が空白
・ogp画像がない状態

になってしまいます。

上記を満たしたくてアイキャッチを設定すると、当然デフォルトページヘッダー画像で設定した画像はアイキャッチ画像に置き換わってしまい、頭を悩ませていた次第です。

うまく伝わりますでしょうか。

過去にトピックを立てられたかたも、おそらく同様のニーズに基づいて質問されたのだと思います。

カスタマイザーに「デフォルトページヘッダー画像」と「デフォルトアイキャッチ画像」の両方の設定が用意されているのは、逆になぜだろう？とかなり悩んでいました💦

添付画像はやりたかったデザインのイメージです。
テストサイトですが、おかげさまで実現しました。

ご参考まで。

♥ 0

Who liked: No user

[Olein_jp]

ちなみにですが、参照URLにあるソースコードでは任意の画像URLを返さないといけません。ですので、以下のように書くことで指定した画像が強制的に全てのページに適応される形になります。

add_filter(
	'snow_monkey_pre_page_header_image_url',
	function( $url ) {
		$show_image_url = esc_url('[image_path]');
		return $show_image_url;
	}
);

こちらを任意の固定ページや投稿のみに適応する形で分岐を行い、適切に使い分けることで要望を叶えることができるかもしれません。

ご確認ください。

♥ 1

Who liked:

[山崎 大祐]

若干コードに誤りがございました。正しくは以下です。

add_filter(
	'snow_monkey_template_part_render_template-parts/content/share-buttons',
	function( $html ) {
		$html = str_replace(
			'html',
			'html @yamakenkenken より',
			$html
		);
		return $html;
	}
);

♥ 1

Who liked:

[山崎 大祐]

ありがとうございます！

知識不足でした。
ポップアップは、PHP⇒JSで出力されフックでは対応できないと、間違った予想をいたしました。

以下のコードで対応できました。いつもありがとうございます！

add_filter(
	'snow_monkey_template_part_render_template-parts/content/share-buttons',
	function( $html ) {
		$html = str_replace(
			'html',
			'htem @yamakenkenken より',
			$html
		);
		return $html;
	}
);

♥ 1

Who liked:

[キタジマ タカシ]

ファイルを直接変更してしまうと、やはりアップデートのたびに同じ作業をしないといけないというのがしんどいので、フックでなんとかするのが良いと思います。

add_filter(
	'snow_monkey_template_part_render_template-parts/content/share-buttons',
	function( $html ) {
		// ここで書き換えて「@yamakenkenken より」を追加する
		return $html;
	}
);

♥ 0

Who liked: No user

[GONSY]

現在の区切りの設定で傾斜角度を調整できる何か良い方法はありますでしょうか？

「管理画面で簡単に。」というのは手間がかかりそうなので、CSSによる対応方法を試してみました。
いちおう実現可能かと思いますのでご参考にどうぞ。
 
 
該当セクションの右メニューで以下を設定
●背景（固定）
色：単色（任意の色）
テクスチャ：お好みで

●下の仕切り
タイプ：傾斜
レベル：-100（右上がり）

●高度な設定
追加 CSS クラス
more_angle-section
を追加
 
 
カスタマイズの【追加 CSS】やmy-snow-monkey（プラグインを使用している場合）内のCSSに以下を追記。
※数値はお好みに応じて変更してください。

.more_angle-section .smb-section__divider--bottom svg {
	min-height: 200px;
}

.more_angle-section .smb-section__inner {
	padding-bottom: 100px;
}

♥ 2

Who liked:

[Kazu]

esさん　キタジマさん　olein_jpさん

皆様、アドバイスありがとうございました。
無事解決しました。

また、過去記事のチェックが甘いようで大変失礼しました。
下記が今回参考にしたコードです：

.smb-items__item {
  height: 100%;
  padding-bottom: 6px;
}

.smb-items__item__action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

♥ 2

Who liked:

[ゆう]

Oleinさん、キタジマさん

ご確認いただき、ありがとうございます。
RSSフィードにアイキャッチ画像の情報が含まれていなさそうだというのは、私の方でもコードをみて確認はしていたので、そうであればやはり難しいとのことですね。

代替え案としては、PHPなどプログラム的な処理を行って、RSSフィード内の最初に出てきて画像を＞アイキャッチ的に表示するなどということは可能かと思います。

ただその場合はブロックを使って簡単に〜とはいきませんね。

→代替案のご提示、ありがとうございます。ご提案いただいて色々とググってみた結果、プラグインで実現できそうだったので、「Feedzy RSS Feeds Lite」というプラグインを使ってみると思っていたような実装ができました。
アイキャッチ画像ではなく本文中の最初の画像をアイキャッチ的に表示していそうです。

もしそのサービスのアイキャッチ画像の URL がページの URL と連動するようなものであればこちら側でアップデート対応することも可能かもしれません。

→下記お客様の現行のHPのニュースなのですが、みたとことアイキャッチ画像のURLがページのURLと連動するようなものではなさそうでう。

佐久　たるみ　美顔　｜　タルミ専用美顔　LIFTING LAB(リフティング ラボ)

長野県佐久市の「タルミ専用美顔　リフティング　ラボ」は佐久平駅から車で５分、岩村田にある鍼灸マッサージ「大司治療院」併設のタルミ専用美顔のサロンです。美容鍼よ…

tarumi-zero.club

♥ 0

Who liked: No user

[キタジマ タカシ]

下記追加してみてください！

.smb-tabs.is-style-line[data-orientation=horizontal] > .smb-tabs__tabs > .smb-tabs__tab-wrapper:after {
  height: 3px;
}

♥ 0

Who liked: No user

[shone]

＞Olein_jpさん

ありがとうございます！教えていただいたところで見つけられました。

 

＞キタジマさん

アドバイスありがとうございます、フィルタで検索、早速試してみたのですが今回の「border-top」はなぜか見つからず…（どこか要素が選択されていたりすでに追記変更済みのためでしょうか？）

ただ使いこなせばより楽になりそうなので今後も色々試してみようと思います。

♥ 1

Who liked:

[Kazuki]

ありがとうございます！
早速のご対応大変助かりました！

ちなみにですが、CSSで該当箇所の線の太さを変更していたのですが、横スクロールした以降の部分は従来の太さに戻ってしまいました、、
以降の部分も太さを同じ3pxにするにはどうすれば良いか、ご教示いただくことはできますでしょうか？

追加CSSを下記にて共有させていただきます。

/* タブの下線太さ変更 */
.smb-tabs.is-style-line[data-orientation=horizontal]>.smb-tabs__tabs .smb-tabs__tab[aria-selected=true]:after, .smb-tabs.is-style-line[data-orientation=horizontal]>.smb-tabs__tabs:after {
  height: 3px;
}
/* ここまで */

♥ 0

Who liked: No user