はてなブログで初投稿して気がついた記事を書く際の「書き方」や「改行（行間）」のコツ

こんにちは、しちゃうおじさん（以下「しちゃおじ」）です。

先日ですが、「しちゃうおじさんのはてなブログ」にて以下の記事｛無料で”マネーフォワード クラウド確定申告”を利用するための登録方法と初期設定｝を初投稿してみました。

「しちゃおじ」は「しちゃうおじさんブランド」にてセルフメディアをのんびり構築中でして、まずは昨年の2021年4月からnoteの運用を開始、そして今年の2022年1月から「はてなブログ」の運用を開始する形となりました。

ちなみに、現段階で構想している「しちゃうおじさんブランド」の全体像としては、（トライアングルを思い浮かべていただいて）上部に「Twitter」・左下部に「note」・右下部に「はてなブログ」・中央にハブとしての「HP（Webサイト）」を予定しています。

2022年度中には、これらのセルフメディアの完成と方向性を確立させて、2023年度には、本格的な運用段階としてビジネスを成長させていけるのかな？と考えています。

＊

さて、noteを本気で運用している皆様は既にお気づきのことかと思いますが、noteのみで収益化（マネタイズ）をしていくことは非常にハードルが高くなっています。

サラリーマンの副業レベル（お小遣い稼ぎ）であればnoteのみでも達成可能なのですが、そうではなくビジネスとしてスケールしていくためには、居心地の良いnoteから積極的に外の世界に飛び出していく必要があります（これは必須！）。

「しちゃおじ」の場合は、まずはこのnoteに「はてなブログ」を連動させる選択をしましたが、noteサーフィンをしていると「WordPress（ワードプレス）」を選択する方が多いような印象を受けました。

正直なところ「WordPress（ワードプレス）」は、運用と管理のコストが高くつくのでオススメできません。

ぶっちゃけてしまうと「めんどくさくてたまらん」のですよ。

このことは、過去に30ドメイン以上をワードプレスで運用・管理していた経験があり、PHPファイルもそれなりにいじってWordPressテーマ（デザインテンプレート）の編集もできるレベルの「しちゃおじ」が心の底から実感している事実です。

ですので、noteを本気で運用してみたのは良いのだけど、noteの各種制約や集客機能の限界を知って、「さて今後どうするか？」と悩まれている方がおりましたら、「ワードプレス」ではなく「はてなブログ」を個人的にオススメしておきます。

もちろん、WordPressテーマをいじるのが好きだったり、セキュリティ対策や運用・管理自体が苦にならないような方はワードプレスを選択していただいても大丈夫です。

ですが、そもそもnoteが好きなような方に必要なのはシンプルな箱のみであり、デザインや運用・管理自体に時間と労力を割かれて疲弊してしまっては本末転倒ですので、最も大事な要素である「記事（コンテンツ）を書くこと」に集中するべきだと思います。

それでは、初投稿をしてみて気がついた「はてなブログ」で記事を書く際の「書き方」や「改行（行間）」のコツをご紹介していきます。

・・・

段落と段落の行間調整

まずは、以下のスクリーンショットをご覧ください。

＊

はてなブログのエディタ画面にて「編集見たまま」モードを使用して、テスト投稿をしているスクリーンショットになります。

3段落で文章が並んでいますが、1段落ごとに[Enter]を1回押して改行をしています。

以下のスクリーンショットは、これを「HTML編集」モードに切り替えたものです。

＊

HTMLのソースコードとしては、以下のように非常にシンプルで100点満点です。

<p>～</p>で、1つの段落ですね。

これをこのまま「公開する」でブラウザでの表示を確認すると、以下のスクリーンショットのようになっています。

＊

わかりにくいかも知れませんが、段落と段落の行間が狭すぎるためにゴチャゴチャ感が拭えず、非常に目に負担がかかりますし読みにくいです。

記事を書いている本人は、毎回この行間で書いているうちに自然と慣れ親しんでしまうものなのかも知れませんが、第一印象は大事にした方が良いです。

はてなブログというメディアは「テキスト文化」ですので、例えびっしりと文章が敷き詰められている記事だとしても読者さんはついてきてくれるのかも知れませんが、最初に少しだけ段落と段落の行間を調整するだけで目に優しく読みやすくなります。

では、その行間調整として、1段落ごとに[Enter]を2回押して改行をしてみます。

＊

実際に、段落と段落の行間調整を[Enter]の回数で行っている方は多いかと思いますが、この[Enter]で行間を調整してしまうとHTMLソースコードが変になってしまいます。

以下のスクリーンショットは、これを「HTML編集」モードに切り替えたものです。

＊

以下のように、連続2回目の[Enter]に対して、<p> </p>という空っぽの段落が挿入されてしまいます。

ブラウザでの表示は、以下のようになります。

＊

上記スクリーンショットのように、人間の目には段落と段落の間に適当なスペースが確保されている状態ですが、ソースコードを読み取っているクローラー的には、これは適当なスペースではなく意味不明の空っぽの段落を含んだ5段落として読み取っています。

したがって、HTML構文的にもSEO（検索エンジン最適化）的にもよろしくありません。

それでは、[Enter]の連続ではなく[Shift]＋[Enter]を併用した改行で行間調整をしてみたらどうでしょうか？

「編集見たまま」にて、まず[Shift]＋[Enter]を押した後に続けて[Enter]を押して改行してみたところ、「HTML編集」でのソースコードとしては、[Enter]を1回押した状態と変わりませんでした。

つまり、最初の[Shift]＋[Enter]が無視されてしまいます。

続いて、まず[Enter]を1回押した後に続けて[Shift]＋[Enter]を押して改行してみたところ、「HTML編集」でのソースコードとしたら、以下のようになっていました。

＊

ソースコードを確認してみると、段落内にて文章が始める前の先頭で改行している状態となっていますので、これもHTML構文的におかしいです。

<br />が改行タブですね。

ブラウザでの表示は、以下のようにおかしなところは見えません。

＊

中には、[Enter]を一切使用せずに[Shift]＋[Enter]のみを連続使用して行間を調整している方もおられるかも知れません。

以下は、[Shift]＋[Enter]を2回連続して行間を調整した場合の「HTML編集」モードのソースコードになります。

＊

[Shift]＋[Enter]を2回以上連続して行間を調整してしまうと、以下のように段落という概念がなくなってしまいます。

また、<br />の連続もHTML構文的におかしいです。

ブラウザでの表示は、以下のようにこちらもおかしなところは見えません。

＊

これらの例のように、[Enter]や[Shift]＋[Enter]を連続することで、人間の見た目的には行間を調整することは可能なのですが、その方法ですとHTML構文的に（つまりはクローラー的に）よろしくありませんし、なにしろソースコードが汚れるので美しくありません。

ということですので、行間調整はCSS（スタイルシート）に追記する形で行いましょう。

はてなブログでのCSSへの追記は「メニュー ＞ デザイン」から、

＊

「カスタマイズ ＞ {} デザインCSS」から行うことが可能です。

＊

左下の「{} デザインCSS」をクリックすると表示される枠内をさらにクリックすると記述が行なえるエディタが表示されます。

＊

エディタが表示されたら、既に記載されているソースコードには触れずに、それらの下部へ以下4行をコピーペーストしてください。

.entry-content p {
margin-top: 2em;
margin-bottom: 2em;
}

この4行のソースコードにて、段落の外側（上部と下部）へ2文字分の余白を指定しているのですが、この追記によって「編集見たまま」にて段落ごとに[Enter]を1回押して改行をするだけで、以下のようなブラウザの表示となります。

＊

どうでしょうか？

当初の[Enter]1回のみのブラウザ表示では、段落と段落の行間が狭すぎるためにゴチャゴチャ感が拭えず、非常に目に負担がかかりますし読みにくいものでしたが、CSSに4行を追加しただけで随分と印象が変わったかと思います。

もちろん、CSSのみをいじっていますので「HTML編集」モードでのソースコードは100点満点のままです。

＊

なお、個人的なバランス感覚で「2em」と指定しましたが、段落と段落の行間をさらに広くしたい方は「3em」などと数字を大きくしてください。少数点での調整も可能です。

今回、はてなブログにて1記事を投稿してみて気になった点は他にもいくつかありましたので続けて書くつもりだったのですが、長くなってしまいましたので次の記事に分けて書きたいと思います。

・・・

確定申告の準備はお済みですか？

さてさて、確定申告の時期が近づいてきました。

もし「会計ソフトを使って“無料”で青色申告を済ませたい」という方がおられましたら、「しちゃうおじさんのはてなブログ」に初投稿をした｛無料で”マネーフォワード クラウド確定申告”を利用するための登録方法と初期設定｝も参考にしてみてください。

＊

以上 – はてなブログで初投稿して気がついた記事を書く際の「書き方」や「改行（行間）」のコツ – でした。

・・・