show more

Gutenberg 記事の一部を折りたたむ方法 続きを読む   new


Gutenbergのブロックエディッタ「続きを読む」

記事の一部を表示せず、読みたい人だけが「続きを読む」をタップすることで文章を表示させる方法を記載しておきます。

show more
続きを読む

プラグイン WP show more

プラグイン Show more を利用します。ショートコードを利用するのでとても簡単です。

WP show more をインストール・有効化

ショートコード [/show_more][ ~ / show_more] 間の記事を折りたたむことができます。

  • WP show more をインストールする
  • WP show more を有効化する

プラグインをインストールする前には、もしものためにバックアップをとっておきます。

記事に「続きを読む」を挿入する手順

ショートコードを利用します。WP show more を有効化すると、設定などありません。ショートコードを利用するだけです。

(例)続きを読むをクリックすると、折りたたんである記事が表示されます。


»» 続きを読む

WP show more を
インストール・有効化し
ソートコードを記述しました。

»» 閉じる


「続きを読む」のショートコード

ショートコード

[show_more more=”続きを読む” less=”閉じる” ]
[/show_more]
※[ ]は全角で記載しています。

ショートコード間の記事が折りたたまれます。続きを読む閉じるは他の言葉を入れても構いません。

(例)の記述

上記(例)のショートコードは次の通りです。「続きを読む」で表示され、「閉じる」で非表示になるように設定しています。

[show_more more=”続きを読む” less=”閉じる” color=”#ff69b4″ list=”»»” size =”150″ ]
[/show_more]
※[ ]は全角で記載しています。

「続きを読む」の文字色・サイズを変える

次のパラメーターが使えます。

  • more=”show more”
  • less=”閉じる”
  • color=”#0066CC”
  • list=”»”
  • align=”left” | “center” | “right”
  • size=”120″
more=”show more” リンクテキスト・表示する
less=”閉じる” リンクテキスト・非表示
color=”#0066CC” リンクの文字の色
list=”»” リンクテキストの前に付ける
align=”left” | “center” | “right” 左・中央・右
size=”120″ リンクの文字の大きさ(%)

About ゆきを

ジャンルに拘らずに、好きなことを書いてます。 趣味であったり、覚書きであったりします。 むずかしい言葉を使わず、流行りの言葉を使わないように書いてます。