\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

WordPressで投稿記事内に「続きを読む(more)タグ」を入れるプラグインはこれ!

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ ブログデザイン
この記事は約11分で読めます。

この記事では、WordPress/Cocoonで、投稿記事内に「続きを読むボタン(moreタグ)」を入れるプラグインをご紹介いたします。

ブログを書いていると、やたら長い文章になってしまい、「見たい人だけ見れる表示にしたい…」と思いますよね。

しかしmoreタグは、投稿記事内に挿入しても効かないものなんですね。(後ほど理由を説明します)

そこで今回は、続きを読む(moreタグ)を入れたかのような表示になる、アコーディオンメニューをご紹介いたします。

今からこれをつくるよ
プラグイン入れるだけ3分で完成
今からこれをつくるよ
表示方法は39パターンあるよ
今からこれをつくるよ
簡単だよ!
スポンサーリンク

投稿記事内に「続きを読む(moreタグ)」を入れても効かない理由

理由は簡単。

moreタグはそもそも、記事一覧の表示方法が、開いた状態で反映されるタイプのブログに適用するタグだからです。

記事一覧が開いた状態とはこれ

WordPressで投稿記事内に続きを読む(moreタグ)を挿入するカスタマイズ
クリックすると拡大します

このブログは私のはてなブログです。(実物を見てみたい方はこちら

こういった、トップページに本文が丸出しのタイプのブログに対し、

moreタグを入れて、「続きを読む」リンクを生成するとスッキリ見えますよ、というタグ。

なので、投稿記事内でmoreタグをつかうというのは、そもそもタグの使い方が間違えているんですね。

みんなが実現したい続きを読む(moreタグ)はこれ

皆さんがイメージしている、続きを読む(moreタグ)は、

「一部分を折りたたんで表示するもの」という認識だと思います。

なので、投稿記事内に何かしらのタグやらカスタマイズをして、クリックすれば以下を表示する仕組みにしたいということ。

これを実現するのは、アコーディオンというメニューです。

アコーディオンとは

ここをクリックしてみて
これをアコーディオン、アコーディオンメニュー、アコーディオンパネルといいます。
ここをクリックしてみて
これをアコーディオン、アコーディオンメニュー、アコーディオンパネルといいます。
ここをクリックしてみて
これをアコーディオン、アコーディオンメニュー、アコーディオンパネルといいます。

アコーディオンは、CSS&HTMLを使って表示する方法と、

プラグインを入れてショートコードを挿入する方法があります。

今回は、プラグイン Shortcodes Ultimate を使って、アコーディオンメニューを作る方法をご紹介します。

投稿記事の本文を折りたたむアコーディオンプラグインの導入&使い方

1:プラグインを入れる

ダッシュボード > プラグイン新規追加 > Shortcodes Ultimate を検索

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

すると↑のような Shortcodes Ultimate というプラグインが出てくるので、

今すぐインストール をクリックして、有効化してください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

ダッシュボードのメニューにショートコードのボタンが出てきたらOK。

これで導入は終わりです。次に使い方をご説明します。

2:Shortcodes Ultimateの使い方

まずは投稿記事をひらいてください。

何か文字を打つと、[]ショートコード というボタンが出てくるのでこれをクリック。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

すると、ショートコードで使用できるものが一覧で出てきます。

この中の、アコーディオン を選択してください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

下記のようなショートコードが出てくるので、ショートコードを挿入をクリック。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

するとショートコードが挿入されます。

このショートコードが、アコーディオンの本体です。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

スポイラーのタイトル部分にタイトルを入力してください

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

非表示のコンテンツ部分に、隠したい中身を入力してください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

入力できたら完成です。

できあがりはこんな感じ

テスト1
テストテストテスト
テスト2
テストテストテスト
テスト3
テストテストテスト

では次に、このアコーディオンのカスタマイズをご紹介します。

アコーディオンを好きなスタイルとアイコンにカスタマイズしよう

Shortcodes Ultimateは、デフォルトでいくつか種類を提示してくれており、

ショートコード内の、style=””icon=””をカスタマイズすることで、好みの設定に変更できます。

style要素は3つ、icon要素は13この計39パターン!

お好みにカスタマイズしてくださいね。

1:表示スタイル(style)のカスタマイズ方法

ダッシュボード > ショートコードAvailable Shortcodeアコーディオンをクリック

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

ショートコードという枠が出てきます。

ここは、ショートコードを呼び出した時の、コード内容を変更するエディターになります。

※なお、編集ししたあとの設定はここでは保存されません。あくまでも編集画面。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

下にスクロールすると、styleの要素として使用できる3つの候補が挙げられています。

  • default(デフォルト)
  • fancy(ファンシー)
  • simple(シンプル)
投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ
クリックすると拡大します

これを、ショートコードエディタ部分のstyle=””の中にコピペしてください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

カスタマイズしたショートコードが出来上がったら、全体をコピーして、投稿画面へ。

[]ショートコードを呼び出し、コンテンツ枠の中に、先ほどのショートコードをペーストしてください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

ここで、プリセットをクリック。

ショートコードごとに名前を決めれるので、好きな名前を入力してOK をクリックしたら、

現在の設定をプリセットとして保存 してください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

これで、カスタマイズしたものが保存され、いつでも呼び出し可能になりました。

2:アイコンボタン(icon)のカスタマイズ方法

アイコンボタンのカスタマイズ手順は、スタイルと同様なので、

飛ばしたい方は飛ばしてください。

ダッシュボード > ショートコードAvailable Shortcodeアコーディオンをクリック

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

下にスクロールすると、iconの要素として使用できる13この候補が挙げられています。

  • plus (プラス)
  • plus-circle (プラスサークル)
  • plus-square-1 (プラスサークル 1)
  • plus-square-2 (プラスサークル 2)
  • arrow (矢印)
  • arrow-circle-1 (矢印円 1)
  • arrow-circle-2 (矢印円 2)
  • chevron (シェブロン)
  • chevron-circle (シェブロンサークル)
  • caret (カーソル)
  • caret-square (正方形のカーソル)
  • folder-1 (フォルダ 1)
  • folder-2 (フォルダ 2)
投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

これを、ショートコードエディタ部分のicon=””の中にコピペしてください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

カスタマイズしたショートコードが出来上がったら、全体をコピーして、投稿画面へ。

[]ショートコードを呼び出し、コンテンツ枠の中に、先ほどのショートコードをペーストしてください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

ここで、プリセットをクリック。

ショートコードごとに名前を決めれるので、好きな名前を入力してOK をクリックしたら、

現在の設定をプリセットとして保存 してください。

投稿記事に続きを読む(moreタグ)を入れるプラグインはこれ

これで、カスタマイズしたものが保存され、いつでも呼び出し可能になりました。

アコーディオンの表示パターン(随時更新中)

style=”default”、icon=”plus”

スタイルdefault、アイコンplus
スタイルdefault、アイコンplus
スタイルdefault、アイコンplus
スタイルdefault、アイコンplus
スタイルdefault、アイコンplus
スタイルdefault、アイコンplus

style=”fancy”、icon=”plus”

スタイルfancy、アイコンplus
スタイルfancy、アイコンplus
スタイルfancy、アイコンplus
スタイルfancy、アイコンplus
スタイルfancy、アイコンplus
スタイルfancy、アイコンpluss

style=”simple”、icon=”plus”

スタイルsimple、アイコンplus
スタイルsimple、アイコンplus
スタイルsimple、アイコンplus
スタイルsimple、アイコンplus
スタイルsimple、アイコンplus
スタイルsimple、アイコンplus
タイトルとURLをコピーしました