ブログ 学び

テキストをクリックで開閉させる方法/プログラミング不要【Shortcodes Ultimate】

2021-08-28

こんにちは、ろき(@rokilog_blog)です!

 

突然ですが質問です!!

Q.あなたはこれを作りたいですか?

ここをクリック
この記事ではこのクリックすると開くリストの作り方について丁寧に解説しています!
ここをクリック
最後まで読めば誰でも簡単にできます!

 

ブログやサイトでこんな機能を使ってみたいと思いませんか?

一見難しそうな気がするかもしれませんが、実際にやってみると簡単です!

この記事では、これを使うためのプラグインの導入方法から、その使い方まで分かりやすく解説していきます!

難しいプログラミングの知識は一切不要です!

それでは行きましょう!

 

記事内のテキストを開閉させる機能

 

記事内のテキストを展開したり畳んだりする機能を「スポイラー」と言います

以下のように、機能的なデザインを可能にします!

 

ここをクリックすると開閉します

これはダミーテキストです

これはダミーテキストで

これはダミーテキストです

これはダミーの表です これはダミーの表です

 

このように文字だけでなく、表や画像も一緒に隠すことができます!

 

なんか難しそう…。私には無理ですかね?
そんなことありません!プラグインを入れるだけで簡単にできますよ!

目次△

プラグイン「Shortcodes Ultimate」の導入方法

 

このスポイラーという機能は「Shortcodes Ultimate」というプラグインを入れることで誰でも簡単に使うことができます!

プログラミングの知識とかも要らないよ!初心者でもすぐに使えちゃう!

 

インストールの簡単な流れ

  • こちらからダウンロードします
  • WordPress管理画面の「プラグイン」から「新規追加」を選択します
  • 「プラグインのアップロード」を選択し、ダウンロードしたファイル(.zip)を選択しインストールします
プラグイン「Shortcodes Ultimate」の導入方法

ダウンロードの画面

プラグイン「Shortcodes Ultimate」の導入方法

ワードプレスにプラグインをインストール

もしくは

  • WordPress管理画面の「プラグイン」から「新規追加」を選択します
  • 「プラグインの検索」の欄に「Shortcodes Ultimate」と入力して検索します
  • 「今すぐインストール」をクリックし、インストールします
プラグイン「Shortcodes Ultimate」の導入方法

右上の検索枠に「Shortcodes Ultimate」と入力。一番左の[]マークのプラグインを「今すぐインストール」(画像はすでにインストール済みのため「有効」表示)

 

このプラグインはなんと約50種類もの機能を自由にカスタマイズして使用できます!

 

プラグイン「Shortcodes Ultimate」の導入方法

赤枠内は自由に使用可能(枠外は有料で開放)

 

目次△

スポイラーの使い方

step
1
ショートコード挿入ボタンをクリック

スポイラーの使い方

記事作成画面上部に出てきます

プラグイン「Shortcodes Ultimate」をインストールすると投稿画面に「ショートコードを挿入」のボタンが出るようになります

目次△

step
2
「スポイラー」を選択

スポイラーの使い方

数多くある機能の中から「スポイラー」を選択します

目次△

step
3
各種設定①

スポイラーの使い方

「開く」の設定は、ページを開いたときにコンテンツ(以下の「ダミーテキストです」部分)を表示した状態にするかどうかを決めます

スタイルのイメージ

スポイラーの使い方

スタイルは3種類あってそれぞれ上の表のようになります

この記事で使ってるのはデフォルトだけど、ファンシーの方が見やすいかも!

目次△

step
4
各種設定②

スポイラーの使い方

それぞれ以下のように表示されます(全てスタイルはデフォルトで表示しています)

アイコンのイメージ

スポイラーの使い方

その内容にあったアイコンを使用すればOK!

目次△

step
5
内容の入力とプレビュー確認

スポイラーの使い方


目次△

step
6
完成

編集画面にショートコード挿入


記事の表示(完成)

目次△

入れ子構造も作れる

このような入れ子構造のリストも作成することができます!

作り方も一度やってみれば簡単にできると思います

以下のようなコードを作ります

入れ子構造の作り方

赤線が引いてあるものが先ほどまで作成していたコードです

青線が引いてあるものはそれに1文字追加しただけのものです

その2つを使用して入れ子構造を作ります

イメージは、元の[ ]で閉じられた2つのコードの間にもう1セットのコードを入れる感じです

中に入れるコードの頭には両方とも「_」(半角アンダーバー)を付けます

それだけです

「_」をつけることと、この並びを間違えなければ上画像のような入れ子構造を作れます

また、さらに下の階層まで続けていきたい場合は、さらに「_」をもう1つ追加したコードを同じように中に入れていけばOKです!

目次△

まとめ:スポイラーを活用してブログを機能的に!

 

せっかくなのであえてスポイラーの機能を使ってまとめを書いていきます!

テキストを開閉させるリストを作るのは

一見難しいように思えますが、実は簡単です!

それはプラグインを入れるだけでできるからです!

そのプラグインこそが「Shortcodes Ultimate」です

このプラグインの約50種類もある機能のうちの1つである「スポイラー」

これを使って簡単にリストを作ることができます!

しかも、表示の仕方やアイコンなどの設定もクリックだけでできるほど簡単で

プレビューで確認しながら自分の好みの表示にこだわることができます!

今回紹介した使い方のとおりに操作するだけでOKです

プログラミングの知識や細かいパソコンの知識も要りません!

誰でも簡単に使えるというのがプラグインの良いところですね

 

これを使ってブログやサイトをより見やすく、より分かりやすくしましょう!

  • この記事を書いた人

ろき

会社員男性(簿記2級取得➔経理担当に!)/29歳/雑記ブログ「ろきろぐ」運営/2021年6月開設/妻と娘と3人暮らし(new)/趣味:新しいことに挑戦すること、筋トレ/【iPadが勉強に最適だって伝えたい】 【取得資格等】 ①日商簿記2・3級 ②全経簿記1級 ③FP3級 ④TOEIC820点 【全てiPadを活用して勉強】

-ブログ, 学び
-,