どうも、
ブログ初心者のTBです。
今回は
ブロックエディターの使い方です。
ギモンくん
ドラッグストアの説明書
ついに
書くネタがなくなったのか？
いやいや、どうして。
Gutenbergにしても、
ブロックエディターにしても、
登場したのは最近ではないけれど
新しいツールですね！
自分でも日々使っていて
こんなことができたのか！
と思うことがたくさんあるので、
今回は
使っていて便利だと思った機能を
ちょっと書いていこうと思います。
- ブロックエディターの
便利な機能を紹介！
- ブロックエディターに興味がある方
- ブロックエディターで
記事を書いている方
Rinkerブロックのカスタマイズ
プラグイン「Rinker」は知っていますか？
ギモンくん
WordPressで
ブログをやっていて
知らない人はいないだろ！
そう。
WordPressでブログを始める際に、
解説サイトを見ると、
入れておいた方が良いプラグインの名前に
大体入っている、
WordPressを使っていたら
大体みんな知っている、
ブログを読んでいる人は
大体みんな見たことがある、
超有名プラグインですね。
↑ダウンロードと詳しい概要、説明はこちらから
Rinkerは、
ショートコードを作成して貼り付けることで
簡単に、見栄えの良い、
ブログカードのような
アフィリエイトリンクを作成することができる、
とても便利で使いやすいプラグインです。
このブログでも大変お世話になっています。
そのRinkerが、バージョン1.6で
ブロックエディターユーザーにとっても
より使いやすく、
より便利になりましました。
SWELLの場合ですと、
+ボタンからブロックを
追加する際に
レイアウト要素のカテゴリを
選択し、
その中にあるRinkerを
クリックします。
ブロックを設置すると、
商品リンクを追加する
と書かれたボタンがあるので、
そこをボタンクリックします。
公式サイトにある通りに
事前にアフィリエイト設定を
登録しておくと、
登録してあるアフィリエイトの
検索選択タブが出てくるので、
任意のタブを選んで、
検索ワードを入れて
検索し、商品を選びます。
３ステップで説明してますが、
ここまで数秒で終わります。
完成したRinkerブロックがこちら↓
……と、
ここまでは今までの状態。
このままでも超速で商品リンクが作れて、
充分便利ですが、
アップデートで更に便利になりました。
投稿記事の、
記事編集画面の右側にある
ブロックメニューから
- タイトル
- 画像サイズ
- Amazonボタンの文言
- 楽天市場ボタンの文言
- Yahooショッピングボタンの文言
- Kindleボタンの文言
これらを編集できます。
また、商品リンク管理への項目から
新しいタブを開いて
「商品リンク管理で編集」に飛べます。
上のリンクでいうと、
商品名のところが
ゴチャゴチャしていて
ちょっと見づらいですよね。
これを、
管理画面に行かずに、
記事を書きながら編集できる、
リアルタイムで結果を見ながら編集できる
というわけです。
↑タイトルを編集してみました。
ギモンくん
スッキリ！
ボタン部分も編集できるので、
自分だけのこだわりのリンクも作れますね！
再利用ブロック
これは本当に、つい最近知ったのですが、
めっちゃくちゃ便利です。
このブログでも、
表記が定型化している部分が結構ありますよね。
- この記事の内容
- こんな人にオススメ
- お薬は用法用量を守って
正しくご利用ください！
などなど。
今まではいちいち全部、
新規で書いていましたが、
あれ、実は
ブロックエディターでは
わざわざ書く必要がないんです。
ギモンくん
！？
たとえば、
ギモンくん
お薬は、用法・用量を守って
正しくご使用ください。
↑の場合、毎回ほぼ同じなので、
再利用ブロックに保存しておけば、
そのまま使えます。
これはほとんど定型文で、
注意書きではあるものの、
医薬品記事の最後には大体挿入している、
締めの言葉のようになっていますが、
再利用ブロックで設置しておくと、
「この部分やっぱり変えたい」
と思った場合、
再利用ブロックの編集を行うと、
今までそのブロックを設置してきた記事の
その部分が、全部、一括で変更されます。
ギモンくん
めっちゃ便利！
この記事の内容や、
こんな人にオススメのような
毎回中身は違うブロックの場合、
（一部を変更したい場合）
中身は変わっているので、
設置後に通常ブロックに変換して、
ガワだけ残して
中身は書き替えて使えます。
ギモンくん
あれって、毎回
どっちがどっちの色か、
とか、
キャプションの
定型文がどうだったか、
とか、
確認しながら書いてたよな💧
スマホで前記事を見ながら書いていましたが、
その手間もなくなります。
全てのブロックを再利用ブロック化できるので、
段落でも、テーブルでも、キャプションでも、
定型的に固定でよく使っている内容は、
保存して、いつでも呼び出して使えるので
めっちゃくちゃ便利です。
（２回目）
グループ化
従来のクラシックエディターでいうところの
ボックス表示は
段落の装飾と、
キャプションブロックで
分かれています 。
（SWELLの場合）
キャプションブロックの場合、
中に直接リストなどを
追加したりしますが、
段落の装飾で使われている
ボックスにしたい場合、
例えばリストを作った後で
グループ化すると、
外側をボックスで囲むことができます。
- あ
- い
- う
こんな感じです。
ボックスは見やすく、
メリハリをつける意味でも
結構使うと思うので、
知っていると便利です。
ギモンくん
使い方イロイロ！
アンカーリンク
見出しブロック使用時に、
画面右側メニューで一番下にある
高度な設定を開くと、
他のブロックでは
追加CSSクラスしかありませんが、
見出しでは、それに加えて
HTML アンカー という項目があります。
「アンカー」と呼ばれる、
この見出し専用の
一意の Web アドレスを
作成するために、
スペースを含まない単語
（英数字を使用することを
お勧めします）
を1つまたは2つ入力します。
見出しにアンカーを設定することで、
ページのこのセクションに
直接リンクできるようになります。
これもまた、超便利で、
アンカーを設置した見出しに
戻るリンクを作成することができます。
使い方は、
要領的には文字リンクを作る時と同じで、
最初に戻りたい見出しブロックの
高度な設定から
HTMLアンカーの設定で、
上記引用の通りに
文字列（英数字推奨）を入力し、
戻りたい文字列にリンクを作り
リンクアドレスは
#設定した文字列の形で入力します。
すると、
見出しに戻るリンクを作成することができます。
たとえば、このブログの前記事
のように、
H2見出し内で目次のような、
概要の説明、
H3見出しで
その内容の具体的な説明を書いた場合、
H3見出しにHTMLアンカーを設置し、
H２見出しの中の目次部分に
リンクを作成すると、
そこから、
読みたい部分に
直接飛ぶことができるリンクを作成できる、
といった仕組みです。
ギモンくん
便利！
ちなみにこれは、
同ページ内を移動するリンクのようで
２ページ以上の記事の場合、
２ページ目にアンカーを貼って、
1ページ目の見出しに戻る、
またはその逆のリンクを
設置することはできないようです。
アンカーを設置して、リンクを貼っても、
動作しませんでした。
直感的で便利な
ブロックエディター
クラシックエディターにも
ショートコードというものがあって、
そこに登録しておけば、
似たような感じになりますが、
僕はブロックエディターで書く前、
ボックス以外のショートコードは
ほとんど使っていませんでした。
なんか、面倒臭くて。
ギモンくん
おい！
文字列の編集みたいなことが多くて、
（書いている段階で
見た目でわかりづらくて）
ちょっと使いづらく感じていました。
ボックスはJINの場合、
メニューから選んで使えるので、
楽に、便利に使えました。
ブロックエディターだと、
ここまで紹介してきた
ほとんどのことがマウスクリックで
行えるので、
直感的に、
よりカンタン、手間いらずな感じで
記事内容に専念出来て、
書くのも楽しくなって、
とても良い感じですね。
書くというよりも作っている感じがします
※ブロックエディターでも
ショートコードは使えます。
（あります）
ギモンくん
楽しく、
良い記事を書く！
コメント