[Olein_jp]

こちらはプラグインといえばプラグインなのですが、WordPressのプラグインではないですね。

こちらを指されているという前提でお話をしますと、こちらSwiper本体を利用してSnow Monkey内に実装しようとするならば、カスタムHTMLブロック内でゴニョゴニョとコードを書くしかないかなと思います。

ただ、上記カスタムHTMLブロックだけでは推奨する形でCSSやJavaScriptを読み込むことができなくなるので、結果的にあまりお勧めしたい方法ではなくなってしまいます。

また、コードを書かれず実現したいという場合には、プラグインを活用する方法がベターだと思いますので、ウェブ検索などで「wordpress slider draggable plugin」といった形で検索をしてみて、色々なプラグインを片っ端から試してみることもお勧めします。

もうちょっと良いアイデアをお持ちの方がみえるかもしれませんが、いただきました情報から考えるとこのようなお返事になるかと思います。

よろしければ参考になさってください。

♥ 0

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

[Olein_jp]

swiperというプラグインがあるのはわかったのですが、これをSnowMonkeyに導入

するための方法がわからないです。

ここで言われているプラグインのURLもしくは正式名称をお教えいただいてもよろしいでしょうか？

また、ご自身でコードを書ける場合は、以下のリンクとSwiper公式ドキュメントを参照しながら、ショートコードなどで出力できる形にして、ページに設置する形がスムーズかもしれませんね。

スライダープラグイン Swiper（v5）の使い方 / Web Design Leaves

jQuery 不要でレスポンシブ及びタッチデバイス（スマホやタブレット）対応のスライダープラグイン Swiper（バージョン5）の基本的な設定方法や使い方についての覚書（解説…

www.webdesignleaves.com

♥ 1

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

[Olein_jp]

@アクツ さん
ドンピシャでかぶった…ww

♥ 0

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

[Olein_jp]

現在のバージョン以前はちょっとわからないのですが、こちらは項目にフォーカスが当たった状態に出るものです。

現在もinputなどのフォーム入力部分をテキスト入力をしようと選択すると、フォーム部分に青く細い罫線が表示されると思いますが、そちらと同じ用途のものです。

ご存知かと思いますが、こちらは様々な方法（スクリーンリーダーやキーボードのみ）でアクセスされる方々に向けたアクセシビリティ確保のための手段で、ブラウザの機能になります。（なのでバグではないと思われます）

div.wp-block-snow-monkey-forms-item に　tabindex が付いているのでこうなるのですが、確かにはっきりと罫線が見えるので気にはなりますよね…。CSS的な処理で消すこともできますが、アクセシビリティ的な観点からこのような方法を採用している可能性もあるため、@キタジマさんのご意見も伺った方がよさそうです。

♥ 0

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

[Olein_jp]

プラグインからのアプローチもあるとは思うのですが、

フロントページを固定ページにした際の最近の投稿の日付をタイトルの上に設定したい

だけを実現するとすれば、CSSだけで実現できると思います。

.c-entry-summary__body は display: flex; が設定されているのですが、その中には、

• .c-entry-summary__header
• .c-entry-summary__content
• .c-entry-summary__meta

と上から単純にレイアウトされています。

固定ページをフロントページとして、そこに最新の投稿ブロックなどで記事の一覧を用意されているとするならば、そのブロックにCSSクラスを任意で設置して（以下、.top-recent-posts とする）、

.top-recent-posts .c-entry-summary__meta {
  order: 0;
}

.top-recent-posts .c-entry-summary__header {
  order: 1;
}

.top-recent-posts .c-entry-summary__content {
  order: 2;
}

とすると、上から日付等メタ情報→ヘッダー→コンテンツ という並びに変更できるかと思います。あとは上下マージンなどを調整するだけで大丈夫かと思います。

プラグインアプローチについては…強強なユーザーを待ちましょう…！！

♥ 2

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

[Olein_jp]

@mayu さん

僕の確認不足で間違った誘導をしてしまいました。申し訳ございませんでした。

@キタジマタカシ 氏

こちらでテストした結果ですが、カスタマイザー内「お知らせ」にて、

• お知らせバーコンテンツ：<a href="https://youtube.com" target="_blank">Youtube <i class="fab fa-youtube"></i></a>
• お知らせバーリンク URL：空白

という状態でフロント側を確認したら、出力されているソースが、

<div class="p-infobar">
	<span class="p-infobar__inner">
		<div class="c-container">
			<div class="p-infobar__content">
				<a href="https://youtube.com">Youtube <i class="fab fa-youtube"></i></a>
			</div>
		</div>
	</span>
</div>

という形になっているので、targetが内部で消えてしまっているのかな…と思われます…。

♥ 1

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

[Olein_jp]

本件はSnow Monkeyとは関連性のないHTMLの記述方法についての質問になるかと思いますので、ご自身で頑張って調べていただくと良いかと思います。

参照リンクを掲載しておきますね。

<a>: アンカー要素 – HTML: HyperText Markup Language | MDN

HTML の <a> 要素 (アンカー要素) は、 href 属性を用いて、別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成…

developer.mozilla.org

♥ 0

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

[Olein_jp]

ブラウザの開発者ツールで任意の画像のソース部分を見ていただくとわかりますが、画像が150px x 150pxのサムネイルサイズのものが適応されています。

要するに、小さい画像が大きく拡大されて表示させられているので、一覧部分のアイキャッチ画像が荒く見えるという結果になっていますね。

どのようなカスタマイズや設定変更などをされているのかわからないので、これ以上アドバイスができませんが、記事一覧ページのサムネイル画像のサイズに問題があるということなので、そこから逆算して色々と試してみてください。

♥ 0

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

[Olein_jp]

横から失礼します。

他に挙げられているトピックも拝見しているのですが、Web制作全般とまでは言いませんが、ことCSSに関してWordPressもしくはSnow Monkeyをカスタマイズするための前提知識が少々足りていないような気がします。

このフォーラムはSnow MonkeyユーザーがSnow Monkeyに関するプロダクト（関連プラグインも含む）について、他のユーザーに意見を求める場所ですので、基本的なWeb制作方法のレクチャーをもらう場所ではない、という認識を僕は持っています。

（このトピックを拝見する限り、Snow Monkeyに関する問題ではなく、ブロックエディタとCSSの問題と感じました）

keiproさんは、もしかしたら現在学習中なのかもしれません。Web制作に最低限必要な知識は様々なリソースがインターネット上にありますので、それらを活用していただいたり、もしオンラインサロンなどを利用されて学習されてるのであればそちらで質問していただくなりした方が良いかと感じました。

詳解CSS 基礎文法編 (全33回)

ウェブページの見た目を整えるための言語である、CSSの基礎的な文法について学んでいきます。

dotinstall.com

ぜひCSSなどの基礎知識をご確認いただいて、今後ともSnow Monkeyを楽しんでください！

♥ 0

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

[Olein_jp]

追記：あくつさん書かれているので削除しときます。（トピック訳の兼ね合いで）

♥ 2

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

[Olein_jp]

Snow MonkeyとSnow Monkey Blocksを普通に使う形では実現は難しいと感じます。また、ここはSnow Monkey公式フォーラムですので、アドバイス差し上げることが適切かどうか判断が難しいので、個人的な実現イメージだけ共有しておきますね。

@キタジマタカシ 氏　不適切であれば削除していただいて大丈夫です。

色々なアプローチが存在すると思いますが、僕の思いつきアイデアを共有します。

### 発生している問題

・使うべきブロックがわからない

・テキストとアイコンを併記させる方法がわからない

使うべきブロックですが、方法の一つとして「カラムブロック」でも良いかもしれません。よりカラムブロックを管理したい場合には、外側にグループブロックでラップしてCSSクラスを付与しても良いでしょう。

「テキストとアイコン」ですが、こちらはグループブロックでラップしてCSSクラスを付与し、見出しブロック（CSSクラス付与してスタイル追記）とカスタムHTMLブロックor画像ブロックでアイコンを配置してposition: absolute; でコントロールする感じでしょうか。

♥ 2

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

[Olein_jp]

実際のサイトの構造を見ないと確実なことは言えませんが、

葉っぱのアクセントをCSSの記述で挿入できないかと試してみました

.l-header{ background-image:url(ファイルの場所);}

これで背景に画像を入れるということは可能でしょう。あとは、background-position などなど利用して希望する場所に配置する流れるになるかと思います。

上段のカラーが変更できないかCSSの記述で試してみました

.l-header{background-color:#ffffff;}

これに加え、top、padding、marginなどの記述で幅を調整したりしていますが、上手く調整できない状況です。

これだと、ヘッダー全体の背景色を変えることになると思います。

①添付画像の見本のようにロゴ周りの背景を白くしたいが変更できない

ロゴの周りをということであれば、c-site-branding 付近の良さそうにCSSクラスに背景色を指定して調整するなどの方が、ご希望されている見た目に近くなるかもしれません。（ヘッダー全体の背景色を変えたいのであれば l-header でも良いと思います）

ご確認くださいませー。

♥ 0

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

[Olein_jp]

もしかしたら、mayuさんは学習過程なのかもしれないと思い、あえて答えは出さずにヒントだけ提供してみますね。

Snow Monkey Blocksのスライダーは、キタジマ氏が自身で開発したプラグインを採用しています。

inc2734/spider

Contribute to inc2734/spider development by creating an account on GitHub.

github.com

そちらのDOM構造ですが、簡単にご説明すると、

.wp-block-snow-monkey-blocks-spider-slider の中に .spider という囲いがあり、その中に .spider__canvas や .spider__dotsといった、画像部分やドット（もしくはサムネイル）部分が用意されています。

画像部分は .spider__canvas になるのですが、この中に spider__slide があり、その中にトピックに書いてある .spider__figure というimgタグの画像が配置されています。

しかし、挑戦されたように .spider__figure をいじっても高さは変更することはできません。なぜなら、.spider__figure を .spider__slide で囲ってあり、それらを .spider__canvas でよしなに切り取っているような作りになっています。

ですので、一番外枠の .spider__canvas をちょっとごにょごにょしてみると幸せになれるかもしれません。

ぜひ挑戦してみてください。

♥ 1

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

[Olein_jp]

詳細情報ありがとうございます。

こちらでも同様の条件でテストしてみましたが、確かに同じ事象が確認できました。応急処置的にはCSSで隠してしまうことは可能かと思いますが、根本的な解決には至らないので @キタジマタカシ 氏の意見も聞いてみましょう。仕様なのかバグなのかの判断も聞けると思います。

明日には何かしらのレスポンスが得られるかと思います。（週末はみなさん休業が多いので…）少々お待ちくださいませ。

♥ 1

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

[Olein_jp]

確認しました！対応ありがとうございました！閉じます！

♥ 1

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

[投稿者]

投稿