フォーラムへの返信
-
投稿者投稿
-
Snow Monkeyの【セクション(背景画像 / 動画)】→「スマートフォン用の背景動画」は、たぶん、375pxのとき高さ500px(程度)になるように
min-height: 75vh
と指定されているようですね。動画を通じてメッセージをしっかり伝えたい、ということであれば、PC用の横長のものではなく、スマートフォン用に縦長の動画を別につくられたほうがいいかもしれません。
また、動画をダウンロードしてみたところ、ファイルサイズが80MBを超えているようです。
表示速度が著しく低下してしまうため、目安としては、10MB以下にするのが最適と言われています。
私も動画を使ったことがありますが、概ね5〜6MBです。Snow Monkey Blocksの【最近の投稿】ブロック → レイアウト「パネル」で表示されるアイキャッチ画像部分のCSSが参考になると思います。
上記の要素をデベロッパーツールで見てもらえばわかると思いますが、画像の親要素に
overflow: hidden; position: relative;
がかかっていて、その要素に(:before)擬似要素で高さを指定(4:3の画像:75%)、画像(img)には、object-fit: cover;
などで調整されていると思います。♥ 0いいねをした人: 居ませんSnow Monkeyには、100のウェイトが使えるWebフォントがあらかじめ用意されています。(便利ですね!)
下図のように【カスタマイズ】から、“基本フォント”と“ウェイト”が選べます。
使用したいウェイトにもチェックを入れてみてください。
ただ、ページの読み込みに影響が出てしまうと思いますので、チェックを入れるのは、使用したいウェイトだけにしたほうが良さそうです。100のウェイトがあるフォントは
- Noto Sans JP(ゴシック体)
- M PLUS 1P(ゴシック体)
- M PLUS Rounded 1c(丸ゴシック体)
です。
すでにCSSを追記されているようなので、こちらの設定だけで表示されると思います。ちょうど私も似たようなことをしていたので、強引な手法だと思いますが、以下の方法でやってみました。
- 【カスマイズ】→【デザイン】→【ヘッダー】の「PC用ヘッダー位置」は『上部固定』に設定。
モバイル用もハンバーガーメニューの常設が必要なので、同じく『上部固定』です。
同じ設定画面内の「ヘッダーレイアウト」は『中央ロゴ』としています。 - 次にグローバルナビゲーションの上にスライダーなどを設置するのは、トップページですが、スマートフォンのときはハンバーガーメニューも下がってしまうため、スマートフォン対策として、トップページ用の固定ページに、画像やスライダーなどのブロックを上部に設置し、右メニュー【表示設定(ウィンドウサイズ)】で、スマートフォンだけ表示するようにしておきます。
- 次にトップページのグローバルナビゲーションの上に設置するスライダーなどですが(推奨できる方法ではないと思います)、
snow_monkey_prepend_body
を使いました。
※スライダーを、body直下に挿入してしまえ!という方法です。
今回はプラグイン「XO Slider」を使用しているので、生成されるショートコードを入れました。
add_action( 'snow_monkey_prepend_body', function() { if ( is_front_page() ) { // トップページのみ if ( ! wp_is_mobile() ) { // モバイルデバイスでない echo do_shortcode( '[xo_slider id="XXX"]' ); } } } );
これでトップページのグローバルナビゲーションの上にスライダーが表示されました。設定で『上部固定』になっているので、ドロップナビも表示されません。
ただこのままだと、ほかのページで上部固定になってしまいますので、トップページ以外は「PC用ヘッダー位置」を『ノーマル』になるようにフィルターフックで調整します。
add_filter( 'theme_mod_header-position-lg', function( $value ) { if ( ! is_front_page() ) { return ''; // ノーマル } return $value; } );
トップページだけ(スクロールした際の)ナビゲーションの見え方が異なりますが、私はこれで落ち着きました。
欲を言えば、スクロールしてナビゲーションが停止した時点で、ロゴを小さくしたりできればベターかもしれません。こちらが参考になると思います!
投稿ページに、「<前の記事」「次の記事>」というページャー機能を入れたい
デフォルト機能(上図)を使用せず、独自の投稿前後ナビ(正式名称はposts navigation? Next and Previous Links?)を実装するということであれば、まずこちらを参考にしてみてください。
これって、どうやれば良いんですか? プラグイン?
わたしは、以前から使用している自前のコードを使っていますが、ご希望の機能を持ったプラグイン、ありますよ!
こちらはずいぶん前から存在していて、解説しているブログもたくさんありますので、検索してみてください。
こちらは日本の方が開発しているようですね。
プラグイン用のサイトもありました。 -
投稿者投稿