Webデザイン アメブロ

HTMLのみでできるアコーディオン表示

 

パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。

webサイトやブログ等、説明文などが長くなる場合には、クリックした方だけに見ていただくように折りたたみで表示(アコーディオン表示)しようと思ったことはないでしょうか。

ページに動きを加えるにはcssやスクリプト等、プログラミングの知識が必要ではないかと思われるかもしれませんが、今回はアメブロなどでも使えるhtmlだけでもできるアコーディオン表示をご紹介します。

 

 

 

アメブロでHTMLだけで作るアコーディオン表示

Result枠に表示されているアコーディオン表示を作成します

Result枠内の「タイトル」をクリックすると、アコーディオン表示が確認できます。

See the Pen OJMVPwb by kurikinton (@kurikin) on CodePen.default

 

HTMLの枠内の文字列をコピーします

上のHTMLの枠内の文字列をコピーします

アメブロのブログ記事を書く画面を表示します

 

アメブロにログインし、「ブログを書く」画面を表示します。
下にある「HTML表示」をクリックします。

 

コピーした文字列を貼り付けます


あらがじめコピーしておいた文字列をここに貼り付けます。


アコーディオン表示を確認します



下のタブの「通常表示」をクリックします。
アコーディオン表示のタイトルが表示されていますので、クリックします。

折りたたまれていた内容が表示されました。

他にもオプションが付けられます

サンプルのタグは

  • マウスのポインタをリンクと同じスタイルに変更
  • タイトルの枠なし

の2つのオプションを付けています。

フォントや色を変えたり、アコーディオン表示の▶マークを変更したりと、興味がある方はさらにチャレンジしてみてくださいね。

ポイント

  • ブログ編集画面はHTML表示にする
  • summaryタグはアコーディオン表示が閉じている時の内容
  • detailタグはアコーディオン表示が開かれた時の内容

 

少しの工夫で読みやすいページにしよう♪

難しいことをしなくても、少し工夫するだけで読んでくださる人にやさしいページにすることができます。
このくらいなら、と興味を持っていただけたら嬉しいです。

 

女性フリーランスの方向けのアメブロカスタマイズをしています

WEB DESIGN La pureté (ラ・ピュルテ)では女性フリーランスの方向けにアメブロカスタマイズをしています。

ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。

アメブロカスタマイズ詳細

 

お問い合わせ


WEB DESIGN La pureté ​へのお問い合わせはこちらからどうぞ。

お問い合わせ

LINE公式アカウントからもお気軽にご質問くださいませ♡

友だち追加
  • この記事を書いた人
WEB DESIGN La pureté 絢

WEB DESIGN La pureté 絢

藤本絢子 / Junko Fujimoto
Webデザイナー 東京都在住。
会社員時代はシステムエンジニアとしてソフトウエア開発に携わっていました。
女性や主婦の方が個人事業主として働く中で、本業に集中できるようパソコン関係のサポートを行っています。

-Webデザイン, アメブロ
-,

© 2020 WEB DESIGN La pureté