
お世話になっています。
WordPressのLightningを使って自社サイトを作成中ですが、ご存じのようにブロックエディターに入力する文章の「両端揃え」機能はありません。
いろいろとサイトネイで検索し、Advanced Editor Tools (旧TinyMCE Advanced)をインストールして「両端揃え」機能をドラッグ追加すれば両端揃え表示ができるような説明があったので試みてみました。しかしながらブロックエディターは元々の3機能(左・右・中央寄り)のみしかなく「両端揃え」機能は追加されません。
その他、「CSSの”text-align”プロパティで、”justify”を指定すれば揃います。」との有難い案内サイトも見つけましたがどのページで「text-align: justify;」と「text-justify: inter-ideograph;」の2つを指定・設定できるのか、具体的には説明がありません。
恐れ入りますがご存じの方がいましたらご教示の程お願いいたします。
No.5
- 回答日時:
すません、訂正します。
何故ならないのか原因がわかりました。
はじめに「+」から段落を選び、文章を入力していくかと思いますが、その時に、「左(右)寄せ」もしくは「中央寄せ」を1度でも押すと
その設定の方が強い為に、両端揃えのCSSを無視するようです。
なので、そのCSSで両端にしたいのであれば、
文章を入力したら、とくに寄せる指定を一切しなければ良い
と言う事になります。
一度、WINのアクセサリのメモ帳などに文章をいったんコピーし
もう一度、固定ページに張り付ければ
たぶんそうなるかと思います。
あとは旧入力エディターを使用するのが初心者には早い気もしますが
今は新エディター推奨になりつつあるので、あまりおすすめしないかもしれません。
当方10年以上WEB制作に関わっておりますが
あまり、文章の末尾のズレを気にするクライアントに出会った事が今までありません・・(場所により気になる箇所は確かにありますが)
その他のWEBサイトを閲覧していても、普通は左寄せか、中央かが一般的かと思いますが・・・・
最終的には気にしないっていうのも一つの解決法に思われます。。
ご返答有難うございます。
一度段落から文章をコピーし、その段落を削除して新たに「+」から段落を選び文章を貼り付けても状況は変わりませんでした。人気がありユーザーの多いLightningもやはり完璧な設定は難しいのかもしれません。それでも有料のテンプレートなわけではないので有難い方ですね。
確かに文章も末尾のズレは気にしても仕様がないのですが、仕事柄レポートなどを提出する際に「両端揃え」は基本と暗黙の了解のようなものがあったので習慣となってしまっていました。編集関連に携わっている人も同じようでサイトでの相談もいくつも上がっているようです。
画像などを挿入しましたらあまり気にならない程度となったようですのでこれ以上追いかけても仕様がないですね。読み手は気にしないとも思います。
お騒がせ、そしてお手数お掛けしまして申し訳ありませんでした。
継続して準備を進めたいと思いますので以降とも宜しくお願い申し上げます。
PS: ちなみにスクリーンショット(切取り&スケッチ)でも貼り付けられず画像は送れないようです。どうやって送るのでしょうか?
No.4
- 回答日時:
追加CSSに、先にフッターを消すCSSがあれば、その下か上に付け加えてOKです。
(質問者様のやった方法で大丈夫です)が、本当になっていませんか?
もし可能であれば、そのスクリーンショットを添付してください。
文字の後半部分だけ見えればOKです。
確認ですが、「両端揃え」の意味ですが、下記の例文のように
末尾の「え」が飛び出てるのをそのCSSで微調整して「お」の位置と同じにすると言う意味になります。
最後の行の「あうううううう。」は両端揃えにはなりません。
----------------------------------------------------------
あいうえおあいうえおあいうあい、うえおあいうえお
あいうえおあいうえおあいうえおあいうえ.おあいうえ
あいうえおあいうえおあいうあい、うえおあいうえお
あいうえおあいうえおあいうえおあいうえ.おあいうえ
あいうえおあいうえおあいうあい、うえおあいうえお
あうううううう。
----------------------------------------------------------
そのCSSを追加で段落行は全て揃うと思いますよ。
一見すると、揃っているように見えてないだけかもしれません
確認してください。
No.3
- 回答日時:
その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) }
何か他の設定が影響しているのでしょうか。
引き続き解決に向けたアドバイスをお願い申し上げます。
No.2
- 回答日時:
以下、参考までに・・・
反映されるかどうかは不明ですが、プラグインのClassic Editorを使えばブロックエディターではなく、旧来のエディターを使う事が出来ます。
https://ja.wordpress.org/plugins/classic-editor/
私はブロックエディターが使いにくく、こちらで編集をしています。
度々有難うございます。
試してみましたがスライド画像など新しいブロックエディターの機能が使えなくなってしまうのでやはり難しいと思います。
自身でももう少し模索してみたいと思います。
アドバイス有難うございました。
No.1
- 回答日時:
ダメ元ですが・・・多分。
ダッシュボード→外観→カスタマイズ
追加CSSで、左側に追加CSSを記述するスペースが表示されます。
ここに提示された2行
text-align: justify;
text-justify: inter-ideograph;
を書き込めば、元のCSSよりこちらを優先されるはずです。
この追加CSSは失敗しても削除すれば元通りですから、気楽に出来ます。
ご返答有難うございます。
早速試してみましたが、残念ながらブロックエディター内には反映されていませんでした。
ご提案大変有難うございます。
継続して模索してみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームぺージの移管について。...
-
ブログの画像サイズについて。...
-
ブログのプレビュー画面が表示...
-
ホームページで集客する場合た...
-
外国人のコメント欄でよく、コ...
-
Googleアドセンス
-
WooCommerceでの配送方法
-
ワードプレスCocoonで作ったペ...
-
ワードプレスアドレスの固定ペ...
-
ワードプレスは、ドメイン作った後
-
ワードプレスでドメイン2つも作...
-
ホームページ制作の単純な無料...
-
サーバーについて
-
ホームページ制作とコーティング
-
1つのサーバー契約で複数のドメ...
-
ワードプレスのプラグイン
-
Adobe Express(アドビエクスプ...
-
ワードプレステーマkatawaraのCSS
-
ワードプレスのテーマ:katawara
-
ホームページやブログに関しま...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
おすすめ情報
画像の送信方法が分かりました。ご教示くださいまして有難うございます。
ご覧の通り仏語ページの右側は不揃いなのでなんとか修正したいと思っております。
編集画面表示と更新後のプレビュー表示の違いです。
繰り返しになりますが添付を見ていただければなんとなく状況はご理解いただけるかと思います。資料を1枚にまとめていますが上下左右すべてここにスクリーンショットして貼り付けたものです。上下は同じページですが貼り付けた画像の大きさはバラバラです。
①。例えば編集ページで画像上にテキストを入れて右下に置いてもプレビューページでは中央右側に置かれてしまっています。
②各文節の「両端揃え」設定ができていないのも見てご理解いただけるかと思いますが、何故か2カラムの左側文節部分は設定していないのの「両端揃え」のように表示されています。
「両端揃い」で右側も希望通りに揃っています。
特に編集に関しては外国語の単語は日本語などと異なり「両端揃え」は必須に感じていますが設定も大変ですね。
7:3の2カラム部分も設定通りに反映されています。ご迷惑おかけしてしまい申し訳ありませんでした。大変助かっております。