フォーラムへの返信
-
画像を読み込んでいる部分が問題だとするならば、その画像名（もしくはその一部の名前）でソースコードを検索してみたりすると良いですよ。
外から見える部分だけからのデバッグは結構大変だったりもするので、なかなかアドバイス差し上げにくいところがあります。なんとか頑張ってみてください！
いいねをした人:
実際に作られているサイトを見ているわけではないので確実なことは言えませんが、
＞PCでの表示用のみ書いているので、必要であればメディアクエリなどで分岐してつかってください。
これを怠っているからでしょうか？初心者のため意味がわからず何もしていないのですが。。
Snow Monkey はモバイルファーストな形でCSSを書かれているので、メディアクエリを設定せずに記述すると、スマホ＞タブレット＞PCと全てのデバイスへ適応されます。ですので、スマホ表示だけに適応したい、PC幅表示時だけ適応したい、などという場合には、メディアクエリを記述する必要が出てきます。
その辺りはぜひご自身で調べて試してみてください。
いいねをした人:
スマホで該当サイトを拝見しましたが、そもそもページの読み込みが完了できていません。ですので、XO Slider や Snow Monkey の問題ではなく、その辺りの調査をまずはされた方が良いかと思います。
こちらで検証ツールにてUAをスマホにした状態でも、コンソールにエラーが表示されています。そういった点をしらみ潰しに調査して、まずはスマホで読み込みが完了するようにしてみると良いかと思います。
いいねをした人:何をしたら良いのか分からないということですので、まずはWordPressの一般的な問題究明の方法を試してみてはどうでしょうか？
まず、テーマをTwenty〜に変更してみましょう。そして問題が引き続き起きているか確認して下さい。もし起きていればテーマに関する部分ではないといえます。
もしテーマ起因でない場合、次はプラグインを調べます。一度全て無効化をしてスライダーを提供するプラグインだけで有効化をし、表示を確認してください。
このような形で何が原因となり得るかを絞り込んでみて下さい。
いいねをした人:
CSSで対応できると思いますが、すでにお試しでしょうか？以下のようにやればできるかと思います。PCでの表示用のみ書いているので、必要であればメディアクエリなどで分岐してつかってください。
①左表示にした状態での横幅の変更
最初に左サイドバーの幅を上書きします。その後に、コンテンツエリアについている左マージン（＝左サイドバーの幅分）も設定し直します。
.l-header--left { width: 150px; } [data-header-layout=left] { margin-left: 150px; }②各メニュー項目のセンタリング
.l-header--left .p-global-nav .c-navbar__item>a { align-items: center; }③ロゴの左寄せ
ロゴ画像は全幅で表示されていると思うので、左サイドバーのコンテンツエリア幅よりも小さくなるように画像サイズを指定してあげてください。必要であれば以下のように
!importantをつけてあげてください。.c-site-branding__title { text-align: left; } .c-site-branding__title > a > img { width: 100px !important; }いいねをした人:
ただ、1つ目の方も試したのですが、やり方が間違っているのかできませんでした。
sample-1とsample-2に入れる内容は2つ目と同様ですよね?
同じですね。ちょっと配列等で書き方は変わってきますが。
$args自体を dump してみたいりしてデバッグしてみてください。こちらでは一応動作しております。
いいねをした人:「任意のタクソノミーの投稿」ブロックを使うと、必ずカテゴリーかタグを選択しないといけないはずなのでお聞きしました。
ですので以下の２つのパターンでお伝えしますね。
## 任意のタクソノミーの投稿ブロックでカテゴリーを何かしら設定した場合
まず、配置した「任意のタクソノミーの投稿」ブロックに一意のHTMLアンカーを設定します。ここでは
2-taxonomy-show-testとします。設置した際にカテゴリーは指定しておいてください。
そして、My Snow Monkey など PHP 側から以下のようにコードを書きます。
add_filter( 'snow_monkey_taxonomy_posts_widget_args_2-taxonomy-show-test', function ( $args ) { $args['tax_query'] = array_merge( $args['tax_query'], [ [ 'taxonomy' => 'post_tag', 'terms' => [ 'sample-1', 'sample-2' ], 'field' => 'slug', ], ] ); return $args; } );snow_monkey_taxonomy_posts_widget_args_[slug]というフックがあるのでそれを使っています。トピに書かれていた参照記事と一緒ですね。タグは
sample-1とsample-2としています。## 「最近の投稿」ブロックを利用する場合
HTMLアンカーもタグも同じです。フックは変わります。snow_monkey_recent_posts_widget_args_[slug]ですね。以下のようなコードになります。add_filter( 'snow_monkey_recent_posts_widget_args_2-taxonomy-show-test', function ( $args ) { $args['tag'] = 'sample-1+sample-2'; return $args; } );一度試してみてください。
いいねをした人:
一点質問があります。
２つのタグを選択した際に、それら２つに合致した投稿のみを「任意のタクソノミーの投稿」ブロックで出力したい、とのことでしたが、カテゴリーは何かしらを指定される予定でしょうか？
それによって、「任意のタクソノミーの投稿」ブロックが良いのか「最近の投稿」ブロックが良いのか変わってきます。
いいねをした人:このような感じで書くと上書きすることができます。
.wp-block-separator { background-color: transparent !important; border-right: none; border-bottom: none; border-right: none; border-top: 1px dashed; }検証ツールで色々とCSSをみてみると良いですよ。
いいねをした人:
そういった「機能」自体はありませんね。CSSで対応するのが早いかと思います。
ページヘッダー内のタイトル部分のCSSクラスが
c-page-header__titleなので、これに対して擬似要素などで追加されてはどうでしょうか？.c-page-header__title:before { content: "Sample Text"; position: absolute; font-size: .8rem; top: -1rem; left: 0; }ページごとなどで分けることがあると思うので、ページIDなどで区別されると良いかと思います。
お試しください。
いいねをした人:
サイトを拝見すると、「お知らせ」は「投稿」で作られていると思いますので、カスタマイザーより【デザイン】→【投稿ページ設定】→【アイキャッチ画像の位置】を一度確認してみていただけますか？
ちなみに、カスタマイザー内でなにか投稿記事が表示されるページへ遷移されると、該当メニューが表示されるかと思います。
いいねをした人:①タイトルのみは左寄せになってしまう。
任意のクラス名
panel-title-centerというようなクラス名を各パネルに設定する方法で紹介します。そのクラスに対して、以下のようなCSSを設定します。
.panel-title-center .smb-panels__item__title { text-align: center; }これで実現できるかと思います。詳細度の問題があれば少し手入れしてみてください。
この方法と同じように、
②４つのパネル全ての背景を一気に変更はできたが、それぞれで色を変えることはできなかった。
も解決することができるかと思います。
例えば、背景色を赤にしたい場合、
panel-bg-redというようなクラス名を付与します。そして、.panel-bg-red .smb-panels__item { background: red; }というクラスを用意しておけば、付与したパネル背景色のみ変更することができるので、色の数だけクラス名を用意して付与すれば実現できるかと思います。
お試しください。
いいねをした人:
