WordPress - Lightningの文章表示を両端揃えにする方法は？

お世話になっています。

WordPressのLightningを使って自社サイトを作成中ですが、ご存じのようにブロックエディターに入力する文章の「両端揃え」機能はありません。

いろいろとサイトネイで検索し、Advanced Editor Tools (旧TinyMCE Advanced)をインストールして「両端揃え」機能をドラッグ追加すれば両端揃え表示ができるような説明があったので試みてみました。しかしながらブロックエディターは元々の3機能(左・右・中央寄り)のみしかなく「両端揃え」機能は追加されません。

その他、「CSSの”text-align”プロパティで、”justify”を指定すれば揃います。」との有難い案内サイトも見つけましたがどのページで「text-align: justify;」と「text-justify: inter-ideograph;」の２つを指定・設定できるのか、具体的には説明がありません。

恐れ入りますがご存じの方がいましたらご教示の程お願いいたします。

質問者からの補足コメント

• 画像の送信方法が分かりました。ご教示くださいまして有難うございます。

  
  No.6の回答に寄せられた補足コメントです。 補足日時：2021/09/26 10:58

• ご覧の通り仏語ページの右側は不揃いなのでなんとか修正したいと思っております。

  
  No.7の回答に寄せられた補足コメントです。 補足日時：2021/09/26 12:37

• 編集画面表示と更新後のプレビュー表示の違いです。

  
  No.8の回答に寄せられた補足コメントです。 補足日時：2021/09/26 14:58

• 繰り返しになりますが添付を見ていただければなんとなく状況はご理解いただけるかと思います。資料を1枚にまとめていますが上下左右すべてここにスクリーンショットして貼り付けたものです。上下は同じページですが貼り付けた画像の大きさはバラバラです。
  
  ①。例えば編集ページで画像上にテキストを入れて右下に置いてもプレビューページでは中央右側に置かれてしまっています。
  ②各文節の「両端揃え」設定ができていないのも見てご理解いただけるかと思いますが、何故か2カラムの左側文節部分は設定していないのの「両端揃え」のように表示されています。

  
  No.12の回答に寄せられた補足コメントです。 補足日時：2021/09/27 09:29

• 「両端揃い」で右側も希望通りに揃っています。
  
  特に編集に関しては外国語の単語は日本語などと異なり「両端揃え」は必須に感じていますが設定も大変ですね。
  
  7:3の２カラム部分も設定通りに反映されています。ご迷惑おかけしてしまい申し訳ありませんでした。大変助かっております。

  
  No.14の回答に寄せられた補足コメントです。 補足日時：2021/09/27 11:28

No.5 回答者： nana_coco 回答日時： 2021/09/26 00:17

すません、訂正します。

何故ならないのか原因がわかりました。
はじめに「＋」から段落を選び、文章を入力していくかと思いますが、その時に、「左（右）寄せ」もしくは「中央寄せ」を1度でも押すと
その設定の方が強い為に、両端揃えのＣＳＳを無視するようです。

なので、そのＣＳＳで両端にしたいのであれば、
文章を入力したら、とくに寄せる指定を一切しなければ良い
と言う事になります。

一度、WINのアクセサリのメモ帳などに文章をいったんコピーし
もう一度、固定ページに張り付ければ
たぶんそうなるかと思います。

あとは旧入力エディターを使用するのが初心者には早い気もしますが
今は新エディター推奨になりつつあるので、あまりおすすめしないかもしれません。

当方10年以上WEB制作に関わっておりますが
あまり、文章の末尾のズレを気にするクライアントに出会った事が今までありません・・（場所により気になる箇所は確かにありますが）
その他のWEBサイトを閲覧していても、普通は左寄せか、中央かが一般的かと思いますが・・・・
最終的には気にしないっていうのも一つの解決法に思われます。。

この回答へのお礼

ご返答有難うございます。

一度段落から文章をコピーし、その段落を削除して新たに「＋」から段落を選び文章を貼り付けても状況は変わりませんでした。人気がありユーザーの多いLightningもやはり完璧な設定は難しいのかもしれません。それでも有料のテンプレートなわけではないので有難い方ですね。

確かに文章も末尾のズレは気にしても仕様がないのですが、仕事柄レポートなどを提出する際に「両端揃え」は基本と暗黙の了解のようなものがあったので習慣となってしまっていました。編集関連に携わっている人も同じようでサイトでの相談もいくつも上がっているようです。

画像などを挿入しましたらあまり気にならない程度となったようですのでこれ以上追いかけても仕様がないですね。読み手は気にしないとも思います。

お騒がせ、そしてお手数お掛けしまして申し訳ありませんでした。

継続して準備を進めたいと思いますので以降とも宜しくお願い申し上げます。

PS: ちなみにスクリーンショット(切取り&スケッチ)でも貼り付けられず画像は送れないようです。どうやって送るのでしょうか？

お礼日時：2021/09/26 00:43

No.4 回答者： nana_coco 回答日時： 2021/09/25 23:41

追加CSSに、先にフッターを消すCSSがあれば、その下か上に付け加えてOKです。

（質問者様のやった方法で大丈夫です）

が、本当になっていませんか？
もし可能であれば、そのスクリーンショットを添付してください。
文字の後半部分だけ見えればＯＫです。

確認ですが、「両端揃え」の意味ですが、下記の例文のように
末尾の「え」が飛び出てるのをそのＣＳＳで微調整して「お」の位置と同じにすると言う意味になります。
最後の行の「あうううううう。」は両端揃えにはなりません。
----------------------------------------------------------
あいうえおあいうえおあいうあい、うえおあいうえお
あいうえおあいうえおあいうえおあいうえ.おあいうえ
あいうえおあいうえおあいうあい、うえおあいうえお
あいうえおあいうえおあいうえおあいうえ.おあいうえ
あいうえおあいうえおあいうあい、うえおあいうえお
あうううううう。
----------------------------------------------------------
そのCSSを追加で段落行は全て揃うと思いますよ。
一見すると、揃っているように見えてないだけかもしれません
確認してください。

No.3 回答者： nana_coco 回答日時： 2021/09/25 20:15

そのCSSを追加で合っていますよ。

少しくくり方が足りないですけど、
試しに自分のサイトで下記CSSを、追加CSSに加えました。


p {
text-align: justify;
text-justify: inter-ideograph;
}

すると添付画像のように、改行がある行の右側が全部揃いました。
が、これだと<p></p>でくくられた部分にしか、適用しませんので
もしかしたら意図しない場所で両端揃えになる可能性はあります。

この回答へのお礼

nana_cocoさん、大変お世話になっております。

アドバイス有難うございます。ご指示通りに追加CSSページにp { と } も加えてみましたが各ページには反映されませんでした。 ブロック作成時に表示される各機能アイコンにも「両端揃え」は加えられていませんでした。

追加CSSページには今回加えたCSSコード以外に各ページ下に表示されていた「By Lightning……」の表示を削除するCSSコードを入れていますが、これが影響している可能性もあるのでしょうか。

(1) .site-footer-copyright p:nth-child(2) {
(2) display:none;
(3) }

ですので今回追加したCSSコードのp｛ は4行目(4項目目とでも言えばよいのでしょうか)より入り ｝ は7行目に入力されています。

(4) p {
(5) text-align: justify;
(6) text-justify: inter-ideograph;
(7) }

何か他の設定が影響しているのでしょうか。

引き続き解決に向けたアドバイスをお願い申し上げます。

お礼日時：2021/09/25 21:10

No.2 回答者： タマタマポチ 回答日時： 2021/09/25 11:48

以下、参考までに･･･

　
反映されるかどうかは不明ですが、プラグインのClassic Editorを使えばブロックエディターではなく、旧来のエディターを使う事が出来ます。
　
https://ja.wordpress.org/plugins/classic-editor/
　
私はブロックエディターが使いにくく、こちらで編集をしています。

この回答へのお礼

度々有難うございます。

試してみましたがスライド画像など新しいブロックエディターの機能が使えなくなってしまうのでやはり難しいと思います。

自身でももう少し模索してみたいと思います。

アドバイス有難うございました。

お礼日時：2021/09/25 13:56

No.1 回答者： タマタマポチ 回答日時： 2021/09/25 11:21

ダメ元ですが･･･多分。

　
ダッシュボード→外観→カスタマイズ
追加CSSで、左側に追加CSSを記述するスペースが表示されます。
ここに提示された2行
　
text-align: justify;
text-justify: inter-ideograph;
　
を書き込めば、元のCSSよりこちらを優先されるはずです。
この追加CSSは失敗しても削除すれば元通りですから、気楽に出来ます。

この回答へのお礼

ご返答有難うございます。

早速試してみましたが、残念ながらブロックエディター内には反映されていませんでした。

ご提案大変有難うございます。

継続して模索してみたいと思います。

お礼日時：2021/09/25 11:37