WordPressでAAを記事に挿入する

過去の有名ブロガーさんはよく記事内にAA(アスキーアート)という楽しい絵文字が挿入されていることが多いです。今ではSNSメディアの登場でだんだんと廃れ感も出てきてはいますがまだまだこの文化は残って欲しいところです。

というわけでWordPress環境でブログを書いている人向けのAA挿入についてのお話になります。

WordPress記事にAAを入れてみよう

普通に記載するとずれて失敗する

こんな感じになってしまいます。
正直見れたものじゃありません。

WordPressはテーマごとにCSSの記述もバラバラなので
解説記事1個見たくらいでは対処することができないので
「AA WordPress 対処法」とでも検索して
いろいろなテーマ別での対処法を探してきたほうが良いでしょう。

【対処法】Add Quicktagsプラグインで対処する

【手順1】Add Quicktagsプラグインを入手する

WordPressのプラグイン管理画面で「Add Quicktags」を検索してインストールしてきてください。インストール後は「有効化」をお忘れなく。

【手順2】ロリポップサーバーのWAF設定を無効化しておく

ロリポップサーバーはシステムの根本を弄ろうとすると自動的にアクセス拒否にしてしまうWAFというセキュリティ機能がついています。「AddQuicktags」プラグインはなぜかそこと干渉してしまうらしくWAFを無効にしておかないと「Add Quicktags」の設定を済ませる際に403エラーになって先に進めません。

ロリポップサーバーのWAF設定を無効にしてきましょう

【手順3】5~10分ぐらい待つ

ロリポップサーバーのWAF設定無効化には時間がかかります。最低5分~10分ぐらいはかかるのでその間はコーヒーを飲むなどして待ちましょう。

【手順4】Add Quicktagsプラグインの設定を済ます

ラベル名AA
開始タグ<div style=”font-family:’MS Pゴシック’,’MSPゴシック’,’MSPゴシック’,’MS Pゴシック’;font-size:16px;line-height:18px;” >
終了タグ</div>
その他設定項目右端の✔マークにチェックを入れる

設定はこれでOKです。保存しましょう。

ブログ記事にAAを入れてみよう

記事新規作成しよう

では早速AAを記事内に挿入していきましょう。2021年現在のWordPressはブロックエディタ形式ですのでそのままでは「Add Quicktags」プラグインの設定項目にアクセスできない状態です。そこでブロック追加画面から「Classicエディター」を選んでください。ちゃんと「Add Quicktags」プラグインの設定が完了していればツールバーに「Quicktags」のドロップボックスが現れるはずです。

AA化したいところを選んでドロップボックスからAAを選択すれば一応見れる程度の書式に収まってくれます。

サイトプレビューで確認してみる

うーん。頭の蓋が見事にスライドして唖然としてる状態です。要するにAAの行の始め部分の空白が勝手におせっかいに削除されて顔がこんなになってしまっているということです。この空白おせっかい削除問題を解決するために次の手段に移っていきましょう。

AAの文頭おせっかい削除問題をプラグインで解決する

この文頭が勝手に消えてしまう問題は「TinyMCE Advanced」プラグインで解決できるとのこと。早速やってみましょう。

「TinyMCE Advanced」プラグインの設定をする

「TinyMCE Advanced」プラグインを入れたら設定画面へ行きましょう。設定画面下部にある”上級設定”の中に「クラシックブロックとクラシックエディタ内のパラグラフタグを保持」にチェックを入れます。

これで文字内部のHTMLの改行(br)タグが連続して続いても削除命令がでなくなるということです。

無事問題解決!これで記事にAAをいっぱい記載できるよ!

 
        ____

     /⌒  ⌒\  
   /( ○)  (○)\    Windowsでコンピューターの世界が広がります。
  /::::::⌒(__人__)⌒::::: \   あのイーハトーヴォのすきとおった風、夏でも…
  |     |r┬-|     |  Windowsでコンピューターの世界が広がります。
  \      `ーU     /   あのイーハトーヴォのすきとおった風、夏でも…

     ____
    /∵∴∵∴\
   /∵∴∵∴∵∴\
  /∵∴//   \|
  |∵/   (・)   (・) |
  (6       つ  |  / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
  |    ___   |  < 姉さん、頭が痛いよ・・・
   \   \_/  /   \_________
     \_____/
 ⊂ヽ Λ_Λ    / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
   \( *・∀・) < WordPressでAAを楽しもう
   /⌒  \  \________
  (_人_ノ ) つ
     ( (
     (_)

情報参考・引用元

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です