pタグどうしてこんなに！？はてなブログの落とし穴

　先日と本日で2本の記事を更新したのですが、思わぬ落とし穴にはまっておりました……。
はてなブログの「見たまま編集」をいろいろと勘違いしていた……、そんなお話です。

pタグ大増殖！？

　さて、私は先の２本の記事を「見たまま編集」で書きました。
記事を投稿後に見直してみるとどういう事でしょう……。
レイアウトがとんでもなく崩れています。
どういう事なんだと焦りつつ、記事のHTMLをのぞいてみますと……。

f:id:cimo1212pyth:20160311214459p:plain

　なんと見たまま編集内で改行(Enter)する都度、pタグで囲まれていたのです。てっきり改行＝ brタグだと思っていたので驚きました。ブログでは当たり前の挙動なんでしょうかね？
何分はじめてなもので……、なんてこったと(笑)
もしこの挙動が普通なのだとしたら、記事タイトルに偽りありですね。はてなブログの落とし穴じゃなく、私自身の不注意だったわけですからね……。

　このpタグ大増殖に気が付いてからは、延々と記事の修正作業です。pタグを消して、消して、消しての繰り返し……。眠くなりましたね。
早めに気が付いてよかったです、ほんと。

罫線が纏まらない。

さて、デザイン面のお話を少しだけ。
このブログは”ノートブックのようなデザイン”にしたいと考えているので、記事部分には罫線を引いています。
昨日に比べると改善はしたのですが、未だに罫線のずれが目立ちます。pタグに罫線のCSSを適応しているので、hタグやimgが入ると少しずれてしまうのは仕方のないことなのかもしれませんが……。
毎度、手作業にてレイアウトを調整すれば問題はないのですが……、なかなか骨が折れそうなので、どうにか改善したい点ですね。

今後について

　今後の展望としまして、hタグのデザインを変更していきたいと思っています。他にもimgや背景など、全体的にノートブック風のデザインになるよう徐々にCSSを編集していきます。根詰めて進めても、だんだんとゲシュタルト崩壊を起こすんですよね……。
「あれ？　ノートってなんだっけ？何を作りたかったんだっけ？　ん？」
といった感じに(笑)
事前にpsdでもaiでも何を使ってでも全体の完成図を作れよ！なんてツッコミはなしでお願いします……。

スーパー言い訳タイム

　最初こそブログ全体のデザインを紙面に作っていたのですが、重大な情報をキャッチできていませんでした。(リサーチ不足ともいう。)
Pro版でないとHTMLが編集できないのですね……。できる限りCSSのみで編集しましたが、やはり思うようにはできませんでしたね。
この事実を知って、心が折れました(笑)
以降は、「とりあえず思いついたことを、できる範囲でやろう」なんてスタンスにシフトしました。