フォーラムへの返信
-
@キタジマ さん
display: none; 以外の方法で対処するのが理想です。
ご教示ありがとうございます。
コードを試した感じ、今度は画像ブロックの入った別タブのフッターにかなりの余白が出現してしまいました。@es さん
私の環境では、キタジマさんのコードでは反対に2番目のタブ側のフッター下段の余白が
大きく下に伸びてしまいましたが、そうなんです。この現象が発生しました。
ご提示のコード（以下）で解消されました。.smb-tabs[data-match-height=false]>.smb-tabs__body>.smb-tab-panel[aria-hidden=true] { position: fixed; }タブ内に別のブロックを使うことで症状が発生するか検証していませんが、現状で解消されました。
@es さんありがとうございます。
@キタジマ さん。解消方法は得られましたが、引き続き試していただけると幸いです。
トピックは@キタジマ さんの回答後に閉じようと思います。いいねをした人:
最新の投稿を呼び出してスライドさせることができず困っております。
参考になるかわかりませんが、私がもし“最新の投稿”をSwiperを使ってスライダーにする場合は？として考えてみました。
my-snow-monkey.phpに必要なもの（SwiperのCSS、JSなど）をエンキュー（wp_enqueue_scripts）する- 最新の投稿をSwiperに最適になるように作成しつつ、ショートコードで呼び出せるようにする（
add_shortcode） - 表示させたい場所にショートコードブロックを置いて表示
こんな感じで実装すると思います。
1.のエンキューは@藤田さんが提示されたブログ記事に書かれています
2.はこちらの記事がわかりやすいと思います。
3.は2.で作成したショートコードを【ショートコードブロック】で入れるだけです。
管理画面でスライダーは確認できませんが、この方法なら比較的簡単かと思います。
また別の方法として【クエリーループブロック】を使うと、以下のような構造のHTMLを出力してくれるので、これにSwiperのCSSとJSを当ててあげれば実装できそうです。<div class="wp-block-query"> <ul> <li> <figure> <a href="//記事URL"> <img src="//アイキャッチ画像URL"> </a> </figure> </li> <li> <figure> <a href="//記事URL"> <img src="//アイキャッチ画像URL"> </a> </figure> </li> </ul> </div>いいねをした人:
アップされている動画が1280×720（縦型）になっているので不可能だと思います。
URLに掲載されている動画を1つダウンロードしてみましたが230MBありました。
動画ファイルは容量も大きいため、縦動画のままYouTubeにアップしてエンベッドしたほうが良いように思います。いいねをした人:
試されている
.single-post .c-entry__title { display: none; }こちらで非表示になると思いますが、CSSはどこに記述されていますか？
また、URLをご提示されると的確なアドバイスがもらえると思います。いいねをした人:
ちなみに、やはり情報ブロックをスマホでも横並びで表示することはできないのでしょうか。
既に情報ブロックで作成しているので、横並びにできればそれで解決なのですが、、、すでに作成済みということでしたか。
ベストな方法かわかりませんが、スマホで横並び＋見やすくする方法のひとつになります。
情報ブロックの右メニュー［スマートフォンでカラムを分割しない］のトグルはオフにして、［追加 CSS クラス］にsampleを記述して以下のCSSを追加。.wp-block-snow-monkey-blocks-information.sample { overflow-x: scroll; } .wp-block-snow-monkey-blocks-information.sample .smb-information__body { min-width: 900px; /* 見やすいような任意の数値 */ }こうするとPCのそれに近い感じの情報ブロックになると思います。
お試しくださいませ。いいねをした人:
/* ニュース-レイアウト-テキストの体裁 */ @media screen and (min-width: 980px) { section { padding-bottom: 1%; } @media screen and (min-width: 1355px) { /* 社史ページトップ画像部分 */ @media screen and (min-width:1081px) { .top-on-botan1 { cursor: pointer; display:flex; position: absolute; justify-content: center; align-items: center; bottom: 3%; left: 10%; max-width:450px } @media screen and (min-width:641px) and (max-width:1080px) {いくつか閉じられていないメディアクエリがあるようです。
いいねをした人:
Smart Slider 3をインストールしてダッシュボードを見たところ、
font-familyを直接入力する感じになっていましたが、効かないんでしょうか。
CSSで解消するなら.n2-ss-text p[class^="n2-font-"] { font-family: "游明朝","Yu Mincho",YuMincho, serif !important; }でどうでしょうか。
該当箇所のクラス名がn2-font-6253f018e234be3b02a6e91ef76a14d1-paragraphで、スライドの管理用の名前（日本語が変換されてる？）がついていると思われますので、変化のなさそうな前方一致でfont-familyを当ててます。いいねをした人:
ちなみにですが、ちらつく問題の根本的な解決というのは難しいのでしょうか…？
やむなし、といった理解となるかについても教えていただけたらと思います。Snow Monkeyのフォーラムで回答する内容でもなく、専門家でないので確実なことはわかりませんが、フォントを提供しているサーバー環境やサイトの環境、閲覧環境などで変わると思います。
日本語のフォントはデータが重いので、致し方ないと思いますが・・・。
Adobeのフォントを紹介しているコンテンツでさえ、一瞬既存フォントが表示されますね（笑）
ドメインを調べたらConoHaを使われているようなので、ConoHaが提供しているWebフォントサービス（フォントはモリサワ）の「秀英丸ゴシック」が近い丸ゴシックなので、こちらも試されてはいかがでしょうか。
話は逸れますが、モリサワのフォントのいくつかがAdobe フォントで提供されなくなったことが話題になりました。今回お使いのフォントはモリサワではなくFONTWORKSですが、仮に「筑紫A丸ゴシック」が提供停止になると、当然使用できなくなりますので、クライアントにも事前にご理解いただく必要があります。
クライアントから「筑紫A丸ゴシック」でないとダメ！という場合は、こうしたリスクを避けるためにもAdobeではなく、「筑紫A丸ゴシック」を提供しているFONTWORKSが運営している 有料のFONTPLUSを利用するのが妥当だと思います。
表示もそこそこ速いですし（経験値）
お試し版もあるようなので、ぜひ（まわし者ではありません）
私自身が思う根本的な解決方法ですが・・・
Webフォントを使わないことです。
どうしても使う場合は- 読み込みが終わるまでローディング画面を表示
- ファーストビューの領域に文字を使わない（ナビゲーションはハンバーガーにしまう）
- そういうものだと理解してもらう（汗）
技術的な改善策は @まさとし さんがすでに試されている方法など、いろんなブログなどで紹介されているとおりです。
すべてパーフェクト（技術、コスト、ライセンス etc…的に）は難しいので、どこに重点を置くかで対応方法が見出だせるのでは？と思います。
それと最後に。
書体にこだわるようであれば、見出し（h2、h3など）には、ツメ組み（文字詰め）ができるfont-feature-settings: "palt";を設定することをオススメします。
※使えないフォントもあります。いいねをした人: 居ません
