対馬 俊彦
フォーラムへの返信
-
投稿
-
たぶん…
枠線ボックスがコンテナ幅いっぱいに表示されるため、
画面幅が大きい端末で表示したときに間延びしたかんじになるので、
その見た目をなんとかしたいということなのだと推測します。
ご質問の意図には沿いませんが、やはり CSS で調整するのがよいと思います。
以下、CSS を使った調整例です。
1. グループブロックの 追加 CSS クラス に
mw-800を指定する。2. 以下の CSS を追加する。
.mw-800 { max-width: 800px; margin-left: auto; margin-right: auto; }3. グループブロックに枠線ボックスを入れる。
800の部分をお好みで調整してください。このやり方は枠線ボックス以外のブロックにも使えて汎用性があります。
最初の たぶん… の通りであれば、これでご希望に近い結果になるのではないかと。
【以下、追記です】
追加 CSS クラス を毎回指定するのが面倒であれば、上記のやり方で作った組み合わせパターンを VK ブロックパターン に登録しておくとよいです。
枠線ボックス自体の幅を80%指定した上でセンタリング
それに近いことは、枠線ボックスの 追加 CSS クラス に
w-75と指定すればできます。
たぶん、これがいちばんお手軽なやり方だと思いますが、
このやり方は w-25 w-50 w-75 w-100 の4つしかバリエーションがありません。https://getbootstrap.jp/docs/4.1/utilities/sizing/
カラムブロックを使うなら、3カラムにしてそれぞれのカラム幅を
10% 80% 10%
と指定して、2番目のカラムに枠線ボックスを入れればできそうです。【追記】カラムブロックだと画面幅によっては期待通りにならないですね。
ブレークポイントごとに幅を指定できたり…
ブロックの複合利用でそれができるかどうかよくわかりませんが、
できたとしても、裏技・力技的で、用途が限定的になる予感がします。ブレークポイントのことまで考えるなら、CSS で調整する方が結果的に楽ができると思います。
実際のページを見てみないとはっきりわかりませんが…
たぶん、ご質問者が非表示にしたい部分はキャプションではなく、画像ブロックの下マージンだと思います。WordPress では画像ブロックに 1em の下マージンが設定されていますので、それが見えているのではないでしょうか。
もしそうだとすると、以下の CSS で消せます。
.vk_slider_item_container .wp-block-image { margin-bottom: 0; }「Chrome 画像 ぼやける」
「Edge 画像 ぼやける」
でググると関連しそうな情報や解決方法がヒットします。ブラウザが画像を縮小表示するときのレンダリングに起因する現象みたいです。
いま確認してみたところ、1枚目・2枚目のアイキャッチ画像を出力している HTML は同一です。
なので、WordPress 側の問題ではないと考えます。私のデスクトップパソコンでは同じに見えましたが、
解像度 1366×768 のノートパソコンで表示したところ、2枚目の画像がぼやけて見えます。たぶん、パソコン側の処理に起因する現象ではないでしょうか。
参考情報です。
ご質問者がアップされた 1920*1280 の画像 22587773_m-1.jpg で私のサイトでも試してみました。
投稿リストを置いた固定ページはこちら ↓ です。
私のパソコンの Chrome / Edge で表示すると、1枚目・2枚目のアイキャッチ画像は同じように見えています。
ご質問者のパソコンではこの固定ページはどう見えていますか？
横からすみません。
石川さん、お気づきかもしれませんが、念のため報告させていただきます。
VK Blocks Pro 1.16.4 にアップデートしたら、VK ボタン ブロックで以下の問題も起きています。
* VK ボタン ブロックを追加すると、ボタンの色がついていない状態になる。このとき、ボタンの色は標準色の Primary に設定されている。
* 他の色（例：標準色の Success) を選ぶとボタンに色がつくが、そのページの編集画面を再度開くとボタンの色が標準色の Primary に変わってボタンの色が消えてしまう。
たぶん、JetPack というプラグインが原因だと思います。
このプラグインを停止して表示不具合が解消するのであれば、
「wordpress 画像 表示されない i1.wp.com」でググってみると、
関連していそうな情報や対策が見つかると思います。有料版のプラグインだと10,000円前後かかるので、1回きりのインポートのための出費としてはモッタイナイ気がしていましたが、費用を抑えることができてよかったです。
インポートがうまくいったら、モジュール版 (CGI版より高速) に戻しておくといいですよ。
念のため、補足します。
ロリポップの方の変更は出来ないのですね～
ロリポップの ライトプラン または スタンダードプラン であれば、CGI 版 PHP を選ぶことができるので、うなこさんが提示されたページに書かれている手順で最大アップロードサイズを増やすことができます。
横からすみません。
最近ロリポップで利用者が増えていそうな ハイスピードプラン だと、Litespeed 版 PHP に固定されていて php.ini の設定ができないので、最大アップロードサイズを 100MB から変更できません。
All-in-One WP Migration の Unlimited Extension ($69～) を購入すれば、100MB を超えるデータをインポートできるようになります。
https://import.wp-migration.com/ja/
他に方法があるかもしれませんが、私は Unlimited Extension を使ってインポートしました。
Lightning Advanced Unit という古いプラグインが入っているようなので、これを止めてみれば解決するかもしれません。
Lightning G3 の 前の記事・次の記事 の表示タイプは カード（インテキスト）で、画像を非表示にすると高さがなくなってしまうので、ご質問のような結果になってしまいます。
ご質問者以外にも Lightning G3 の 前の記事・次の記事 のレイアウトやデザインを変更したい方がいらっしゃると思いましたので、この部分のカスタマイズのやり方の例を記事にしてみました。
フックで指定できるオプションも一覧にまとめてありますので、ご参考にどうぞ。
たしかに、固定ページや投稿でキャッチフレーズの部分を書き換えできるといいですね。
興味があったので、調べてみました。
■■■ ① キャッチフレーズの書き換えについて ■■■
/wp-content/themes/lightning-pro/inc/header-top/package/class-lightning-header-top.php
の390行目あたりの以下の行をカスタマイズすればキャッチフレーズを別のものにできました。
$header_prepend .= '<p class="headerTop_description' . $text_center . '">' . get_bloginfo( 'description' ) . '</p>';例えば、この行を以下のように書き換えれば 抜粋 が H1 で囲まれて表示されます。
$header_prepend .= '<h1 class="headerTop_description' . $text_center . '">' . get_the_excerpt() . '</h1>';ただし、テーマのアップデートで上書きされる可能性があります。
この部分にフィルターフックがあるとうれしいですね。
■■■ ② SEO 対策として ■■■
スマホで表示したときにはキャッチフレーズが表示されませんので、たぶん、Google のようなモバイルファーストインデックスの検索エンジンはキャッチフレーズを認識してくれないと思います。
SEO 対策として行うのであれば、スマホでもキャッチフレーズが表示されるように CSS を追加する必要があるかもしれません。
■■■ ③ 固定ページの見出しのタグについて ■■■
以下のフックで固定ページのページタイトルを囲むタグを <h1> から <div> に置き換えできます。
add_filter( 'lightning_pageTitHtml', 'my_lightning_pageTitHtml' ); function my_lightning_pageTitHtml($pageTitHtml) { if ( is_page() ){ $pageTitHtml = str_replace('<h1', '<div', $pageTitHtml); $pageTitHtml = str_replace('</h1>', '</div>', $pageTitHtml); } return $pageTitHtml; }■■■ ④ こうやったらよいのでは ■■■
① のキャッチフレーズ書き換えはフックが使えないので、やらない方が無難だと思います。
③ で見出しを囲むタグを <div> に書き換えた上で、本文の先頭に H1 の見出しを置くのがよいのではないかと…
上記の中で間違っている部分があるかもしれません。お気づきの方はご指摘ください。
