SIRIUS(シリウス)の<p>タグの仕様を極める

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

<p>タグの仕様を極める

サンプル画像

 

あなたはシリウスで記事を書くとき「<p>タグ改行」派ですか?

それとも「改行なし」派ですか?

 

「えっ、何それ?」って思った方はおそらく「<p>タグ改行」派でしょうね。

シリウスのデフォルト設定は「<p>タグ改行」になってるはずですから。

 

知らなかった方のためにあらためて説明すると、
シリウスでは記事1、記事2、記事3……ごとに
<p>タグの改行方法が指定できます。

 

こちら↓がその設定変更箇所です。

 

実は目に入っていたけどよくわからなかったという方もいるんじゃないでしょうか。

 

サンプル画像

 

「<p>タグ改行」はHTMLタグを気にせずブログ感覚で記事を書きたい方向けの設定、
「改行なし」はHTMLに詳しい完全タグ打ちで記事を書きたい方向けの設定です。

(<BR>タグ改行はおススメしません)

 

これから書いてあることは「改行なし」で編集している人にとっては何の意味もありませんのでとっととページを閉じちゃってください。

 

そうではなく「<p>タグ改行」で記事を書いてるんだったら、
もしかしたらこんな悩みがあったんじゃないの?と思われる
段落と改行”クセ”についてのお話です。

 

もっともこれは「テキストモード」での編集時の話で、デザインモード時の編集ではまたさらに挙動が異なります。

ここでは「テキストモード」での編集をベースに話を進めていきます。

予期した通りに表示されない謎

たとえば「<p>タグ改行」で、
「これは文章1です。これは文章2です。これは文章3です。」
という文章を書いたとします。

 

そのままだとブラウザ上ではこんな↓風に左寄せで表示されますよね。

これは文章1です。これは文章2です。これは文章3です。

 

その後、気が変わってこの文章を中央寄せにしたいと思ったとします。

 

普通は文全体を範囲選択して『中央揃え』アイコンをクリックすると思うんですよ。

 

その結果、シリウスの編集画面上ではこんな↓感じで
中央寄せのタグ(style="text-align:center")が自動的に打ち込まれます。

<p style="text-align:center">これは文章1です。これは文章2です。これは文章3です。</p>

 

そしてこれをブラウザで見ると、やはりこんな↓風に中央寄せで表示されます。

これは文章1です。これは文章2です。これは文章3です。

 

しかし「やっぱり見栄えが悪いので『これは文章3です。』の部分だけ次の行に持っていきたい」と考え、『これは文章3です。』の前で[Enter]キーを押して”改行”したとします。

 

当然シリウスの編集画面上ではこんな↓風に段が変わります。それだけです。

<p style="text-align:center">これは文章1です。これは文章2です。
これは文章3です。</p>

 

一見すると特に問題はなさそうです。

 

中央揃えを意味する「style="text-align:center"」はそのままだし、
<p>~</p> で挟まれた1つの”段落文”ですし。

 

しかしこれをプレビューしてブラウザで見てみると、
なぜかこんな↓風に中央揃えが崩れて表示されてしまいます。

これは文章1です。これは文章2です。

これは文章3です。

 

なぜ全体が中央揃えにならないのか……どうやったら直るのだろうか……。

 

こういったことで延々と悩んでしまって結局そのままにしちゃってる人がもしかしたらいるんじゃないでしょうか (-_-;)。

 

これはSIRIUS(シリウス)の改行タグの”クセ(仕様)”によるもので、
決して誤動作が起きてるわけではないんです。

 

そしてこの独特のクセを覚えておかないと
何度も苦労するハメになるやもしれないんです。

 

もちろん『改行なし』にして完全タグ打ちで書いていけばこういった現象は起こりません。

改行の”クセ”

先ほどの”不完全な”文章をブラウザで見たのがこちら↓でした。

これは文章1です。これは文章2です。

これは文章3です。

 

これをブラウザのソース上で確認してみましょう。
すると、、、実はこんな↓風になっていたんです。

<p style="text-align:center">これは文章1です。これは文章2です。
<p>これは文章3です。</p></p>

 

SIRIUS(シリウス)の編集画面上とちょっと違っている点にお気づきでしょうか。

 

よく見ると『これは文章3です。』の前に<p>が余計についてます。

 

実はコレ「これは文章3です。」の部分がSIRIUS(シリウス)の自動<p>補完仕様により<p>~</p>で新たにくくられてしまったためなんです。

 

そのため文の最後も</p></p>と </p>が2つも重なっちゃってますでしょ。

 

つまり「これは文章3です。」の1行が直前の1行とは完全な別段落とブラウザが認識してしまい、その結果(中央揃え指定が解除された通常の)左寄せで表示されてしまったというわけです。

 

う~ん、ちょっとわかりにくかったでしょうか。でも無視して先に進みます。m(_ _)m

 

ではどうやったら全体が中央揃えになるのでしょうか。

 

答えはこちら↓。(シンキングタイム0秒!)

 

シリウス編集画面上で『これは文章2です。』の直後に「<br />」と打つ
これだけです。

 

結果、こんな↓感じになります。

<p style="text-align:center">これは文章1です。これは文章2です。<br />これは文章3です。</p>

いちいちキーボードで<br />と打つのが面倒くさい方は[shift]+[Enter]と押してみてください。

またこの先は『改行』という言葉だけではくくりが難しくなるので、<p>は”段落”、<br /> を”改行”と呼んでいきます。

 

これの意味合いとしては、
<p>~</p>で囲まれた1つの段落内での改行になるため、
どこで”改行”されていようと全体が中央揃えになるというものです。

 

ブラウザで確認してみると、、、こんな↓風にちゃんと中央揃えになっています。

これは文章1です。これは文章2です。
これは文章3です。

 

注意:これを、

<p style="text-align:center">これは文章1です。これは文章2です。<br />
これは文章3です。</p>

とシリウス編集画面上でせっかく<br />を足したものの、
そのあとでホントに”改行”してはダメですよ。

 

シリウスの自動<p>補完機能が働いてまたまた中央揃えにならなくなっちゃいますから。

デザインモードではどうなる?

さてここまでは『テキストモード』での話でした。
じゃぁ『デザインモード』だとどうなるんでしょう。

 

デザインモードに切り替え、これまで同じく『文章1です。これは文章2です。これは文章3です。』という文章に中央揃えを適用し、
『これは文章3です。』の手前で[Enter]キーを押してみます。

 

すると、、、きちんと中央揃えになってるじゃないですか。

(こちら↓がそのキャプチャ画面です)

 

サンプル画像

 

テキストモード時のような<br />を差し込む手間もないし、
見た目も全然おかしくないです。

 

それじゃ最初からデザインモードでやった方がいいのでは、と当然なりますよね。

 

しかしこれをテキストモードに切り替えて確認してみると、
シリウスが自動で打ち込んだタグはこんな↓感じになっていたんです。

<p style="text-align: center">これは文章1です。これは文章2です。</p>
<p style="text-align: center">これは文章3です。</p>

 

意味合いとしては<p>~</p>ではさまれていた1つの段落
2つの段落に完全分離されたというものです。

 

それでもブラウザ上では、さきほどの<br />を打ち込んで修正したものと
見た目は実はまったく同じだったりするんです。

 

つまりこの現象の結果だけからいえば、
『最終的な見た目はどっちで編集しても変わりなし』なので
お好きなモードで編集してねということになりそうです。

 

しかしもしも<p>段落の空き具合(マージン)を
シリウス標準設定よりも広めにカスタマイズしていたとしたら
話は変わってきます。

 

テキストモード編集で修正作業をした後のものをもう一度見てみましょう。
こんな↓感じでしたね。

<p style="text-align:center">これは文章1です。これは文章2です。<br />これは文章3です。</p>

 

これは 1つの段落内で”改行”された文章ですから、
段落の空き具合に関係なく常に同じ行間で表示されます。

 

これに対しデザインモードで編集した場合は2つの段落に分離されたため、
もしも<p>段落の空き具合を大き目にとっていた場合は
こんな↓感じで”行間”に差が出てきちゃいます。

※テキストモード時に <br /> を加えて修正したもの。

これは文章1です。これは文章2です。
これは文章3です。

 

※デザインモード時に[Enter]キーで”改行”しただけのもの。

これは文章1です。これは文章2です。

これは文章3です。

覚えるべきは2パターン

だいぶ複雑になってきちゃっているので、
このあたりでこのページから離脱している人もきっといるでしょう(滝汗...)。

 

でも気にせず続けます。

 

覚えておくべきシリウスの段落仕様としては以下の2つで十分です。

 

文章の先頭に『<p class="~">』とか『<p style="~">』と自動で入力されてしまうテキストについては、段落内の改行は <br /> で処理すべし。

 

編集画面上では<br />のあとに([Enter]キーを押さずに)そのまま書き続けること。

 

※もちろん純粋に2つの段落に分けたい場合は
それぞれのブロックを<p>~</p>でくくって分ければいいだけのことです。

 

そして『<p class="~">』などが先頭につかないテキストだけの文の時は、
シリウス上での見た目がそのままブラウザでの見た目となることがほとんどなので、
見た目そのままに”改行”するだけでOKというもの。

 

たとえば単なる改行だけなら[Enter]キーを1回押すだけ。

1行分空けたければ[Enter]キーを2回押すだけのことです。

 

以上です。

 

購入ページへ


てっぺん