ワードプレスでブログを始めて1年経ちました。
2019年8月現在、『 WordPress 5.2 “Jaco” 』。
使用しているテーマは無料でもとっても使いやすい『 Simplicity 2(2.7.8) 』。
ほぼほぼ『ブロックエディタ』の『ビジュアル編集』で投稿。
たまに必要になる『HTMLとして編集』。
しかし、1からコードを書く事は難しいので、コピペできる様に用意してあります。
最近ワードプレスを利用し始めて、HTML＆CSSは初心者クラスという同志の皆様。
『ブロックエディタ』でも簡単に出来る本文カスタマイズに気付いていますか？
自分は、つい最近気付きましたが……。
『追加CSSクラス』が侮れないぞ！
▪︎contents▪︎
ブロックエディタとクラシックエディタ
2018年12月6日にリリースされた『WordPress5.0 Gutenberg（グーテンベルグ）』から、『ブロックエディタ』が登場して賛否両論？
すごくシンプルな編集画面です。
多くの皆様は、長年慣れ親しんだ『クラシックエディタ』に戻しているとか？
自分は、ワードプレスでブログを始めたのは2018年7月。
『クラシックエディタ』にやっと慣れ始めたところでの『ブロックエディタ』登場だったので、「今なら新しく勉強し直すのも苦ではない！」。
あっさり『ブロックエディタ』に移行しました。
『クラシックエディタ』で出来ていた装飾が出来ない！文字数が数えられない！なんて不満はなんのその。
小さいブロックごとに『ビジュアル編集』にしたり、『HTMLとして編集』に出来るのは目に優しい。（全画面HTMLだと目がシュバシュバする）
ブロックを簡単に移動出来るので、文章の構成を変えたり、画像の位置はこっちの方が良いかな？なんてのも簡単！
画像のaltタグも投稿画面で入れられる！
あっさり『ブロックエディタ』に馴染みました。
しかし、『クラシックエディタ』では出来ていた、『Simplicity 2』で用意されている文章の装飾が出来ないの残念だな〜。
自分でHTMLとCSSを改造するのも大変だし……と思いながら『Simplicity 2』の公式サイトでカスタマイズ方法を眺めていたら……、ん？
サイト 『Simplicity 2』へ
簡単に出来そうな事が書いてあるぞ！
『Simplicity 2』で使えるCSS拡張クラス色々
Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。
『Simplicity 2』Simplicityの基本的な文章装飾スタイルを使う方法まとめより
…と言われても、1年前はCSSの拡張クラスなんて何の事やらさっぱり分かりませんでした。
ちょっと成長した今、「拡張クラスなら『追加CSSクラス』に書けば良いんじゃね？」
気付いちゃいました。
右サイドバーの一番下『高度な設定』→『追加CSSクラス』です。
メッセージ表示用装飾
3種類の中から利用したいデザインのクラス名を投稿画面の『追加CSSクラス』に記入します。
information と記入したら↓
捕捉は追加CSSクラスに『information』で一発！！
question と記入したら↓
疑問も追加CSSクラスに『question』で一発！！
alert と記入したら↓
注意だって追加 CSSクラス『alert』で一発！！
簡単ですね。
スニペット編集出来るコピペアプリなどに追加して、すぐ呼び出せる様にしておくと楽々！
Bootstrap風メッセージ
こちらは5種類用意されています。
こちらも『追加CSSクラス』に、
sp-primary と記入したら↓
追加CSSクラスに『sp-primary』 よく見るブルーだ！
sp-success と記入したら↓
追加CSSクラスに『sp-success』 成功の色は緑なんだ〜
sp-info と記入したら↓
追加CSSクラスに『sp-info』 情報はブルー
sp-warning と記入したら↓
追加CSSクラスに『sp-warning』 優しい注意だね
sp-danger と記入したら↓
追加CSSクラスに『sp-danger』 ほんのり危険⁈
LINE風メッセージもあった
吹き出しを作るのは難しいと思っていましたが、『Simplicity 2』では用意されていました。
デザインを微調整したかったら自分でCSSを書く必要がありますけど。
そして、LINE風メッセージには一つ高度？な違いがあります。
会話が終わったら、最後に「終了のHTML記述」が必要です。
コピペすれば良いので、そんなに高度ではないですけどね。
まずは『追加CSSクラス』に、左吹き出しならleft_balloon、右吹き出しならright_balloonと記入します。↓
左の吹き出しは追加CSSクラス『left_balloon』
右の吹き出しは追加CSSクラス『right_balloon』
＊ここで会話が終わるなら、
次に終了のHTML記述が必要！
会話が終了した直後のブロックを『HTMLとして編集』にして、下記のHTMLをコピペです。
<div class="clear_balloon"></div>最後の一手間がかかりますが、簡単に吹き出しができちゃいました。
何だか今回の記事も華やかになっています（笑）
詳しくは、『Simplicity 2』のサイトを確認してくださいね。
サイト 『SimplicityでLINE風の会話文を表示する方法』
まとめ
『クラシックエディタ』に戻した方が、分かりやすく簡単に装飾出来ます。
しかし、せっかく新しい『ブロックエディタ』があるなら、今後、使いやすくなる期待も含めて使いたい。
HTMLへのコピペも含めたら、簡単に文章をカスタマイズ出来る方法が『Simplicity 2』には、もっともっと用意されています。
ボタンなども色や大きさ多種多様、使いたいけど使う機会があるかどうか……。
『Simplicity 2』のサイトをじっくり見直すと、以前は理解できなかった事が理解できる様になっているのも嬉しい！
『ブロックエディタ』も悪くないぞ！
コメントは優しくどうぞ