【WordPress】yStandardカスタマイズ、yStandard Blocksの使い方

2020年8月20日

今回は、yStandard Blocksについて紹介したいと思います。
使用テーマはyStandardです。

yStandard Blocksのダウンロードとインストール

  yStandard Blocks yStandard専用のブロックエディター(Gutenberg) ブロックプラグイン。 インライン装飾機能や様々なブロック
wp-ystandard.com

公式サイトからyStandard Blocksをダウンロードします。zip形式で圧縮されたファイルですが、解凍する必要はありません。

プラグインの新規追加から、ダウンロードしてきたファイルを選択してインストール、有効化してください。

インライン装飾

まず、文章を書く際に追加されるインライン装飾を見ていきます。文章ツール中央にマーカー機能が追加されています。

マーカーを引きたい部分を選択してマーカーボタンを押します。マーカーの種類は3種類で、個別の設定で色や太さなどが変更可能です。

文章ツール右側にある下向き矢印をクリックすると、[ys]少し大きくなどのオプションが表示されます。こちらも大きく/小さくしたい部分を選択してクリックします。

後ろに(SP)と付いているものはスマートフォンでの表示になり、PC表示と分けることができます。

この少し大きく/小さくの倍率等も個別の設定で変更可能です。

マーカーの色や太さ、少し大きくの拡大率などは、yStandard Blocksの設定で変更することができます。右側にプレビューがあるので変更がどんな感じになるのか、見てわかるようになっています。

拡張ブロック機能

yStandard Blocksの拡張ブロック機能です。この中から使って見て便利だなと思ったものをいくつか見ていきたいと思います。

カスタムボタン

まずはカスタムボタンですね。本来cssで整える装飾もわかりやすく、簡単に設定できます。

カスタムボタンの設定では、特にラベルの左右にアイコンを表示する設定が便利だなと思いました。自分でこれをやろうと思うとアイコンとのバランスなどが難しいため、簡単に設定できるのは嬉しい機能です。

通常、ラベルの文字数にあわせてボタンも伸びたり縮んだりしますが、ブロックボタン設定でボタンをブロック型にすると、ボタンの幅を自由に設定することができます。

カスタムカラム

カスタムカラムも見た目を整えるのにとっても便利です。通常ですと、段落ブロックの行数に応じて一番下のブロック位置がバラバラになってしまいます。

カスタムカラムの、[最後のブロックを下に揃える]に設定することで、綺麗にボタンブロックの位置を揃えることができました。

セクション

セクションブロックでは、背景を斜め線や波線などにすることができます。

ポイントは区切りの色設定ですね。サイトの背景と同じ色に設定することでうまく区切りを作ることができます。

また、はじめに中のコンテンツを作ってしまうとセクションブロックへの移動が大変なので、斜め背景等にする場合は、まずセクションブロックを作ってから中のコンテンツを作成していくといいと思います。

カスタム見出し

カスタム見出しでは、サブテキストを見出しの上下に表示することができます。

その他、区切り線の長さや太さ、色も設定できます。区切り線を表示させたときには、下側の余白を調節するといいかなと思います。

カード

WordPressでは、URLのみを入力した場合に横長タイプでページの概要を表示してくれますが、yStandard Blocksのカード型リンクブロックでは、カードタイプで表示させることもできます。

サイト内リンクなども、サイトのデザインにあわせて横型と縦型を選べますね。

  yStandard Blocks yStandard専用のブロックエディター(Gutenberg) ブロックプラグイン。 インライン装飾機能や様々なブロック
wp-ystandard.com

いかがだったでしょうか。
テーマにyStandardを使用しているなら、併せてyStandard Blocksを導入することでより強力にサイトをカスタマイズできると思います。機会があれば是非導入してみてください。