複数行を含む段落ブロックを行頭を揃えて右端に配置するやり方
2025.11.9
ノーコードで配置するやり方を追加しました。
文章の最後などで、以下のような日付・名前の行を含む段落ブロックを右端に配置したいことがあります。
2025年7月29日
魚沼情報サービス 対馬 俊彦
WordPress のブロックエディターで テキスト右寄せ にするとこうなります。
2025年7月29日
魚沼情報サービス 対馬 俊彦
これでもまぁ悪くはないし、かんたんでよいのですが、以下のように行頭を揃えて、なおかつきっちり右端に配置すると見た目がよくなります。
2025年7月29日
魚沼情報サービス 対馬 俊彦
上記のようにレイアウトするやり方を紹介します。
複数行を含む段落ブロックを行頭を揃えて右端に配置する
手順① CSS を追加
子テーマの style.css などに以下の CSS を追加します。
.name-on-right {
width: fit-content;
margin-left: auto;
}手順② 追加 CSS クラス を入力
段落ブロックの 追加 CSS クラス に name-on-right と入力します。
段落ブロック単体で、しかもかんたんな CSS でレイアウトできましたね😊
2025.11.9 CSS を書かずに配置できるやり方がありましたので、以下に追加します。
複数行を含む段落ブロックを行頭を揃えて右端に配置する（ノーコード）
- 段落ブロックを横並びブロックに入れる。
- 横並びブロックのレイアウトを右揃えにする。
サイト運営者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2026年1月20日スターターパックのテーブルに流れ（フロー）②のスタイルを追加しました
WordPress2026年1月19日スターターパックのテーブルに流れ（フロー）のスタイルを追加しました
WordPress2026年1月13日スターターパックのアコーディオンのデザインを追加しました
WordPress2025年12月26日スターターパックのトップページの新着表示のデザインが増えました
WordPress のトラブル解決・設定・カスタマイズ
ベクトル公式テクニカルパートナー
があなたをお手伝いします
Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。
PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。
