最終更新日: 2020/02/27

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

こんにちは、ごま吉（@Lv1gomakichi）です。

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

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

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

この記事では、

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

を解説します。

この記事の目次

1 まずはSANGOGutenbergプラグインをダウンロード
2 SANGO Gutenberg用のCSSを追加しよう
3 投稿画面で実際にSANGO Gutenbergを使ってみる
4 SANGO Gutenbergをさっそく使って入力してみたのが、こちらです。

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

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

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

https://saruwakakun.com/sango/gutenberg-introduction：SANGO公式サイト

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

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;
}