はてなブログに長い参照文や資料の掲載する時、記事自体が長くなりすぎダラダラ感を感じてしまいます。
そんな時はクリックでコンテンツを開閉させる、アコーディオンで折りたためば簡素化された記事になります。
例えば商品説明など、興味があれば見るけれど、無ければ飛ばして読めるようにしておきます。
これだけで十分に記事が短く表示されますので、離脱を防げるのではないでしょうか。
がオススメ！
アコーディオンでコンテンツを隠しておく
こんな感じで利用するのはいかがでしょうか？
現在 私の「はてなブログ」サイトは閉鎖いたしましたが、通常の「はてなブログ」で動作するカスタマイズとなります。
このアコーディオン表示はWordPressのプラグインにて動作しています。
- ここひえはあなたの周りだけを冷やす省エネクーラーです
- どこにいてもひんやり快適！吹出口最大-12℃も冷たい風を実現
- 電気代 約95％オフ！一晩つけても約1.3円
- ぐっすり熟睡！低騒音ファン
- USB/コンセント どちらも使えて便利
- 扇風機より涼しい風が出る「ハイドロチルテクノロジー」
- 軽量コンパクト！持ち運びらくらく
- ペットにも優しい涼しさ
- エアコンとは違う！潤い冷風で乾燥知らず
通常だとダラダラします。
しかし、アコーディオンで開閉すればシンプルな感じです。
[accordions id=”11472″]かなり省スペースになります。
設置方法
HTMLとCSSだけで実装も出来るのですが、ココはjQueryを使って行います。
HTML記述
まずはHTMLです。
これは記事投稿の画面に記述してください。
通常の記事に入れ込みます。
私はMacを使用していますが、記述を覚えさせておくのに、Clipyというクリップボード管理アプリを使用しています。
とても便利です。
使用方法は「Mac Clipy」で検索すればたくさん出てきます。
CSSの記述
CSSの記述は「デザイン」→「カスタマイズ」→「デザインCSS」に記述します。
jQueryの記述
jQueryを呼び出すスクリプトを記述します。
「設定」→「詳細設定」→「headに要素を追加」に記述します。
「デザイン」→「カスタマイズ」→「フッタ」へ下記スクリプトを貼り付けます。
まとめとして
どうでしょうか？無事アコーディオン開閉は動作しましたか？
コピペだけなので難しくは無いかと思いますが、あなたのサイトカラーに合った色に変えたりすれば、良いのではないでしょうか。
コンテンツを隠すことで、訪問者が記事全体を見渡すことができるので、親切かなと思われます。
はてなブログを運営していましたが、訳あって閉鎖しました。
そちらのサイトから「はてなブログのカスタマイズ」だけをピックアップし、コチラに移行しました。
フォントの変更や文字色の変更など、WordPressに合わせてモデファイしておりますが、文章的におかしいところもあります。
これは、なるべく「はてなブログユーザー」が理解しやすくするためです。
2020年11月
次の記事と前の記事
コメントはありません！最初の一人になる