FC2ブログで謎の空白行ができるのはソースの途中改行が原因です

FC2ブログで謎の空白行ができるのはソースの途中改行が原因です

カスタマイズ
2018/11/13
0
vanillaice (Akira)
vanillaice (Akira)
EducationInstructionHTML初心者向け

FC2ブログの 旧投稿画面 をお使いの方向け記事です。

旧投稿画面には 改行の扱い を2種から選択できるようになってます。ひとつは「自動」もうひとつは「HTMLタグのみ」です。

htmlタグのみ設定を利用するのは恐らくhtml中級〜上級者でしょうから良いとして、初心者の方の大半は「自動」に指定してあるのではないかと思います。
記事内で何かしらのhtmlを用いる際、自動指定の場合にはソースコードの書き方に気をつけましょう。

Enterキー押下は本来は改行ではない

改行する時には多くの方が Enter/ Return キーを叩きますが、本来それは改行ではなく 改段落 です。
FC2ブログは該当しませんが、他ブログサービスのいくつかで「改行すると行間隔が勝手に空いてしまう」という訴えを見ることがあります。あれはユーザーが改行のつもりで改段落をしている、つまり Enter/ Return キーのみを叩いているからです。
本当の改行は Shift + Enter/ Return です。

段落というのは通常 <p> というパラグラフを意味するp要素であり、p要素のブラウザデフォルト設定は要素の上下にほぼ1行分の空白(margin, まーじん)を作るようになっています。ですから「勝手に空白が!」ではなく実際には自分で空けてるんですねこれ (´・ω・`)
改行の仕方をご存じないユーザーさんの方が寧ろ多いので、ブログサービス運営が予めCSSで意図的に上下marginを取り除いてくれれば良いというか、どこも今そんな感じにしてあるんじゃないかしら (´・ω・`)

改段落(enterキーのみ)した場合の実際のhtml内容

<p>あいうえお</p>
<p>かきくけこ</p>
<p>さしすせそ</p>

改行(shift + enterキー)した場合の実際のhtml内容

あいうえお<br>
かきくけこ<br>
さしすせそ<br>

わかりづらいかもしれませんのでFacebookを比較対象にしますと、FBにパソコンからコメントする時ってenterキーを押すと投稿されてしまいますよね。文章を一段下に下げてそのまま続けるには shif + enter の操作が必要です。それが正しい改行だから。
スマートフォンではキーの同時押しなんてのはできませんので改段落と改行の区別はありません。

この基本を知って頂いた上でFC2ブログの「改行の扱い『自動』」の機能を説明しますと要するに
enter のみ押下つまり 改段落の場合でも改行とみなしbrタグを挿入します ということなんですね。

で、ココ重要。改行の扱いを自動にした場合には
例えソースコードの途中であっても enter が押された時点でbrタグが追加されます。
それが謎の空白行の原因です。

謎空白の具体例

例えば以下のようなソースをコピペして貼り付けたとします。

<div class="messe-box">
  <p>ここにテキスト</p>
</div>

改行の扱いが「HTMLタグのみ」の場合の描画(実物)

ここにテキスト

改行の扱いが「自動」の場合の描画(スクリーンショット)

自動の方は明らかに縦幅が増加しています。改行「自動」設定はbrタグが可視化されません ので気が付かないのですが、実際のソースの状態は以下のようになっています。

<div class="messe-box"><br>
  <p>ここにテキスト</p><br>
</div>

上記はテキトーに作成したメッセージボックスなので専用のCSS内容が無ければ上のような状態にはなりませんが、テンプレートにデフォルトでCSSが入っており、空白行が出来ているのを見かけるのは 引用 なんですね。
引用は旧投稿画面エディターのツールに Q というマークがあります。みなさんそれをご利用になるのではないかと思います。
で、実際に引用文などを記すことになりますが、

<blockquote>ここに引用文</blockquote>

これが見づらいからといって

<blockquote>
ここに引用文
</blockquote>

こんな風に直してしまうと空白行ができてしまいますよ。心当たりのある方は結構いらっしゃるのでは。
レンダリング後の見た目もアレでソレですがそれ以上にhtmlがヘン。ド素人でも書かないような摩訶不思議なコードになってしまいます。

確かにhtmlの入れ子などが複雑だとソース改行したくなるんですよね。でもそれをやって良いの改行の扱いをhtmlのみに設定した時だけです。
メッセージボックスのサンプルコードを自動改行の方が使う場合には

<div class="messe-box"><p>ここにテキスト</p></div>

どんなに見づらかろうとも横に続けて書く、と。

まとめ

「自動」に設定した場合はbrタグ自動追加なので文章を書くには楽です。記事内でhtmlなど滅多に使わない、という方はこちらに設定されると良いですね。
「HTMLのみ」に設定した場合は文章改行したい時に逐一brタグを書く必要が生じますのでめんどうっちゃめんどうです。その代りにhtmlを書く時には可読性を重視できますね。

最後にメッセージボックスのhtmlをCSSを載せておきますのでご入用の方はご自由にどうぞ。

.messe-box {
  position: relative;
  max-width: 500px;/* 紙面横最大値 */
  margin: 30px 0;
  padding: calc(1em + 20px) 1em 1em;
  background: rgb(240,255,255);/* 紙面の背景色 */
  color: rgb(51,51,51);
}

.messe-box::before {
  content: "";
  display: block;
  position: absolute;
  top: -15px;
  right: 0;
  left: 0;
  width: 50%;
  height: 30px;
  margin: auto;
  background: linear-gradient(-45deg, rgba(188,219,247,.5) 25%, transparent 25%, transparent 50%, rgba(188,219,247,.5) 50%, rgba(188,219,247,.5) 75%, transparent 75%, transparent 100%);/* ストライプのカラーコードと不透明度 */
  background-size: 20px 20px;/* ストライプの太さ */
  transform: rotate(-3deg);/* テープの傾き */
}

.messe-box::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 5px;
  width: 45%;
  height: 10px;
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
  transform: rotate(3deg);
  z-index: -1;
}

.messe-p {
  margin: 0 !important;
}
<div class="messe-box">
  <p class="messe-p">ここにテキスト</p>
</div>

使用頻度が低い場合はCSSをスタイルシートに入れず、htmlの上に <style></style> で囲った上で記載してください。
と言いたいんですが…。html5.2から自由配置になったはずのstyle要素、W3C validatorが再びエラーの指摘をしだしました (´・ェ・`)
ちょっとよくわからんなー。仕様の確認をしておきます。
とりあえず記事内にCSSをstyle要素として置くときは自動改行なら横につなげて書かないとダメですYO

あとクラス名 .messe-box って他の何かで使ってたかもしんない ←
その場合はスタイルシート末尾に記すとクラス名重複で既存内容が打ち消されてしまいますので、その時はクラス名をテキトーに変更してくださいね。すみません ^^;

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)