ゆるっと広告業界

デザイナーのじたばた。

スマホで<br/>改行をする方法。

こんばんは、さじです。

ブログ執筆がパソコンよりもスマホを手にすることが多い都合上、どうにか最低限の改行がスマホでできないものだろうか、と考えてきました。パソコンで書けば解決でしょ?はひとまずつっこまないでいただけますと嬉しいです。

スマホ(iPhone12・iOS14.7)で書いている際に偶然見つけた方法で可能だったので、これは是非世の中のスマホはてなブロガーに伝えたいです!

まず、実例から。


改段落の場合

通常、スマホの改行を押すとはてなの中では<p>タグの改段落</p>が反映されます。
それによって見え方がどうなるのかというと、以下です。

  祇園精舎の鐘の声、

  諸行無常の響きあり。

この1行目と2行目の間の隙間がどうしても空いてしまいます。スマホのキータッチ画面には「改行」と書かれているものの、はてなの中(html)では「改段落」</p>と認識するということです。

コード
<p>祇園精舎の鐘の声、</p>
<p>諸行無常の響きあり。</p>


改行の場合

本来目指す改行がどうかというと、以下です。

  祇園精舎の鐘の声、
  諸行無常の響きあり。

1行目と2行目の間がブルーの時より狭くなりましたね。こちらがhtmlでいう本来の「改行」なので、html編集画面を覗くと「祇園精舎の鐘の声、」と「諸行無常の響きあり。」の間に「<br/>が打ち込まれます。

コード
<p>祇園精舎の鐘の声、<br />諸行無常の響きあり。</p>

パソコン入力時はshiftキーを押しながらreturn(enter)キーを押すと、本来の改行である<br/>タグになります。これは結構有名なようです。


スマホで本来の改行をさせる方法

本題のスマホでの入力方法です。

  1. まず本文を書きます。
  2. 改行したい部分で、「英字入力」キーに切り替えます。
  3. shiftキーである矢印マークをON。色が変わります。
  4. この状態でreturnキーを押します。

これだけです!

f:id:conasaji:20210905141055j:image

パソコンのhtml編集で確認してみますね。下記の画像のように、<br/>タグで入っています!

f:id:conasaji:20210905141329p:plain


なぜ改段落はダメなのか

改行に改段落を使うことはhtmlの構造上よろしくないという話をたびたび目にしてきました。ひとつの文の途中で改段落になっているのはコンピュータがhtml文書を正しくないと判断するためだそうで、SEOに悪影響を及ぼしている可能性があるとか。そのため、自分も過去の無駄に入れてしまった本来改行なのに改段落になっている箇所をリライトしたいとずいぶん前からほざいている次第です。(地道に進めてはおりますがさほど進んではいない)


自分では凄い発見だと思ったのですが、スマホで書く人がそこにこだわるか?って話なのかもしれません。

ついでに一年前に書いた改行と改段落にまつわる当時の逡巡を貼っておきます。この悩みが一年を経て解決となりました。当時は諦めていますね。

conasaji.hatenablog.com

この記事はリライトできないですね(笑)。

さじ

追記:OSのバージョン、機種の仕様、テキスト入力の設定などにより相違の可能性がございますのでご了承くださいませ。