パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。
webサイトやブログ等、説明文などが長くなる場合には、クリックした方だけに見ていただくように折りたたみで表示（アコーディオン表示）しようと思ったことはないでしょうか。
ページに動きを加えるにはcssやスクリプト等、プログラミングの知識が必要ではないかと思われるかもしれませんが、今回はアメブロなどでも使えるhtmlだけでもできるアコーディオン表示をご紹介します。
アメブロでHTMLだけで作るアコーディオン表示
Result枠に表示されているアコーディオン表示を作成します
Result枠内の「タイトル」をクリックすると、アコーディオン表示が確認できます。
See the Pen OJMVPwb by kurikinton (@kurikin) on CodePen.default
HTMLの枠内の文字列をコピーします
上のHTMLの枠内の文字列をコピーします
アメブロのブログ記事を書く画面を表示します
アメブロにログインし、「ブログを書く」画面を表示します。
下にある「HTML表示」をクリックします。
コピーした文字列を貼り付けます
あらがじめコピーしておいた文字列をここに貼り付けます。
アコーディオン表示を確認します
下のタブの「通常表示」をクリックします。
アコーディオン表示のタイトルが表示されていますので、クリックします。
折りたたまれていた内容が表示されました。
他にもオプションが付けられます
サンプルのタグは
- マウスのポインタをリンクと同じスタイルに変更
- タイトルの枠なし
の２つのオプションを付けています。
フォントや色を変えたり、アコーディオン表示の▶マークを変更したりと、興味がある方はさらにチャレンジしてみてくださいね。
ポイント
- ブログ編集画面はHTML表示にする
- summaryタグはアコーディオン表示が閉じている時の内容
- detailタグはアコーディオン表示が開かれた時の内容
少しの工夫で読みやすいページにしよう♪
難しいことをしなくても、少し工夫するだけで読んでくださる人にやさしいページにすることができます。
このくらいなら、と興味を持っていただけたら嬉しいです。
女性フリーランスの方向けのアメブロカスタマイズをしています
WEB DESIGN La pureté （ラ・ピュルテ）では女性フリーランスの方向けにアメブロカスタマイズをしています。
ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。
