ロゴ

SANGO Gutenberg(サンゴグーテンベルク)を使って、『Minimal』でタイムラインを使う方法

web webデザイン

こんにちは、さる基地(@sarukichi2019)です。

ブログを書いていると時系列で書きたいということはありませんか?
そんな時は、WordPress有料テーマSANGOのグーテンベルク機能が便利です。

ちなみに、当ブログのWordPressテーマ『minimal』は機能がほとんどカットされている超シンプルテーマですので、テキスト装飾するのも自分でカスタマイズが必要になってきます。

私は、WordPressのMimimalユーザーでもあり、別ブログではWordPress有料テーマ「SANGO」ユーザーでもありますので、Minimalで無理やりSANGOグーテンベルクのタイムライン機能を使ってみました。

この記事では、

SANGOGutenbergに実装された「タイムライン」機能をMinimalで使う方法

を解説します。

まずはSANGOGutenbergプラグインをダウンロード

前提としてクラシックエディタではなく、WordPressに実装されましたGutenbergを使います。

SANGO公式ページから、SANGOGutenbergプラグインをダウンロードします。


ダウンロードしたらインストールします。

こんな感じでプラグインが追加されます。



SANGO Gutenberg用のCSSを追加しよう

追加したCSSは、下記です。

.sgb-tl-item__main>p,
.sgb-tl-item__main>ul,
.sgb-tl-item__main>ol,
.sgb-tl-item__main>.wp-block-button,
.sgb-tl-item__main>.sgb-box-simple {
margin: 0.8em 0;
padding-right: 30px;
}

.sgb-tl-item {
position: relative;
padding: 0 2px 1.5em 1.8em;
margin-left: 40px;
}

.sgb-tl {
margin: 1em 0;
counter-reset: item;
text-align:left;
}

.wp-block-image {

width: 90%;
margin: 10px auto;

}

div.yyi-rinker-contents {
width: 90%;
margin: 10px auto;
}

投稿画面で実際にSANGO Gutenbergを使ってみる

グーテンベルクからブロックを呼び出します。

これです。

こんな感じ↑のボックスが追加されます。

ボタンやタイトル付きボックスは、なかなか使える機能ですよ。

SANGO Gutenbergをさっそく使って入力してみたのが、こちらです。

ステップ1のタイトルですよ。
写真も入ります。

テキストも入ります。

 文章の回り込みも使えますよ。

ステップ2のタイトルです。
タイトル付きボックスです。

タイトル付きボックスの中にテキストが入ります。

画像も入ります。

ステップ3のタイトル

おしまい。

いかがだったでしょうか?WordPressのグーテンベルクは慣れるとクラシックエディタより遥かに効率アップできますので、ぜひチャレンジしてみてください。

関連記事【マナブログ】ワードプレステーマ『Minimal』のデザインカスタマイズ【まとめ】

(完)