DRILL LANCER
フォーラムへの返信
-
投稿
-
先述のコードはあくまで「外観」→「カスタマイズ」→「追加CSS」用のコードです。
（↑インラインCSSなので優先度が !important の次に高いです。）最終的に子テーマの style.css に記述する場合は下記のようにしてください。
（↑優先度負けを回避するためです。）/*スライドのタイトル*/ .slide-text-set .slide-text-title { font-size: 3vw; } /*スライドの文章*/ .slide-text-set .slide-text-caption { font-size: 10px; } /*スライドのボタン*/ .slide-text-set .slide .btn-ghost { font-size: 1.3vw; }- タイトル
- 説明文
- ボタン
上記のそれぞれをそれぞれどこに対応させるか訪ねたつもりですが、
期待した回答が得られなかったので対応を変えさせていただきます。下記がスマホでの表示時のそれぞれの部分の文字サイズのデフォルトです。
タイトルの部分はは部分部分で大きさが異なるのでなんとも言えませんが、
（上記質問をした意図はここにあります。）
記事本文は一律で16pxが指定されているようです。/*スライドのタイトル*/ .slide-text-title { font-size: 3vw; } /*スライドの文章*/ .slide-text-caption { font-size: 10px; } /*スライドのボタン*/ .slide .btn-ghost { font-size: 1.3vw; }上記コードを「外観」→「カスタマイズ」→「追加CSS」 に 追記し、
その値を納得がいくまで変更してみてください。vwはデバイスの幅の何％かを示す値で、デバイスの幅に応じて値が変化していくものです。
詳しくは下記ページを熟読してみてください。
https://dev.classmethod.jp/ria/html5/css-length-viewport/検索結果には index.php が使用されています。
WordPress のテーマのテンプレート階層については下記ページが詳しいです。
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4#.E6.A4.9C.E7.B4.A2.E7.B5.90.E6.9E.9C.E8.A1.A8.E7.A4.BAスマートフォンでは、LINEも含めてすべて表示されています。
PCでは表示されていないけどスマホでは表示されているということですね。
ブラウザキャッシュが原因の可能性があるので、念の為普段使用していない別のブラウザで閲覧してみてください。スライドショーの文章の文字の大きさは
- タイトル
- 説明文
- ボタン
の３種類ありますが、それをどこと合わせたいということでしょうか？
P.S.
検証するだけなら、開発者ツールを使っていろいろいじってみれば済む話です。
Google Chrome の開発者ツールでは、下記のことができます。- 要素に効いているCSSコードを１つ１つ着脱可能（左側のチェックボックス）
- 各々のCSSコードの要素や値の変更（クリックすると編集可能に）
- CSSコードの追加（最終要素の少し下をクリックすると表示。慣れないと操作が難しいかも）
PHP のバージョンが古いのが原因と思われます。
PHP のバージョンは最低でも 5.6 が必要で、推奨は 7.2.x or 7.3.x です。WordPress のバージョンが 5.0.4 で止まっているのはその影響でしょうか？最新版は 5.2.2 です。
とりあえず、PHP と WordPress を最新にしてみてください。
また、テーマは zip ファイルをダウンロード後
外観 > テーマ > 新規追加 > テーマのアップロード
とたどることで テーマの zip ファイルをアップロードできます。デバイス幅によって画像の幅が変化します。画像の幅によって文字の大きさが変化します。
つまりは、画像と文字のレイアウトをほぼ画一に保つための処置だと思われます。画像と文字のレイアウトやバランスが崩れても構わないという前提での質問でしょうか？
ギャラリーブロックでは 添付ファイル or メディア 以外にリンク先を選べないみたいですね。
- カラムブロックで３カラムを作ってそのそれぞれのカラムの中に画像を挿入
- それぞれの画像ブロックの画像にリンク先を設定
という感じにすればできると思います。
P.S.
「Ghost Kit」の Grid 機能を使えば多少は簡単にカラム分割が行なえます。アコーディオンとタブはGhost KitやShortcodes Ultimateにあるので、そちらを活用したほうが手間がかからずに済みそうな気がします。
他にもSnow Monkey Blocksというものもありまして、こちらもブロックを追加できます。
HTML や CSS を結合したり圧縮したりすることで多少は表示速度の改善には繋がります。
ただ、「Autoptimize」の場合は逆効果にだった気がするのでおすすめしません。Xサーバーには表示速度を改善するための機能（PageSpeedだったかな？）があると思うのでそれを有効にしてみるのも良いかもしれません。
あとは、下記コードを functions.php に追加すると多少はマシになると思います。
（プラグインによってはエラーが出る場合があります。その場合は代替のプラグインを探しましょう。）/** * レンダリングブロックしているJavascriptの読み込みを遅らせる by 寝ログ * https://nelog.jp/header-js-to-footer */ function move_scripts_head_to_footer_ex() { // ヘッダーのスクリプトを取り除く. remove_action( 'wp_head', 'wp_print_scripts' ); remove_action( 'wp_head', 'wp_print_head_scripts', 9 ); remove_action( 'wp_head', 'wp_enqueue_scripts', 1 ); // フッターにスクリプトを移動する. add_action( 'wp_footer', 'wp_print_scripts', 5 ); add_action( 'wp_footer', 'wp_print_head_scripts', 5 ); add_action( 'wp_footer', 'wp_enqueue_scripts', 5 ); } add_action( 'wp_enqueue_scripts', 'move_scripts_head_to_footer_ex' );P.S.
来年あたりから 5G が出てきて、回線速度がかなり早くなるので、表示速度を気にするのは 5G が普及するまでで良いかもしれません。まだ、フォーラムには投稿されていないようようなので・・・
BS3 から BS4 への移行は下記サイトが参考になると思います。
https://cccabinet.jpn.org/bootstrap4/下記CSSの
#f9f9f9の部分を変更して子テーマのCSSに追加すればOKだと思います。@media (min-width: 992px) { .siteHeader .headerTop { background-color: #f9f9f9; } }ロリポップのアップロードサイズは下記記事を参考に作業すれば変更できると思います。
下記を実行してみてはいかがでしょうか？
- VWSオンラインコミュニティーで Slack への招待を要請する
- 無事に Slack に招待されたら Slack にアクセスし、「開発状況と日報など」を見てそこからDLする。
GitHubの方は開発者や知識がある方向けのものなので、Slackから落とすほうが良いでしょう。
それに Pro 版相当にするのにもかなりの知識が必要です。Slackの方は Lightning Pro 相当のものがそのまま置かれていて
Pro版では専用の更新モジュールが同梱されているので
ライセンスキーさえ入力していればそのうち正式版に切り替わると思います。β版からβ版へのアップデートはテーマ削除→テーマのインストールの作業が必要です。
しかし、「Easy Theme and Plugin Upgrades」を使えば上書きインストールが可能になります。P.S.
Fort の BS4 版の調整が行われているようです。（Slackから得た情報）
