アフィンガー6をインストールすると、ダッシュボードメニューの1番上に「マイブロック」が表示されます。
「これってどんな機能？」
「再利用ブロックと何が違うの？」
という疑問をもっている方が多いんではないでしょうか。
アフィンガー6を購入してマイブロックを使わないのは、非効率の極みと言っていいほど損しています。
そこで今回は、「マイブロック」の便利な使い方について、詳しく解説していきます。
マイブロックと再利用ブロックの違い
まずは、「マイブロック」と「再利用ブロック」の違いについて簡単に説明します。
マイブロックは「AFFINGER6のオリジナル機能」で、再利用ブロックは「WordPressのデフォルト機能」です。
マイブロックも再利用ブロックも、登録方法はほとんど同じ。
違うのは、記事に挿入したあとに個別に編集できるかどうかです。
もう少し具体的に言うと、
- マイブロック
→登録したパーツを「パターン」として記事に挿入し、それを個別に編集できる - 再利用ブロック
→登録したパーツを記事に挿入してから個別に編集できない（すべてに変更が反映されてしまう）
という特徴があります。
結論、使い勝手がいいのはマイブロックです。
しかし、用途によっては再利用ブロックも使えます。
マイブロックと再利用ブロックの使い分けについては以下の記事に詳しく書いているので、気になる方は読んでみてください。
参考：（使い分けの記事、現在作成中）
マイブロックの便利な使い方
AFFINGER6で使える「マイブロック」は、ものすごく便利な機能です。
特徴としては大きく2つ。
- 装飾したブロック またはブロックの組み合わせを「パターン」として記事に挿入できる
- ブロックエディタで作成したパーツをショートコードとして挿入できる
それぞれ詳しく解説したいと思います。
＜特徴１＞装飾したブロックや組み合わせを「パターン」として記事に挿入できる
「パターン」としてマイブロックに登録したパーツを、簡単に記事に挿入することができます。
たとえば、あらかじめ装飾を施したブロックや、いろんなブロックを組み合わせたオリジナルパターンも、簡単に呼び出して使えます。
装飾したブロック例
「注意」を促すマイボックスだとこんな感じです。
見た目は簡単なボックスなんですが、以下の設定を変更しています。
- ＜タイトル設定＞
- 見出し：注意
- アイコンクラス：st-svg-exclamation-triangle
- ＜マージン設定＞
- 上：50px
- 下：70px
- ＜ボーダー設定＞
- 太さ：1
- 丸み：0
- ＜色設定＞
- タイトル色：e92f3d
- 背景色：fdf0f2
- ボーダー色：e92f3d
- ＜高度な設定＞
- 追加 CSS クラス：st-flash-icon
これらの設定に30秒かかるとします。
1記事に平均5個マイボックスを挿入するとして、100記事書いたら「15,000秒」も失うことになります。
ブロックの組み合わせ例
異なるブロックパーツを組み合わせて、ひとつのパターンとしてマイブロックに登録できます。
たとえばマイボックスの中に、
- 画像（画像ブロック）
↓ - 解説（段落ブロック）
↓ - ボタン（カスタムボタン）
これらを設置し、ひとつのパターンとして登録しておけば、いつでも呼び出して使うことができます。
このように、パターン化したブロックをテンプレートとして使い回せるので、執筆作業の効率がグンと上がります。
パターン化したブロックを呼び出すには
マイブロックに登録したパーツは、ブロック挿入ツール内にある「パターン」のタブから選択できるようになります。
パターン化したブロックを呼び出す方法については、後ほど詳しく解説します。
マイボックスを記事に挿入し、それを一つひとつ装飾していくのは非常に非効率。
あらかじめパターンとしてマイブロックに登録しておけば、使いたいときに簡単に呼び出すことができますよ。
＜特徴２＞ブロックエディタで作成したパーツをショートコードとして挿入できる
マイブロックを作成すると、同時にショートコードも作成されます。
これがめちゃくちゃ便利で、作業効率化するためにも絶対に使ってほしい機能です。
何が便利なのかというと、
- 記事編集以外でもブロックエディタで間接的に編集できる
- メインを修正すれば、ショートコード側も自動で修正される
大きくこの2つです。
ちょっとわかりにくいと思うので、詳しく解説したいと思います。
記事の編集以外でもブロックエディタで間接的に編集できる
WordPressのバージョンが5.9 になった現在でも、プロックエディタが使えない編集画面があります。
カテゴリーの編集画面や、ウィジェット編集などがそうです。
カテゴリー編集ページはクラシックエディタなのでまだ編集しやすいほうですが、ウィジェットの方はクラシックエディタですらないただのHTML編集エディタです。
文字を書き込むだけならいいんですが、装飾パーツを使ったコンテンツを挿入するのは大変。。。
これを解決するのが、マイブロックのショートコードです。
- マイブロックの編集画面でコンテンツを作成する
- 作成されたショートコードをカテゴリ編集ページやウィジェットに貼り付ける
たったこれだけで、装飾が困難な場所でも、凝ったコンテンツを表示させることができるようになるんです。
メインを修正すれば、ショートコード側も自動で修正される
マイブロックで新規パーツを作成すれば、ショートコードも同時に作成されます。
このショートコードを表示させたい記事に貼り付ければ、マイブロックとして作成されたパーツがそのまんま表示されます。
さらにはマイブロックの編集画面で修正すれば、ショートコードを貼り付けたすべての記事でもその修正が反映されます。
この機能をうまく利用すれば、
- 記事下に表示する申し込みリンク
- 広告への誘導文
など、ユーザーの反応を見ながらPDCAを回したいパーツ の修正が楽になります。
さらには、冒頭の挨拶文や記事下に表示させるプロフィール文など、これからも変化していく可能性がある文章の定期的な修正も簡単になりますよ。
マイブロックにパーツを登録～呼び出しまでの手順
よく使うパーツをマイロックに登録する手順について詳しく解説してきます。
今回はわかりやすいように、注意のマイボックスを登録したいと思います。
注意
これです！
１．ダッシュボードを開き、「マイブロック」→「新規追加」の順にクリック。
２．マイボックスの編集画面が開くので、タイトルを入力し、マイボックスを作成します。
例として、タイトルは「注意（マイボックス）」にしました。
３．カテゴリー名を入力し、「公開」をクリックすれば登録完了です。
カテゴリー名の頭に数字を入れることで、表示させる順位を調整できます。
マイブロックに登録したパーツの呼び出し方
登録したパーツを記事内に挿入する
マイブロックに登録したパーツは、「パターン」として呼び出し、記事に挿入することができます。
実際に記事内で使う手順を解説していきます。
１．記事作成画面の左上にある「＋」をクリックし、ブロック挿入ツールを開く。
２．真ん中の「パターン」タブに切り替えると、マイブロックとして登録したパーツが表示されます。
操作イメージ
３．参照の左にカテゴリー選択があるので、カテゴリーを選び、パーツをクリックで記事に挿入されます。
ちなみに、パターンタブを開いたときにデフォルトとして表示させたいカテゴリーがある場合は、カテゴリー名の頭に若い数字をつければ優先的に表示させることができますよ。
イメージ
ショートコード化して使い回す
ショートコードとして使う前の準備
マイブロック編集画面にある「パターンに追加しない」にチェックを入れておきましょう。
ショートコードとして使うパーツを「パターン」に表示させてしまうと邪魔になるので、それを防ぐための対策です。
操作イメージ
ウィジェットにショートコードを挿入する
１．まずはじめに、ショートコードをコピーします。
マイブロック一覧画面を開くと、ショートコードが表示されています。
[st-myblock id="○○○○"] ← カッコを含めるコードをすべてコピーする。
２．「外観」→「ウィジェット」を開きます。
マイブロックに登録したパーツを表示させたいエリアに「STINGERカスタムHTML」をもっていき、コピーしておいたショートコードを貼り付け保存します。
操作イメージ
これで、ウィジェットエリアに表示されました。
あとは、マイブロックの編集画面で修正してあげれば、その変更がショートコード先にも反映されます。
以上がマイブロックの便利な使い方でした。
