新しい記事
パーマリンクの設定
古い記事
テスト投稿

2行の連続改行ができない

投稿日:

前回、初投稿の記事を書いてみたのですが、完成した記事がなんだか自分がエディタに打ち込んだものと違うような…?

むむっ、2行以上空けていたはずの改行が全部1行に縮められているじゃーありませんか!

 
どういうことかと思い調べてみると、なんでもWordPressには「自動整形」なるものが備わっており、<p>だの<br>だのが続いた場合、それを文法的に(?)間違っているものと判断し、1つだけにしてくれるというおせっかい極まりない機能があるらしい。

ちなみに<p>ってのは「段落」で[Enter]、<br>は「改行」で[Shift]+[Enter]で行うようだ。
今まで私が文章を書くのに使ってきたデジタルな機器は、全て[Enter]が改行だったので慣れていく必要がありそう。

 
ほんで「改行できない」とか「2行空白」とか「連続改行」とかそんなんで調べてみると、いくつかやり方が出てきたのでいろいろ試してみた。ってのが今回の記事

 

  • プラグイン「TinyMCE Advanced」を使う

エディタの機能を拡張させる「TinyMCE Advanced」というプラグイン。
これはAFFINGERのマニュアルにも出てきたので既にインストールしてあったのですぐにできそう。
なんでもこれの「高度なオプション」の「段落タグの保持」にチェックを入れるだけで自動整形機能をOFFにできるんだとか!

んで、早速チェックを入れて連続改行をやってみたんだが…

…できない!!

ウソツキーッ
…まぁ、テーマとの相性とかなんかあるんでしょうね。知らんけど。

 

  • 改行プラグインを使う

お次は改行するため専用のプラグインに頼ろう、というもの。
WordPressの最大の特徴がこのプラグインによる豊富な拡張らしいので、遠慮なく使わせて頂きましょう。でも、あんまり入れ過ぎるとWordPressが重くなるらしい。
ざっと調べたところ、人によって十数個までだとか、30個くらいは必須だとか、言ってることが違ってたので、とりあえず「余計なのは入れない」って感じでいいんじゃないでしょうか。

 
・brBrbr
・my_autop
・PS Disable Auto Formatting

この3つが連続改行するのに有効なプラグインらしい。
…のだが、よくよく調べていくと、どのプラグインもWordPressのバージョンによっては不具合・不安定だとの報告が少なくない。
これらを勧めている記事の更新日を見ると2014年くらいのが多かった。あまり当てにならなそう。

これらのプラグインをカスタマイズして最新バージョンのWordPressでも使えるようにする方法もあるにはあったが、なにやらコードの書き換えとかが必要なようで、私には無理。

 

  • AFFINGERの機能で探してみる

これは調べて得た結果とかでは無いのですが、そもそも連続で改行するだけの事がなんで出来ないのか、このAFFINGERさんは有料のテーマなんだし、これくらいできるんじゃねえの?
とふと思ったので、まだ全然いじくってないAFFINGERさんの潜在能力に期待してみることにした。

私はビジュアルエディタで記事を書いているのですが、とりあえず片っぱしからアイコンやらボタンやらを押しまくっていったところ、「スタイル」内に「下に余白」というそれっぽいものが!
私が2行の改行をしたい、というのはそもそも1行よりも大きく行間をとって文章を多少なりとも読みやすくしたいからであって、充分な空白さえ作れれば、別に改行だろうが段落だろうが余白だろうがなんだってよいのだ。

で、「下の余白」を使ってみたところ、段落と同じく1文字分の空白が下の行にできた。
あとはここに空の改行を1行分入れれば合計2行分の空白ができるはず…!

…できない!!

連続改行時と同じく改行が勝手に消されてしまいましたとさ。

だったら、「下に余白」を2連発すれば2行分空いてるように見えるだろう!ということでやってみたのですが、ビジュアルモードでは同じコマンドを2度やるとただの「解除」になってしまうっぽいですね。意味無し。

だったらテキストモードならどうだ、ということで初のテキストエディタへ。
私のタグの知識はついさっき覚えた<p>と<br>だけなので見方がよく分かりませんが、「下に余白」を押すと<div style="padding-bottom:10px">というものが出た。この10pxってのが多分ピクセルの事だと思うので、余白の大きさを表してるのかな?
ここを倍の20pxに書き替えれば済みそうだが、毎回それをやるのは面倒。
とりあえず「下に余白」ボタンをポチポチっと2連続。2行分の空白は…

…できた!!

コードを見ると、<div style="padding-bottom:10px"></div>となってました。
これは…閉じタグ?なんでこれで2行空いたのかまるで意味が分かりませんが、まーできたので良し!

…が、あくまでこれはテキストモードのみ。コードを使えない私としてはビジュアルエディタ上で使いたい。
とりあえず「できないことはない」ぐらいにはなりましたが、もう少し調べてみました。

 

  • marginを指定し余白を作る

…??
えー、「Pタグにマージンスタイルを設定してCSSにクラスを追加してAddQuickTagでクイックタグに登録」???
なるほどさっぱりわからん、はい次。

…と、いきたいところなのですが、これ以上のやり方は見つけられませんでした。
しゃーなしだ、ちょっとだけ試してみましょう。

 
まずはネットで見た <p style="margin-top:2.0em;"> を意味も分からずにそのままビジュアルモードで貼り付け。

結果はもちろんそのまま<p style="margin-top:2.0em;">がテキストとして表示されただけ。先に気づけよ、俺。

 
ほんじゃテキストモードで <p style="margin-top:2.0em;"> を貼り付けてみる。

そしたら[Enter]で段落空けたらなんと2行分の余白が!!

だがしかし、以降[Enter]を押す度に2行空白になってしまい、今度は普通の1行空けができなくなりましたとさ…

 

あとはCSSに書き込んで毎回指定する手間を省くことができるらしいのだが、「CSS」ってのはスタイルシートとか呼ばれてるもので、ここの書き替えをミスると、画面が真っ白になってしまうらしい… お、おそろしい…
もしそうなったらFTPとかいうのをいじって元に戻すらしいのだが、なんかもう専門用語だらけでサッパリよ。日本語で頼む。

 

最後は「AddQuickTag」というプラグインを使う事でよく使うタグとか定型文をボタンとして登録しておけるそうです。
これでさっきのを必要な時だけ使えるようにできれば万事解決?

AddQuickTagをインストールして、解説サイトを参考に設定を見ていくと、入力画面には開始タグと終了タグの項が。
さっきの<p style="margin-top:2.0em;">には終了タグっぽいものがなさそう?だったので、今度は

開始タグ<p style="margin: 0em 0em 2em;">
終了タグ</p>

というのをこれまたネットで見つけたのでそのまま入力してボタンを作成し、使ってみる。

テキストモードでは上手くいったようだが(多分)、ビジュアルモードでは何故か入力しておいた文が消えるという現象が発生。空白もできてない。もうわけがわからないよ。

 

…とまぁこんな感じで、調べたやり方を全部試してみましたが、ビジュアルエディタで2行分の空白をつくることは私にはできませんでした。

 

  •  スペースを入れて改行?

その後も「なんでこんな簡単な事もできないんだ」となんだか諦めきれずダラダラとネットサーフィンしていると、<p>タグを連続で使うと、間に「&nbsp;」が挿入される、みたいな記事を見かけました。
確かに改行と違って段落を連続させた場合は空白行が作れます。1回だと1行ですが、2回だと3行。2行でなく3行。
理由は分かりませんが、テキストモードで見るとここに「&nbsp;」が入ってました。

&nbsp; というのはノーブレークスペースとか言うらしいのですが、「改行しないスペース」として使われるようです。
ん?「改行しないスペース」? …どこかで聞いたような…

そういえばAFFINGERをいじっていた時に「改行なしスペース」というアイコンがありました。
これを挟む事で<p>、つまり段落が連続させられているのであれば(なぜか3行空くけど)、これを改行に挟めば改行も連続でつかえるんじゃね?
と、ホントに最後の希望を託し、改行→「改行なしスペース」→改行とやってみると…

…できた!!!

そしてちょっと思う。
―「改行なしスペース」ってさ、要はただのスペースじゃないの?
試しに半角スペースでやってみると…

できた!

でも普段打つ文字は全角なので、いちいち半角に切り替えるのはちょびっとだけ手間。
できれば全角スペースも使えたらありがたい。ので試してみると…

できた!

…できて、しまいました…こんなに簡単に…
すさまじい肩透かしです。1日以上調べたのに…

 
結局の所、なんにも入れずに改行を連発すると省略されてしまうので、間にスペースだろうがなんか入れておけばまた改行は使えるんですね。

 
なんでネットにこのやり方出てこなかったんだろう。きっと私が見つけられなかっただけなんだろうけど。
もしかしたらHTML的だとかSEO的だとかの理由で適していないのかもしれません。
でももう私にはこれ以上どうこうしようという気力は残っていません。

まさか今までEnterをタタターンでできていたことをやるだけでこんなに手こずるなんて思ってもみませんでした。
サイト完成までの道のりは険しく遠い…

 
(今日の記事は4000字。乱文すみません汗)

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.