メインコンテンツへ移動

キタジマ タカシ

フォーラムへの返信

15件の投稿を表示中 - 151 - 165件目 (全7,501件中)
  • 投稿者
    投稿
  • 返信先: ウィジェット更新時のエラーについて #144389
    アバター画像キタジマ タカシ
    参加者
    2593

    WordPress のブロックウィジェットの更新は、 REST API で json を通信することでおこないます。(テーマやウィジェットに限らず)何らかの PHP エラーが発生していると、この REST API の通信にも影響があり、json の中にエラーメッセージが入り込んでしまうことで json が崩れて、このエラーが発生することがあります。

    何がエラーメッセージを出してしまっているかは調査しないとわからないので、ウィジェット更新のタイミングでサーバーのエラーログに何かエラーがでていないかを確認してみてください。

    また、ブラウザのデベロッパーツール→コンソールを開いた状態でウィジェットを更新すると、そこにもエラーメッセージがでるかもしれません。そこもあわせて確認してみてください。

    0
    Who liked: No user
    返信先: 再利用ブロックでのタブ使用について #144382
    アバター画像キタジマ タカシ
    参加者
    2593

    タブブロックを動作させる script は共通の js ファイルではなくてタブブロック用のファイルに書いてあるので、カスタム HTML ブロックにコードを書くとタブブロックとは認識されずに js ファイルが読み込まれず動作しないということはあるかもしれません…。

    カスタム HTML 化しない場合はどうでしょうか?

    0
    Who liked: No user
    返信先: 画像配置について #144354
    アバター画像キタジマ タカシ
    参加者
    2593

    右のグリッド画像にリンク設定をしたいと思っておりまして、、

    なるほど…。

    カスタマイズで右と左の枠をheightで設定すれば良いものなのでしょうか・・?

    画面が広くなったら画像も広くならないとですよね? 画像のトリミングは NG で画角は維持しないといけないとすると、 height で高さを固定したら width も固定しないとなので、それだと画面に合わせて画像が大きくならなくなってしまいますよね。

    なのでやるとすれば画像のサイズとカラムのサイズをびっちり計算して合わせるしかないのかなと…。ちょっとこちらでやってみました。共有していただいた URL に現在使用されている画像からサイズを計算して適用してみました。エディターをコードエディターに切り替えて下記のコードを貼り付け、ビジュアルエディターに戻すと表示されます。

    <!-- wp:group {"align":"full","layout":{"type":"default"}} -->
    <div class="wp-block-group alignfull">
    	<!-- wp:snow-monkey-blocks/flex {"layout":{"orientation":"horizontal","type":"flex","flexWrap":"wrap"}} -->
    	<div class="wp-block-snow-monkey-blocks-flex smb-flex">
    		<!-- wp:image {"sizeSlug":"large","smb":{"flexBasis":"73%"}} -->
    		<figure class="wp-block-image size-large"><img src="https://placehold.jp/2173x1100.jpg" alt=""/></figure>
    		<!-- /wp:image -->
    
    		<!-- wp:snow-monkey-blocks/grid {"columnsOption":"columns","columns":2,"rows":2,"smb":{"flexBasis":"27%"}} -->
    		<div class="wp-block-snow-monkey-blocks-grid smb-grid smb-grid--columns:columns smb-grid--rows:rows" style="--smb-grid--gap:0;--smb-grid--columns:2;--smb-grid--rows:2">
    			<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
    			<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
    			<!-- /wp:image -->
    
    			<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
    			<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
    			<!-- /wp:image -->
    
    			<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
    			<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
    			<!-- /wp:image -->
    
    			<!-- wp:image {"lightbox":{"enabled":false},"sizeSlug":"large","linkDestination":"custom"} -->
    			<figure class="wp-block-image size-large"><a href="#"><img src="https://placehold.jp/400x550.jpg" alt=""/></a></figure>
    			<!-- /wp:image -->
    		</div>
    		<!-- /wp:snow-monkey-blocks/grid -->
    	</div>
    	<!-- /wp:snow-monkey-blocks/flex -->
    </div>
    <!-- /wp:group -->

    とりあえず全幅にするために全体を全幅のグループブロックで囲って、左右のカラム分割のためにフレックスブロックを入れました。で、左側は普通に画像ブロック、右側は4個を並べるためにグリッドブロックを使いました。

    そして、左の画像ブロックのサイズ→基本サイズを 73%、右側のグリッドブロックのサイズ→基本サイズを 27% にしました。ただ、ページに掲載されていた画像に基づいて計算すると、本当は 73% ピッタリではなくて 0.73091153716… のように小数になってしまったので、若干ずれて上下に余白が入ってしまいます。ぴったり整数になるような画像サイズにすれば余白がなくなるはずです。

    問題点としては、スマホでもこのレイアウトを維持してしまうので、スマホではカラム落ちさせたいという場合は CSS を追加するか、Snow Monkey Editor プラグインの「表示設定(ウインドウサイズ)」の設定でスマホでは非表示にするようにして、スマホはスマホ用で別につくる、みたいなことが必要になります…。

    ここまで書いてあれですが、このレイアウトが必須であるなら、僕なら「カスタム HTML ブロック」で HTML を書いちゃうかなぁと思います。既存ブロック + CSS で無理やり実装すると後々メンテナンスが面倒になる可能性があるので…。

    0
    Who liked: No user
    返信先: 画像配置について #144342
    アバター画像キタジマ タカシ
    参加者
    2593

    右の枠と左の枠の大きさが違うので、画像を普通に配置したら大きさが合わずに余白が生まれてしまいます。ブロックを使うのであれば、中の画像を枠の大きさに合わせて広げて、画像をトリミングする形で表示する必要があると思います。

    ちなみに、僕の環境で見ると右側の画像は潰れてしまっています。

    画像だけのレイアウトなので、ブロックを組み合わせて CSS を書いて…とやってメンテナンス性を落とすよりも、1枚の画像で作ってしまったほうが簡単かもしれません(地下鉄今里駅から…等の文章が画像ではなくてテキスト必須、のような要件であれば無理ですが…)。

    1
    Who liked:
    アバター画像キタジマ タカシ
    参加者
    2593

    これですよね。

    これはアコーディオンブロックを使っているので、構造化データは出力されません。構造化データが出力されるのは FAQ ブロックを使った時になるので、構造化データが必要な場合は FAQ ブロックを使うのが良いです。

    0
    Who liked: No user
    アバター画像キタジマ タカシ
    参加者
    2593

    一般的に 403 の原因というとこんな感じでしょうか。

    – .htaccess でアクセス制限していないか
    – セキュリティ系プラグインでアクセス制限していないか
    – サーバー側で IP アドレス制限などをしていないか
    – ファイルのパーミッションを変更していないか

    クラッキングされた可能性が高いのであれば現状のバックアップをとった上で、過去のバックアップを復元するとか、FTP で WordPress のコアファイルを入れ替えるとかをやってみるのも良いかもですね。

    0
    Who liked: No user
    アバター画像キタジマ タカシ
    参加者
    2593

    ということは正しく追加はできて、計測も問題なしということですかね?

    0
    Who liked: No user
    アバター画像キタジマ タカシ
    参加者
    2593

    基本的にはどちらに書いても反映はされるはずなので、子テーマの CSS が正しく読み込みできている状態であれば詳細度の問題かもしれません。

    3
    Who liked:
    アバター画像キタジマ タカシ
    参加者
    2593

    CSS も追加されていますかね?

    1
    Who liked:
    アバター画像キタジマ タカシ
    参加者
    2593

    また、シークレットウィンドウで見ると、Firefoxと同じ正しい表示でした。

    なるほどです。恐らくブラウザキャッシュの影響ではないかと思います。サーバーの設定や使用しているプラグインの設定によってブラウザキャッシュを強く残すようになっている場合、CSS や JS、画像を更新したのにキャッシュ(ブラウザに一時的に保存されている古いバージョン)が使用されて、新しいものが反映されないということが起こり得ます。

    0
    Who liked: No user
    アバター画像キタジマ タカシ
    参加者
    2593

    ありがとうございます!

    パラメーターが色々あって、タグマネージャーの ID みたいにぽんと入れれば終わりというわけではなさそうなので、サクッと機能追加するのは難しそうですね…。今後のアップデートで、「Google 同意設定を有効化」にチェックを入れると下記のコードが出力されるようになる、さらに default の各パラメーターの値はフィルターフックでカスタマイズできるようにする、というのはやりたいなと思いました。

    <script>
      // Define dataLayer and the gtag function.
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
    
      // Set default consent to 'denied' as a placeholder
      // Determine actual values based on your own requirements
      gtag('consent', 'default', {
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'analytics_storage': 'denied'
      });
    </script>

    ということで、現段階では独自にアクションフックを使って計測タグを挿入する形になるかなと思います。現状タグマネージャーのコードは wp_head の優先度 10 で出力されているので、wp_head の優先度 10 未満で計測タグを出力するようにすると良いのかなと。

    add_action(
    	'wp_head',
    	function () {
    		?>
    		// ここに計測タグ
    		<?php
    	},
    	1
    );

    これでタグマネージャーのコードより前に(「直前」にコントロールする方法は現状無いです…)出力されると思うので試してみてください!

    1
    Who liked:
    アバター画像キタジマ タカシ
    参加者
    2593

    ・Safariのファーストビューのメインコピーが表示されないです

    Snow Monkey Editor のアニメーション機能を使用されていると思うのですが、スクロールと要素の位置でアニメーションが発火(フェードインの実行)する仕組みになっているので、一番最初の要素だとそれがうまく動かないみたいです。後で修正できるか調査してみようと思いますが、とりあえずその部分についてはアニメーションを外すのが良いかなと思います。

    ・Chromeのインライン画像の位置がおかしくなり、行がずれて表示されていたり、離れすぎて表示されています。アイコンリストも左に寄りすぎています。

    Safari と Chrome で確認してみたのですが、どちらもスクショいただいたような表示は確認できませんでした。シークレットブラウザで見てもスクショのような崩れが発生しますか?

    0
    Who liked: No user
    アバター画像キタジマ タカシ
    参加者
    2593

    恥ずかしながら Google 同意モードというのを初めて聞いたのですが、もしこれがそれなりの割合で皆が設定するべきものである(あるいはそうなる)ものであれば、Snow Monkey に設定を追加したほうが良いのかなと思ったのですがどうでしょうか?それならカスタマイズの手間も省けると思うので…。

    ただ、Google 同意モードの実装がどういうものかわからなので、もしよければどういうコードを追加しようとしているのかを教えていただけるとうれしいです!

    1
    Who liked:
    アバター画像キタジマ タカシ
    参加者
    2593

    ヘッダーコンテンツはヘッダーに内包されるので、スクロール時にヘッダーコンテンツが消えるというよりはヘッダーがスクロールとともに隠れるということかな?と思ったのですが認識はあっていますか?

    もしあっているのであれば、ヘッダーがスクロールで隠れないようにするしかないと思うので、ヘッダー位置の固定表示を試してみると良いかもしれません。

    あるいは、ドロップナビゲーション(スクロールすると上からにゅっとでてくるナビゲーション)にも Facebook アイコンを表示したいということであれば、ヘッダーコンテンツを使わずに、メニューに Facebook アイコンを追加するのが簡単だと思います。メニューでカスタムリンクを追加するときに「リンク文字列」に FontAwesome が使用できます。

    1
    Who liked:
    アバター画像キタジマ タカシ
    参加者
    2593

    なるほどです。ACF でつくったということは、その方がカスタムフィールドに入力された CSS を出力する処理をどこかに書いていると思うので、カスタムフィールドの名前をもとに調査すると何かわかるかもしれません…!

    0
    Who liked: No user
15件の投稿を表示中 - 151 - 165件目 (全7,501件中)

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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