「Wix」はHTMLやCSSなどの知識がない初心者でも簡単に自分のホームページを作成することができるサービスです。
しかし、作成したページが情報が多すぎてなんとなく見にくいということもあるでしょう。そこで、今回はwixの「折りたたみテキスト」機能を使って、ページをスッキリと見やすくする方法をご紹介します。
折りたたみテキストとは何か
折りたたみテキストとは、ホームページやブログなどのウェブサイト上で、あるテキストを折りたたんで非表示にし、必要な場合に展開することができるテキストのことを指します。
折りたたみテキストは、大量の情報を表示する場合に最適です。展開ボタンをクリックすることで内容やリンク先のURLが表示されます。
サイト内に文章が多いと、活字が苦手な人にはストレスになるかもしれません。折りたたみテキストを利用することでサイト内の活字の表示を抑え、誰にでも見やすいサイト作りが可能になるのです。
Wixで折りたたみテキストを作る方法
それでは、折りたたみテキストを作る方法について詳しく見ていきましょう。
①折りたたみテキストを追加する
wixで「折りたたみテキスト」を利用するためには、まず最初にサイトにテキストボックスを追加する必要があります。手順は以下のとおりです。
まずはWixエディタ左側にある「パーツを追加」をクリックします。メニューがでますので「テキスト」を選択してください。そしてテキストのメニューの中から「段落」を選択します。右側に段落のメニューをスクロールダウンすると「折りたたみ可能テキスト」という項目が出てきます。
選択したテキストボックスをクリックまたはドラッグして、サイトに追加します。
これで、サイト上で折りたたみテキストを利用することができるようになります。設定をカスタマイズして、自分のサイトに最適なスタイルに設定しましょう。
下の画像は折りたたみテキスト使用した例です。
「Read more」をクリックすると全文が表示されます。
こちらのページ全体に折りたたみテキストを追加してみましょう。
いかがでしょうか、とてもスッキリした印象になりますね。
②テキストやリンクの編集
追加した折りたたみテキストの文章を編集してみましょう。展開ボタンの文章やリンクのテキストなど細かくカスタマイズできます。
まずは追加した折りたたみテキストを右クリックして「テキストを変更」を選択します。
このメニューでは様々な折りたたみテキスト全体に様々な変更を加えられます。
ボタンを押すと文章が展開されるのかリンク先に飛ぶのかの選択や、展開ボタンや折りたたみボタンの表示も変更可能です。
また、「SEO・アクセシビリティ」の下にあるメニューからディスクリプションを追加し、Googleにテキストの内容を伝えることもできます。hタグの追加もでき、簡単にSEO対策ができるので、必要であれば設定しておきましょう。
また、リンクを設定する場合はリンクに誘導するようなテキストを入力したり、リンクボタンに誘導するページ名や「詳細はこちら」などクリックをうながすテキストを入力してみましょう。
このようにWixではテキスト編集やSEO対策、リンクへの誘導もとても手軽に設定できます。
③折りたたみテキストのレイアウトを設定する
Wixでは折りたたみテキストの表示方法や、配置、間隔なども細かく設定できます。折りたたみテキストのレイアウトをサイトの雰囲気にマッチさせることでより全体を調和させる事ができます。
追加したテキストボックスを右クリックして「レイアウト」アイコンをクリックします。
設定画面が表れ、レイアウトの細かい設定ができます。全て表示を選択すると折りたたみテキストではなく、通常のテキストとして表示されます。ワンクリックで表示方法を変えられる便利な機能ですね。
全文を表示される前のテキストの行数の選択や、展開ボタンまたはリンクボタンの位置も変更できます。
またテキストとボタンの間隔を調整することで、折りたたみテキストボックスの周りに余白ができ、テキストをより読みやすくできます。
読者にちょっとしたクイズを出して答えだけ隠したい時や、最低限この情報は表示したいなど、目的に合わせて表示する文章を調整することで、よりサイトが魅力的になっていくでしょう。
折りたたみテキストの有効な活用方法
折りたたみテキストは、長い文章をコンパクトに表示するためにとても役立ちます。
特にスマホなどのモバイル端末では画面サイズが小さく、表示される情報が限られます。折りたたみテキストを使うことで、より重要な情報を前面に押し出すことができるんですね。
以下に折りたたみテキストの有効活用例をご紹介しますので参考にしてくださいね。
FAQページ
ウェブサイトのFAQページでは、さまざまな質問と回答を掲載する必要があります。これらの質問と回答を折りたたみテキストで表示することで、ページの見た目を簡潔にし、ユーザーが必要な情報に簡単にアクセスできるようになります。
連続した長文
サイトが文字で埋め尽くされてしまうと、読む前から読者が疲れてしまうことも。そんな時は折りたたみテキストを使って、記事の主要なポイントだけ表示しておき、読者が必要に応じて詳細を読めるようにしましょう。
商品説明
オンラインストアで商品を販売する場合、商品の詳細な説明は必須ですよね。しかし、長い商品説明は、ユーザーが商品を購入する前に読むのを躊躇することがあります。折りたたみテキストを使用して、ユーザーが必要に応じて詳細を読むことができるようにしましょう。
まとめ
折りたたみテキストは、情報の最適化やスッキリとした見た目など、多くのメリットがあります。ただし、過剰に使いすぎると、ユーザーが求める情報にアクセスできないということも起きかねませんので注意が必要です。
Wixパートナーのクリエイティブラビットなら、折りたたみテキストをベストな場所に配置し、サイトのデザインと読者の利便性を最大限に向上できます。
「オリジナリティが高く、洗練されたホームページを作りたい」とお考えの方はぜひお気軽にご相談ください。