はてなブログで、写真入りラブレターテーマを罫線に合わせる。
なんていうのかな...ほぼ、無理矢理な解決方法なんだけどね。
- 単色のページに可愛い文字を入れると、どうにも調整が難しくって。
それで...この、可愛い文字が似合う...少し波打ってる手描き風の罫線がある「loveletter」っていうテーマ....ピンク背景じゃない「letter」も有るけど、どうせ可愛くするなら...と、かなり以前に〝ラブレター〟っていうテーマを使ってた。
その当時は写真をあまり入れられなかった仕様だったので、写真とか考えてなかったけど...その後 写真を入れるようになってから、文字のずれが気になっちゃって。
そんなわけで色々調整をしてた。うん。6年前です。なぜか7月になるとブログをいじりたくなる。それも...書こうとしたときにまずブログの見た目を直したくなる(￣∇￣o)ゞ
で...
画像を入れたり、ヘアライン...<hr>...を入れると罫線から崩れるので修正方法を残しておこうと。覚え書きがてら、誰かが見たときの参考にね。
...あくまでも、無理矢理な解決方法だから（大事なことだから2度...w）
方法は...二つのタグを組み合わせてます。
これを、ブログの記事の部分に埋め込んでるんだけど...
うーんとね、一つは回り込み停止。
<div class="clear:both"></div>
もう一つは、文字ズレの補正。
<span style="font-size: 80px;"> </span>
この「80px;」の所は、その後の文字のずれを見ながら数を調整しなければならないと思う。ヘアライン...<hr>...のところは、このブログだと30pxにして、その前後に挟んでます。
- ただ...入れ方に注意が...
マークダウン記法の場合は、本文にタグを直接入れてオッケー。
もちろん、その代わりに、タグに使う...＜...＞...とか半角かっこ...（...）...は、
日記の記事には使えないです。全角入力だね。
見たままモードの場合は...
普通に文字を打ち込んで...見た目がズレたら、HTML編集に切り替え「タグうち！」
タグを直接入れられるマークダウンの方が修正しやすい気がする。
けど....ラブレターテーマに写真を入れたとき、マークダウンだと写真サイズが揃ってしまう。そういうタイプのテーマなら良いんだけど...ラブレターテーマには、適当な（デタラメの意味...w）な画像サイズに、あえて変えて入れるのが良い！
だから、見たまま編集のモードにしたんだけどね。
とりあえず...この上の文章の罫線（以降）は、このやり方で合わせてます。
...スマホとかだと、全く合いそうもないのが...まあいいや。
*1:半角英文字は、プログラムとか予約語に使うから常識の範疇になるのかな？
