Pocket

ワードプレスで枠を作ろうとしたときに調べると、CSSとHTMLで作る方法がほとんどですが、

CSSめんどくさいし、良いプラグインないんか!?

と調べてもなかなか出てこない。

CSS追加がうまくいかなくて、CSS追加方法を確実に行うためのプラグインで結果的に、

超簡単に枠作れました!

それが

Shortcodes Ultimate というプラグインです

はい、まずはこの枠をどうやって作ったかというと、以下の通りです。

すべてビジュアルエディターで行います。

プラグインインストール

他のプラグインと同じ手順でインストールします。

Shortcodes Ultimate と検索するといくつか出てきますが、上の図のプラグインです。

インストールし、有効化します。

新規投稿の段落で

特に設定は不要です。

新規投稿で、「段落」にします。(クラシックではなく普通の「段落」です)

すると以下のような記号が表示されます。

[]これです

[] をクリックすると以下のように67個ものショートコードが!

そのなかの、「ノート」を選びます。

「ボックス」を選ぶとボックスっぽいのだけがピックアップされます。
とりあえず今回はノートを選びます。
背景色、テキスト色を選びます。
(テーマにあった色を選ぶのがいいと思います。一度選ぶと記録されてます!)
半径は角がカクカクしているか丸っぽいかという数値です。
「ショートコードを挿入」で、プレビューで見ても良いですし、
「ライブプレビュー」ですとすぐに確認できます。
「プリセット」で保存できます。
これで枠の作成が完了です。

組み合わせてこんなことも

「リスト」と「ノート」を組み合わせると以下のように背景+枠+箇条書きとなります。

  • 並び項目
  • 並び項目
  • 並び項目
具体的にはこのようにします。
リストのデフォルトが赤い星だったので、背景を青にしました。
こんなのもできる使い方これは
おお
これから書きます
タブコンテンツっていうショートコードです

直感的に出来るプラグインです。

使えるプラグイン
それがShortcodes Ultimate

一つだけ注意

改行が感覚的に出来ないので、<br>を使います例えば

使えるプラグイン
それが
Shortcodes Ultimate

こうするためには以下のようにするだけです。