ランダムの備忘録

ブログをやってて覚えた過程を忘れないために!

<p> も <br> も連続で使っちゃ駄目!なんとかする!

改行・・・それは適切に。

うん、よく分からん。何が駄目なの?見た目は何も変わらないよね?

見た目は変わらないけどHTMLで見たらすごいことになってる。

簡単に言えば文章として駄目。そしてSEOで不利になるよってこと。

でも改行しなくちゃ見にくいよね。だから<p>も<br>も使いたくなる!

一番駄目なのがHTML編集で見て<p> </p>ってなってるやつ!

はてなの見たままで書いてて連続Enterで行間を開けようとすると出来る。

こいつが一番駄目らしい。見直したらすげぇ数!(笑)

そしてShift+Enterで<br>(改行)になるんだけど、同じく連続させちゃ駄目!

つまり・・・行間の隙間が0に等しくなるんじゃね?ってこと。

(<p> or <br>を連続させなかった時の例)

隙間が欲しい

でも無理

どうしたらいいんだ!?

連続させないで改行したらこうなっちゃう!

なので本題!

 <p>に隙間を与えるコードを入れる!

簡単だね。ただ恐ろしく面倒。どっちだよ!って思うかもしれない。

なに、簡単な話だ!全ての記事をHTMLで編集するんだ!手動でね。

もしかしたらもっといい方法があるのかもしれないが分からなかった!

<br>を無効にするCSSはあったけどそれじゃないんだよね!

あくまでも行間が欲しい。くっつきすぎると読みにくい。

話が長くなったけどサクっと方法を載せよう。

<p style="margin-bottom: 1em;">

文の最初の<p>を上のやつに書き換えるだけ。そして行間目的の<p> </p>を消す。

1の数字を変えれば行間もその分広がるのでお好みで。

因みにこの趣味ブログは2emにしているよ。

さぁ全ての記事を見渡して絶望しようじゃないか!

(例を載せておこう)

下と近すぎる!(0)

隙間が欲しい!(1)

やった!隙間だ!(2)

もっとだ!もっとくれ!(5)

おぉ・・・こんなにいる?(10)

広すぎだ、こんちくしょう!

HTMLでは綺麗に整っているよ⇩

<p style="margin-bottom: 0em;">下と近すぎる!(0)</p>
<p style="margin-bottom: 1em;">隙間が欲しい!(1)</p>
<p style="margin-bottom: 2em;">やった!隙間だ!(2)</p>
<p style="margin-bottom: 5em;">もっとだ!もっとくれ!(5)</p>
<p style="margin-bottom: 10em;">おぉ・・・こんなにいる?(10)</p>

こんな感じになってるよ。

しかしこれではまだ半分。「style=」をHTMLで書くのはあまりよくないらしい。

なのでこれをCSSでクラス名を割り当てて使うことになる!

CSSでクラス名を割り当てる

デザインからCSSに記述していく!

.p1{
    margin-bottom: 1em;
}
.p2{
    margin-bottom: 2em;
}
.p5{
    margin-bottom: 5em;
}

と、こんな感じでCSSに入れたら準備OK!そしてHTMLでは・・・

<p class="p1">隙間が欲しい!</p>

と書くと上でやったように隙間が出来る。CSSで弄るのが本当のやり方!

あとは数字を自分好みに調整する!

そして今までの全部をこれに変えていくわけだが面倒すぎるだろ!ってね。

面倒すぎるのでちょっとだけ楽をしよう!

注(はてなブログでやる場合なので他は分からないよ。そしてなによりミスったら大変なことになる。

覚えるべきショートカットキー

Ctrl+A → 全て選択

Ctrl+C → コピー

Ctrl+X → 切り取り

Ctrl+V → 貼り付け

Ctrl+H → 置換

1・まず最初にやること

HTML編集で行間目的の<p> </p>の上にある行の<p>の後ろに<p class="p1">を入れる。

(例)

<p>例え</p>
<p> </p>

<p><p class="p1">例え</p>
<p> </p>

全てこうしたあとにHTML編集を1回クリックすると更新されて前の<p>が消えて赤文字からになる。

<p class="p1">例え</p>

<p> </p>

こんな感じになる。

2・メモ帳で置換

HTML編集でCtrl+Aで全て選択しCtrl+Cでコピーしてメモ帳にCtrl+Vで貼り付けてCtrl+Hで置換を出す。

検索する文字列に<p> </p>。置換後の文字列は空欄。そして全て置換を選択。

そうすると全ての<p> </p>が綺麗に消えるので再度全て選択してコピーする。

3・HTML編集に貼り付け!

ここは慎重に。全てを置き換えるために以前のHTMLは全消去する。

真っ白になった所へ先ほどメモ帳でコピーしたやつを貼り付ける。

貼り付け後にHTML編集を1回クリックして更新し抜けが無いか確認。

あとはおかしな所がないかプレビューで確認して何も無ければ完了!

慣れてきたらコピーを切り取りに切り替えてやればさらに早く!だが慎重に。

終わりに

手間をかけた方が見直しも兼ねて出来るので良い所はある。

だが楽をしたい。楽をすれば元には戻れない。作業量が段違いなんだ!

どちらを選ぶかはお好みで。早めにやらないと作業量に疲れ果てる。

さぁもう逃げられない!グーグル先生が見ているかもしれないぞ!