あした思い出すよう

あさってもその次も

はてなブログ 見たまま編集やアプリでEnter,Shift+EnterしたときのHTML表記

「見たまま」モードならShift+Enterがなんだかんだ使いやすかったです。

HTMLのエディターを使用しても同じことができますが、投稿するためのツール(同ブラウザ)内で完結でき、Shift+Enterに慣れてくると手間が少なくてすみます。

 

以下はてなブログ 見たまま編集やアプリでEnter,Shift+EnterしたときのHTML表記について。

 

・PCブラウザからはてなブログを編集

---例文ここから---

aaaあああ(ここからEnter) 

次の行 あああ

あああ

 

aaaあああ(ここからShift+Enter)
次の行 あああ
あああ

---例文ここまで---

 

上記例文を見たままにて編集しているときの画像は以下のようになり、改行の種類もEnterとShift+Enterの区別はつきます。

f:id:dokosuke:20170624194008p:plain

「HTML編集」画面。
Enterしたときの<p>はHTMLでも改行されていますがShift+Enterしたときの文章はそのままHTML的には一行になっているのですね。

f:id:dokosuke:20170624194302p:plain

 

はてなブログアプリからはてなブログを編集

はてなブログ」(Android)の編集機能を使って検証。
「アプリで編集→PCはてなから改行の状況をみる」という流れ。

 

f:id:dokosuke:20170624231656p:plain
編集時に端末によっては重さを感じるかもしれません。
「保存」していない状態で編集中にアプリがおちたらつらい。

 

---ここからはてなブログアプリ---

アプリ 改行(スマホIME内 エンター)

あああ 開業先

あああ

---ここからはてなブログアプリここまで---

 

PCブラウザからの編集と同じく、改行の様子の画像が以下。

f:id:dokosuke:20170624231317p:plain

(開業先→改行先 ...。)
HTML編集をみると、見たままでの「Enter」の扱いになるようでHTMLとしては<p>の改行となっています。

f:id:dokosuke:20170624231622p:plain

アプリを用いてスマホで改行していくと<p>が挿入されるのがよくわかりました。
スマホアプリ内編集にて文字を打ち後から編集をすると、Shift+Enterしたいところを後から追加していかなければならず大変かと思いました。

 

この場合のEnterはアプリにて端末のIMEを用いた改行ですので正確には「Enter」したとは言えません。しかし、スマホから「Shift+Enter」する方法が何かしらあったとしても手間が増える分やらないような気がします。 

 

・<p>と<p>のマージン

<p>のパラグラフとパラグラフの間が開いてるならCSSで<p>と<p>の調整が行われているはずなので、CSSを編集することでマージンの値を小さくすると調整ができます。
CSSによってはこのあたりの設定は異なるのかもしれません。
『デザイン→カスタマイズ→デザインCSS
.entry-content p { margin:0}

 

・長文に「HTML編集」用に<p>や<br>を追加することについて

以前「文章をなにかしら外部で作成し、後から<br>などを追加して~」といった記事を書いたことがありますが、このやり方だと文章が増えた際、特に<p>が増えるたびに選択右クリック項目選択を繰り返すこととなりわりと大変です。
「見たまま」モードなら直接「編集」に貼り付けて「Enter」や「Shift+Enter」で調整していく方がやりやすくは思いました。

 

f:id:dokosuke:20170322002919p:plain
以前の記事で使用した画像。
HTML編集をするやり方を知ることができたので、見たまま編集にてShift+Enterに慣れましたがこれはこれであり。

 

-ブログ内記事

ashitaomo.hatenablog.jp

 

 -画像
・キャプチャ
はてなブログ内 編集ページ
Google Play ストア
StyleNote内 編集