-
検索結果
-
こんにちは。
対象のセクションの高度な設定でflow等の適当なclassを設定して
CSSのback-groundで背景画像を設定してみてはどうでしょうか？.flow .smb-section__inner { background: url(https://rakku-rakku.com/wp-content/uploads/2022/11/img-TOP-flow-01-1-1024x768.png) no-repeat right top; background-size: 25vw; }位置やサイズは、調整してみてください。
Who liked:
【お使いの Snow Monkey のバージョン】 バージョン: 18.1.1
【お使いの Snow Monkey Blocks のバージョン】 バージョン 17.1.0
【お使いのブラウザ】 Google Chrome
【当該サイトのURL】
rakku-rakku.com### 実現したいこと
セクションタイトル（
.smb-section__title）中央のまま、右にイラストを配置したい。.smb-section__titleのレスポンシブでのサイズ変更を活かし、右にイラストを配置したいです。### 発生している問題
タイトルの右にイラストを配置すると、タイトルの位置が左右中央からずれてしまう
### 試したこと
最初は3カラムで構築してみましたが、真ん中のカラムにセクションでタイトルを配置したところ、長いタイトルは折り返されてしまいます。
また、長いタイトルでなくてもSP画面になるとカラムの幅に合わせて縦書きになってしまいます。
カラムでなく、カスタムHTML にてセクションタイトル右にイラストを配置する方法がうまくいきそうな気がしたのですが、
.smb-section__header_01にdisplay: flex;を記述したところ、セクションタイトルやサブタイトルも中央からずれてしまいました。添付画像のように、セクションタイトルが左右中央のまま右にイラストを配置するのは、どんな方法が最適でしょうか。
<div class="smb-section__header_01"> <h2 class="smb-section__title">施術の流れ</h2> <div class="smb-section__subtitle">flow</div> <img width="321" height="241" /> </div>宜しくお願いいたします。
↓このように配置したいです
こんにちは。
Snow Monkey / unitone Advent Calendar 2022 の2日目、メガネさんの
こちらの記事が参考になるかと思います。my-snow-monkey に追加するコードは、
is_front_page()で条件分岐して/** * ヘッダーのレイアウト変更 * * @param string $setting レイアウトのセッティング * sticky : 上部固定 * sticky-overlay : オーバレイ（上部固定） * sticky-overlay-colored : オーバーレイ（上部固定 / スクロール時背景白） * overlay : オーバレイ * '' : ノーマル. */ // SP用. add_filter( 'theme_mod_header-potition', function() { if ( is_front_page() ) { $setting = 'sticky-overlay-colored'; } else { $setting = 'sticky'; } return $setting; } );こんな感じになるかと思います。
Who liked:
このあたりのトピックなどが参考になると思います。
例えばこんな感じのコードになるでしょうか。add_filter( 'theme_mod_header-position', function( $value ) { if ( is_front_page() ) { // オーバレイ（上部固定 / スクロール時背景白） return 'sticky-overlay-colored'; } return $value; } );ヘッダー位置の指定方法は下記のとおりです。
- 上部固定
→ sticky - オーバレイ（上部固定）
→ sticky-overlay - オーバレイ（上部固定 / スクロール時背景白）
→ sticky-overlay-colored - オーバレイ
→ overlay
また、差し出がましいようですが、ファーストビューの画像はPC用とモバイル用で別のものを用意されたほうが、より美しくなると思います。
Snow Monkey Editor をインストール＆有効化しておくと、ウィンドウサイズによるブロックの出し分けができるのでおすすめです。
お試しくださいませー。Who liked:
ブログカードは内部リンクは同じタブ、外部リンクは新しいタブで開くようになっています。全てのブログカードを新しいタブで開くようにするには下記のコードを追加する必要があります。
My Snow Monkey プラグインか子テーマの
functions.phpに追加してみてください。add_filter( 'snow_monkey_oembed_blog_card_template', function( $template ) { return str_replace( 'target="_self"', 'target="_blank"', $template ); } );Who liked:my-snow-monkey.phpに記述してmy-snow-monkey（プラグイン）も有効化しています。
my-snow-monkey.phpには他にも記述が色々あって他はちゃんと反映されています。
のelseif以下の記述は効いていて、ページタイトルが変更できています。
Who liked: No user以下は、カスタマイザーの デザイン → ヘッダー → 「ヘッダーレイアウト」 が【2行】の場合に再現する方法です。
電話番号、問い合わせのリンクは上記メニューの「ヘッダーコンテンツ」にHTMLで記述しておきます。テンプレートの部分的な書き換えなどをおこなう場合に登場するフック
snow_monkey_template_part_renderを使います。
今回はグローバルナビゲーションなので・・・
snow_monkey_template_part_render_template-parts/nav/global
これを用いればご希望の位置に要素の追加は可能だと思います。My Snow Monkey でやるのがベターかと思います。
my-snow-monkey.phpに追加するコードはこんな感じです。add_filter( 'snow_monkey_template_part_render_template-parts/nav/global', function( $html, $name, $vars ) { if ( is_front_page() ) { // トップページの場合 ?> <div class="nav_before_content"> // 変更しない場合はここに画像のURL <img src="... // 固定ページや再利用ブロックを使って内容の変更を容易にしたい場合は・・・ // <?php echo apply_filters( 'the_content', get_post( 'ページのID' ) -> post_content ); ?> </div> <?php } return ob_get_clean() . $html; }, 10, 3 );ただしこれだけだとコンテンツ幅になってしまうので、 nav_before_content をCSSで全幅にしておきます。
.nav_before_content { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } /* ドロップナビを使用している場合、ドロップナビにも表示されてしまうので非表示に */ .p-drop-nav .nav_before_content { display: none; }これでイメージに近いことができると思います。
まずはご自身の環境に合わせて調整、試してみてください。Who liked:
下記のコードで解決しました。ありがとうございました。
add_filter( 'snow_monkey_get_template_part_args_template-parts/loop/entry-summary/term/term', function( $args ) { // カテゴリーアーカイブあるいは記事作成者ページあるいはタグ一覧ページのとき if ( is_category() || is_author() || is_tag()) { // その投稿に割当てられているカテゴリーを全て取得 $terms = get_the_terms( get_the_ID(), 'category' ); // 取得したカテゴリー（タクソノミー）のうち、最後のタームをカテゴリーラベルとして使用する $args['vars']['_terms'] = [ end( $terms ) ]; } return $args; } );Who liked:
GONSYさま
ご返信ありがとうございます。
＞【追加CSS】で .top-box { width: 74rem!important; } を指定していると思いますが、コンテンツ幅は＞1024pxに設定されているので、ズレが生じていると思います。
との記載通りに、カスタマイザーでコンテンツ幅を1180px程度に調整したところ、ヘッダー幅とコンテンツ幅をそろえることができました。
基本的なことで躓いていたようですが、修正することができました、ありがとうございました。
Who liked:
これは不具合ですね…。ご報告ありがとうございます！ 今後のアップデートで修正をいれようと思いますが、とりあえず現状では下記の CSS を追加してもらうとクリックできるようになります。
.smb-panels__item__body .smb-items__banner__action a { position: static; }Who liked:$terms = get_the_terms( get_the_ID(), 'category' );というふうにcategory固定にしちゃったらどうですかね？add_filter( 'snow_monkey_get_template_part_args_template-parts/loop/entry-summary/term/term', function( $args ) { // カテゴリーアーカイブあるいはタクソノミーアーカイブのとき if ( is_category() || is_tax() ) { // その投稿に割当てられているカテゴリーを全て取得 $terms = get_the_terms( get_the_ID(), 'category' ); // 取得したカテゴリー（タクソノミー）のうち、最後のタームをカテゴリーラベルとして使用する $args['vars']['_terms'] = [ end( $terms ) ]; } return $args; } );Who liked:ソースコードを拝見すると・・・
トップページのテンプレートが「ランディングページ（ヘッダー・フッターあり）」になっています。
それで全幅になってしまうコンテンツ幅を調整するため、【追加CSS】で.top-box { width: 74rem!important; }を指定していると思いますが、コンテンツ幅は1024pxに設定されているので、ズレが生じていると思います。
通常は何もせずに揃いますが、意図的にランディングページにしているなら、理由も提示いただいたほうが良い解決策が出てくるかと思います。もしかしたら、スマホ表示にコンテンツ部分（白背景）を全幅にしたいから？と推測しましたが、それならほかの方法で対策できるように思います。
Who liked:
なるほど、CSSなんですね。
ちなみにトピック開始の際に画像で貼ったフックはmy-snow-monkey.phpに記述していましたか？
その場合、my-snow-monkey（プラグイン）は有効化されていますよね？
フックでノーリアクションなのが気になりました。
私も似たような環境（カスタム投稿タイプは「Custom Post Type UI」を使用）をつくって試してみましたが、ご案内したコードで表示されました。
※ヘッダーの画像は、カスタマイザーの「デフォルトページヘッダー画像」で設定しています。カスタム投稿タイプのアーカイブ
カスタムタクソノミーのアーカイブ
Who liked:
- 上部固定
