SNM-FUN

フォーラムへの返信

15件の投稿を表示中 - 1 - 15件目 (全19件中)
  • 投稿者
    投稿
  • SNM-FUN
    閲覧者
    20

    追加情報です。

    トップページ以外の固定ページから全ページ共通部分(ヘッダー・フッター)にあるトップページの各セクションのページ内リンクを押す際にずれが生じるのですが、ずれて表示されるセクションの1つ上のセクションにあるアコーディオンを開いた状態をオフにすると改善されました。開いた分だけずれているのでしょうか。

    また、実は再度確認したところトップページ以外の固定ページからだけでなく、トップページから同様ページ内リンクを押してもずれて表示されるリンクがあり、そちらはEWWW Image Optimizerの設定の1つである「遅延読み込み」をオンにして改善しました。

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    ご返信いただき誠にありがとうございます。
    回答させていただきます。

    この中だと画像の読み込みに関連しそうなのは「EWWW Image Optimizer」ですが…停止すると何か変わったりしますか?

    無効化しましたが、改善されませんでした。

    「jQuery使用」とありますが、非同期読み込み的なことに使っていますか?

    いえ特に行っていない認識ですが、コードを共有した方がよろしいでしょうか。

    ちなみに、このサイトの場合だと、下記のページにある「目次」がページ内リンクになっています。僕の環境だと Chrome でも Safari でもずれに移動できましたが、これはどうですかね?下記のページでも同様に不具合が発生するなら Snow Monkey の何かに原因がある可能性が高いかなと。下記のページでは発生しないなら、ページの作り方や何らかの設定、ブラウザの何か…という可能性があるかもなと。

    私の環境でもそちらのサイトについては同じくずれずに両ブラウザで移動できました。また再度確認したところChromeでもずれていました、、、

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    ご返信いただき誠にありがとうございます。回答させていただきます。

    – スムーススクロールを使用しない場合はどうなりますか?
    →改善されません

    – ページを(ハードリロードなどでキャッシュを消さずに)リロードしたあと、再度リンクをクリックすると改善されますか?
    →トップページから別の固定ページに移動し、リロードした後、リンクを押しましたが、改善されません

    – ページを一度一番下までスクロールして、一番上まで戻った後、再度リンクをクリックすると改善されますか?
    →改善されません

    – 画像を非同期読み込みするようなプラグインあるいは JavaScript のライブラリーを使用していますか?
    <使用しているプラグイン>
    All-in-One WP Migration
    BackWPup
    EWWW Image Optimizer
    SEO SIMPLE PACK
    My Snow Monkey
    Snow Monkey Blocks
    Snow Monkey Editor
    Snow Monkey Forms
    Snow Monkey Google Fonts
    WP Multibyte Patch

    jQuery使用

    0
    いいねをした人: 居ません
    返信先: Googleフォントの読み込みについて #134472
    SNM-FUN
    閲覧者
    20

    キタジマさん
    ご教示いただき誠にありがとうございます。
    結果的に、My Snow Monkeyプラグイン内直下にfontsフォルダを作成し、 googleフォントから当該フォントをダウンロードし、それをfontsフォルダの中に入れた上で、以下のコードにより当該フォントの読み込みが成功し、かつカスタマイザー内の「フォントの太さ」でSemiBold 600を選択できるようになりました。

    add_filter(
    	'snow_monkey_font_family_settings',
    	function( $settings ) {
    		array(
    			$settings['noto-sans-jp']['variation']['600'] = array(
    				'label' => 'SemiBold 600',
    				'src'   => MY_SNOW_MONKEY_URL . '/fonts/NotoSansJP-SemiBold.ttf',
    			)
    		);
    		return $settings;
    	}
    );
    1
    いいねをした人:
    SNM-FUN
    閲覧者
    20

    サポートの件承知いたしました。
    ご教示いただき誠にありがとうございます。

    また共有いただきましたページを参考にしたところ無事表示されるようになりました。
    この度はご教示いただき誠にありがとうございました。重ねて御礼申し上げます。
    それではトピックを閉じます。

    1
    いいねをした人:
    SNM-FUN
    閲覧者
    20

    キタジマ タカシ様

    ご返信いただき誠にありがとうございます。
    説明不足で大変申し訳ございません。
    現在Wordpressはバージョン5.9.3を使用しており、制作の都合上このバージョンで上記の問題を解決したいのですが、その場合Snow Monkeyは最新バージョンでも問題ないのでしょうか?

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    キタジマ タカシ様

    ご返信いただき誠にありがとうございます。
    現状、管理運用の手間を減らすためエディタ用とフロント用とを分けずにセレクタを指定しており、かつ最終的に読み込むCSSファイルは1つまとめております。その上でいただきましたご意見を踏まえ、さらに検討した結果、add_editor_style()enqueue_block_editor_assetsフックの両方で同じ1つのCSSファイルを読み込むことにいたしました。
    これによって、CSSファイル側では.editor-styles-wrapperクラスが挿入されることなど特段何も考えずにセレクタ指定をしても、フロント・エディタ側両方で同様のスタイルが反映されるようになりました。
    2度同じファイルを読み込むという悪影響もございますが、この方法ではフロントへの表示には大きな影響がなく、影響はエディタ画面が表示されるときだけなので、CSS作成時の手間の軽減とそれによって生じる悪影響・デメリットとを天秤にかけ、手間軽減のメリットの方が大きいと考え一旦この方法を採用しました。
    備忘録として残しておきます。

    お力添えいただき誠にありがとうございました。大変助かりました。
    重ねてお礼申し上げます。
    トピック閉じておきます。

    1
    いいねをした人:
    SNM-FUN
    閲覧者
    20

    キタジマ タカシ様

    ご教示いただき誠にありがとうございます。

    .editor-styles-wrapper にクラスを追加するオフィシャルな方法は無いと思います。

    そうなのですね。承知致しました。

    body.slug-{スラッグ} ではなく .slug-{スラッグ} にしたら良いのではと思ったのですがどうですかね?

    そうですね。bodyを必ずしも入れなければいけないというわけではないのですが、セレクタを.slug-{スラッグ}のみにした場合、以下のように置換がなされます。

    .editor-styles-wrapper .slug-{スラッグ}{
    ...
    }

    ただし、.slug-{スラッグ}は現状bodyタグのクラスであり、エディター内のHTML構造上.editor-styles-wrapperはbodyタグの内側に含有されておりますので、.editor-styles-wrapper .slug-{スラッグ}というセレクタは存在せず、やはりこれでも結果的にエディターにフロントのスタイルは反映されません。

    どうしても body.slug-{スラッグ} にする必要があるのであれば、追加 CSS や add_editor_style()ではなくて、enqueue_block_editor_assets で wp_enqueue_style()すればクラスの置換が行われずに読み込めますよ。

    ありがとうございます。確かにご教示いただいたこの方法でクラスの置換が行われなくなるため、.editor-styles-wrapperセレクタを意識せずにCSSを記述しても、フロント側同様のスタイルをそのままエディターに反映させられるようになるのですが、.editor-styles-wrapperの自動置換が無くなることで、今度は管理画面上のブロックエディター外の部分にもスタイルが反映されるようになるため、この方法を少し躊躇っていました。
    その上で、やはり現状「ページごとに個別のCSSをフロントとエディタ側両方に同様に反映させる」ためにはご教示いただいた上記の方法しかなさそうでしょうか?

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    申し訳ございません。
    上記と同じコメントを誤って再び送信してしまいましたので、2度目に送信したコメントの文章を削除し、本コメントを送信致しております。

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    Olein_jp様

    ご返信いただき誠にありがとうございます。
    ご教示いただきましたadmin_body_classフックを利用することでエディター内のbodyタグにもページごとで固有のslug-{スラッグ名}クラスを追加することができました。
    ただし、追加はできたもののslug-{スラッグ名}クラスを経由して指定したスタイルはやはりエディターには反映されておりませんでした。よく考えてみると、現状CSSファイル内でslug-{スラッグ名}クラスを経由してスタイルを設定する際、以下のようにセレクタを組んでいるのですが、

    body.slug-{スラッグ}{
    ...
    }
    

    エディター側では、editor-styles-wrapperクラスが自動的に挿入されますので、上記のセレクタは以下のように自動的に置換されるかと思います。

    .editor-styles-wrapper.slug-{スラッグ}{
    ...
    }
    

    ただし、slug-{スラッグ名}クラスはbodyタグのクラスであるため、.editor-styles-wrapper.slug-{スラッグ}というセレクタは存在せず、結果的にslug-{スラッグ名}クラスを経由して指定したスタイルはエディタには反映されていないのかと思います。

    そのため解決策として、エディター側ではbodyタグにslug-{スラッグ名}クラスを追加するのではなく、editor-styles-wrapperクラスを持つdivタグにslug-{スラッグ名}クラスを追加することで、上記のセレクタの置換が行われたとしても、エディタ側にフロントと同じスタイルが反映されるようにしようかと考えておりますが、調べたところなかなかこの手の情報がヒットせず、未だ解決に至っておりません。

    どなたか「editor-styles-wrapperクラスを持つdivタグに任意のクラス(slug-{スラッグ名}クラスetc)を追加する方法」をご存知の方はいらっしゃいますでしょうか?

    お手数お掛けし大変恐れ入りますが、ご教示いただけますと幸いです。
    何卒宜しくお願い申し上げます。

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    まーちゅう様

    上記コードで無事実装することができました。

    この度は、ご教示いただき誠にありがとうございました。

    それではトピック閉じさせていただきます。

     

    P.S.

    ご教示いただいた内容を参考に、.c-entry__metaを、以下.c-entry__header__header内に含有させる場合、以下のように実装できましたので念の為共有いたします。

     

    /**
     * シングルページのページヘッダーにアイキャッチを追加
     *
     * @param $html テンプレートパーツの出力HTML
     * @param $name テンプレートパーツの名前
     */
    // use Framework\Helper;
    add_filter(
    	'snow_monkey_template_part_render_template-parts/content/entry/header/header',
    	function( $html, $name ) {
    		if ( "post" === $name ) {
    
    			ob_start(); // アイキャッチ画像のHTMLを記録開始
    			if ( has_post_thumbnail() ) {
    				?>
    				<div class="c-entry__thumbnail">
    					<?php the_post_thumbnail("large"); ?>
    				</div>
    				<?php
    			}
    			$thumbnail_html = ob_get_contents(); // 記録結果を変数に代入
    			ob_end_clean(); //記録終了
    
    			$search_1  = '<h1 class="c-entry__title"';
    			$replace_1 = '<div class="c-entry__header__header"><h1 class="c-entry__title"' ;
    			$search_2  = '</header>' ;
    			$replace_2 = '</div>'.$thumbnail_html.'</header>';
    			$html = str_replace(
    				[
    					$search_1,
    					$search_2
    				],
    				[
    					$replace_1,
    					$replace_2
    				],
    				$html
    			);
    		}
    		return $html;
    	},
    	10,
    	2
    );
    2
    いいねをした人:
    SNM-FUN
    閲覧者
    20

    キタジマ様

    ご返信いただき誠にありがとうございます。

    ご教示いただきましたコードで問題なく実装できました。

    トピック閉じさせていただきます。

    1
    いいねをした人:
    SNM-FUN
    閲覧者
    20

    GONSY様

    ご返信いただき誠にありがとうございます。

    ご教示いただきました内容で実装できました。

    以上で、本トピック閉じます。

    1
    いいねをした人:
    SNM-FUN
    閲覧者
    20

    Olein_jp様、KUMAI KAZUYUKI様

    ご返答いただき誠にありがとうございます。

     

    本題とは逸れますが、個別投稿を作るほどの内容はないけど、投稿は作成されていて、けど一覧からはリンクを張りたくない、と言うことですかね?

    WordPress使う理由はどこかにあるのかな?と思ったりもしました。

    はい申し訳ございません言葉足らずでした。現段階で個別投稿を使用することはないですが、将来的には内容を追加する予定ですので、あくまで現段階に限って一覧のみの使用を想定しております。

     

    CSSで、対象の <a> に対して pointer-events:none; を設定してしまう、というのはどうですかね。

    基本的にはCSSをいじられることはないのかなと思い、こちらを参考に実装することに致しました。とても助かりました。ありがとうございます。

    0
    いいねをした人: 居ません
    SNM-FUN
    閲覧者
    20

    以下の通り設定し、結果的に、、、、、、、、、、、、できました!!
    ご回答いただいたお二方ありがとうございました!!

    こちらも皆さんの参考になればと思い、以下に設定した内容を記載しております。ぜひご参照ください!(無駄なところがあるかもしれません、、)

    • ヘッダーを全幅にする
    • ヘッダーレイアウトを2行
    • ヘッダーコンテンツに記述(記述内容を以下に記載しております)
    • 「お問い合わせ」をグローバルナビに入れ、menu-item-contactクラス付与
    ヘッダーコンテンツ
    <div class="header-tel">
    <div>TEL</div>
    <div class="header-tel-number">0000-00-0000</div>
    </div>
    <div class="header-btn-recruit"><a class="c-btn">採用情報</a></div>
    
    追加CSS
    /*==========================*/
    /* Header
    /*==========================*/
    [data-has-global-nav=true] .l-2row-header__row:last-child{
    margin-top: 0px;
    }
    .c-fluid-container{
    padding-right: calc(192px + 22px);
    position: relative;
    }
    
    .c-header-content{
    display: flex;
    align-items: center;
    }
    
    .header-tel{
    display: flex;
    justify-content: flex-start;
    font-weight: bold;
    font-size: 20px;
    }
    
    .header-tel-number{
    margin-left: 6px;
    }
    
    .header-btn-recruit{
    display: table;
    }
    
    .header-btn-recruit a.c-btn{
    background-color: #fff;
    color: var(--accent-color,#cd162c);
    border: 2px solid var(--accent-color,#cd162c);
    border-radius: 22px;
    font-weight: bold;
    width: 175px;
    height: 44px;
    margin-left: 23px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    }
    
    .header-btn-recruit a.c-btn::after{
    content: "";
    width: 7.7px;
    height: 7.7px;
    border-top: 2px solid var(--accent-color,#cd162c);
    border-right: 2px solid var(--accent-color,#cd162c);
    transform: rotate(45deg) translate(1px, 1px);
    }
    
    .menu-item-contact{
    position: absolute;
    top: 0;
    right: 0;
    width: 192px;
    height: 100%;
    }
    
    .c-navbar{
    justify-content: flex-end;
    }
    
    .c-navbar__item{
    flex: initial;
    }
    
    .c-site-branding__title{
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    }
    
    .l-2row-header .p-global-nav .c-navbar__item>a{
    padding-top: 16px;
    padding-bottom: 12px;
    }
    
    .p-global-nav .c-navbar__item>a{
    font-size: 16px;
    line-height: 1.5;
    }
    
    @media (min-width: 64em){
    .l-2row-header__row:first-child {
    padding-top: 4px;
    padding-bottom: 0px;
    }
    }
    

    ふぅ〜追加CSSでできて、よかった、、🥷
    トピック閉じておきます

    7
    いいねをした人:
15件の投稿を表示中 - 1 - 15件目 (全19件中)

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。