wordpressで空間を開けずにリンク等を右寄せする方法
こんにちは、木崎です。
急いでいる人への結論
右寄せしたい要素をインライン要素Aで囲み、Aのdisplay要素をblock要素にcssでする。
なんにも考えずに実装したい方へ
【本文】
wordpressで記事を書いていると、一部右寄せしたいなと思う事がよくあると思います。丁度上に記述した、「なんにも考えずに実装したい方へ」のように
これを実装します。
とても簡単なので誰でもできますよ。
べースはこんな感じ
<!--☆☆☆☆☆☆☆☆☆☆投稿欄に記載した内容☆☆☆☆☆☆☆☆☆☆--> ほにゃらららほにゃらららいや <a>右寄せリンク</a>
<!--☆☆☆☆☆☆☆☆☆☆成型されたhtml☆☆☆☆☆☆☆☆☆☆☆☆--> <p> ほにゃらららほにゃらららいや <br> <a>右寄せリンク</a></p>
――――――――――――――――――――――――――
【実際の表示】
ほにゃらららほにゃらららいや
右寄せリンク
――――――――――――――――――――――――――
とりあえず考えるのは右寄せしたいその要素自体に、text-align: right;をつける事だと思いますがそれだとうまくいきません。
<!--☆☆☆☆☆☆☆☆☆☆投稿欄に記載した内容☆☆☆☆☆☆☆☆☆☆--> ほにゃらららほにゃらららいや <a style=" text-align: right;">右寄せリンク</a>
<!--☆☆☆☆☆☆☆☆☆☆成型されたhtml☆☆☆☆☆☆☆☆☆☆☆☆--> <p>ほにゃらららほにゃらららいや<br> <a style=" text-align: right;">右寄せリンク</a></p>
――――――――――――――――――――――――――
【実際の表示】
ほにゃらららほにゃらららいや
右寄せリンク
――――――――――――――――――――――――――
そこで良く紹介されるのが親要素に、text-align: right;をつける事なのですが、これp要素やdivに特別padding-bottom等をつけていると間があいてしまってうまくいきません。
かといってここだけpadding変えたりするのもめんどくさいです。
<!--☆☆☆☆☆☆☆☆☆☆投稿欄に記載した内容☆☆☆☆☆☆☆☆☆☆--> ほにゃらららほにゃらららいや <div style=" text-align: right;"><a >右寄せリンク</a></div>
<!--☆☆☆☆☆☆☆☆☆☆成型されたhtml☆☆☆☆☆☆☆☆☆☆☆☆--> <p>ほにゃらららほにゃらららいや</p> <div style=" text-align: right;"> <a>右寄せリンク</a> </div>
――――――――――――――――――――――――――
【実際の表示】
ほにゃらららほにゃらららいや
――――――――――――――――――――――――――
やっぱり間があいてしまいます。この自動整形機能よかったり悪かったりしますよね。
なので、周りに影響を与えないであろうspan要素で挟みます。しかし挟むだけだと右にはいってくれません。
<!--☆☆☆☆☆☆☆☆☆☆投稿欄に記載した内容☆☆☆☆☆☆☆☆☆☆--> ほにゃらららほにゃらららいや <span style=" text-align: right;"><a >右寄せリンク</a></span>
<!--☆☆☆☆☆☆☆☆☆☆成型されたhtml☆☆☆☆☆☆☆☆☆☆☆☆--> <p>ほにゃらららほにゃらららいや<br> <span style=" text-align: right;"> <a>右寄せリンク</a> </span></p>
――――――――――――――――――――――――――
【実際の表示】
ほにゃらららほにゃらららいや
右寄せリンク
――――――――――――――――――――――――――
これはスパンがインライン要素であるため、インライン要素の中のインライン要素を右寄せなんてできないのです。
そこでspan要素をブロック要素に変えます。
<!--☆☆☆☆☆☆☆☆☆☆投稿欄に記載した内容☆☆☆☆☆☆☆☆☆☆--> ほにゃらららほにゃらららいや <span style=" text-align: right; display: block; "><a >右寄せリンク</a></span>
<!--☆☆☆☆☆☆☆☆☆☆成型されたhtml☆☆☆☆☆☆☆☆☆☆☆☆--> <p>ほにゃらららほにゃらららいや<br> <span style=" text-align: right; display: block; "> <a>右寄せリンク</a> </span></p>
――――――――――――――――――――――――――
【実際の表示】
ほにゃらららほにゃらららいや
右寄せリンク
――――――――――――――――――――――――――
無事出来ましたね。
いちいちタグに要素を書くのはめんどくさいのでcssに
.migi{ display: block; text-align: right; font-size: 0.8rem; }
とか書いておけば
<!--ほにゃらららほにゃらららいや--> <span class="migi"><a >右寄せリンク</a></span>
とかくだけで良いのでいいですよね。
なんにも考えずに実装したい方へ
cssにこの記述を追記してください
.migi{ display: block; text-align: right; }
右寄せしたい要素をこの要素で挟んでください
<span class="migi" ><!--ここに右寄せしたい要素を記述--></span>
以上です。