ライブドアブログで相互リンクが増えてくると、サイドバーのリンク一覧が長くなり、記事本文よりもサイドメニューの存在感が大きくなってしまうことがあります。そんな場合は、リンク一覧を折りたたみ式にすることで、ブログの見た目をすっきり整理できます。この記事では、ライブドアブログで相互リンク欄をコンパクトに表示する方法や、HTMLやCSSを使った簡単なカスタマイズ方法について解説します。
相互リンク欄が長くなる問題を解決する折りたたみ表示
ブログ運営を続けていると、交流が増えたり相互リンクの依頼が増えたりして、サイドバーのリンク一覧がどんどん長くなることがあります。
リンク数が少ないうちは問題ありませんが、数十件以上になると訪問者が記事本文へたどり着くまでにスクロールが必要になり、ブログ全体のレイアウトにも影響します。
そこで便利なのが、普段はタイトルだけ表示して、クリックすると内容を開閉できる「折りたたみ表示」です。必要な人だけリンク一覧を確認できるため、ブログの使いやすさを保ちながら相互リンクを掲載できます。
HTMLのdetailsタグを使った簡単な折りたたみ方法
現在のHTMLでは、JavaScriptを使わずに折りたたみ表示ができるdetailsタグとsummaryタグを利用できます。
ライブドアブログのサイドバー設定で相互リンク部分を編集できる場合は、以下のような形で記述できます。
<details>
<summary>相互リンク一覧を表示</summary>
<ul>
<li><a href="リンク先URL">ブログ名</a></li>
<li><a href="リンク先URL">ブログ名</a></li>
</ul>
</details>この方法では、「相互リンク一覧を表示」という部分をクリックすると、登録したリンクが開きます。閉じる場合も同じ場所をクリックするだけなので、訪問者にも分かりやすい仕組みです。
＋ボタンや－ボタン風の表示に変更する方法
標準のdetailsタグでは三角形の開閉マークが表示されますが、CSSを利用すると＋や－のボタンのようなデザインに変更できます。
例えば、summary部分にアイコンを付けることで、開く前は「＋」、開いた後は「－」のような見た目にできます。
<style>
details summary {
cursor:pointer;
font-weight:bold;
}
details[open] summary::before {
content:"－ ";
}
details:not([open]) summary::before {
content:"＋ ";
}
</style>このようなデザインにすると、訪問者が「クリックすると内容が開く」と直感的に理解しやすくなります。
ライブドアブログで編集する場所
ライブドアブログでは、相互リンクは主にブログパーツやサイドバー設定から追加されています。そのため、まず管理画面からサイドバーやブログパーツの編集画面を確認します。
HTMLを直接編集できるブログパーツを利用している場合は、そこに折りたたみ用のコードを追加できます。
例えば、現在「フリーエリア」などのブログパーツ内にリンク一覧を書いている場合、その部分をdetailsタグで囲むだけで折りたたみ表示に変更できます。
折りたたみ表示にするときの注意点
相互リンクを折りたたむ場合でも、検索エンジンや訪問者にとって分かりやすい構造にすることが大切です。
リンク数が多い場合は、ジャンル別に分ける方法もおすすめです。「個人ブログ」「写真ブログ」「趣味ブログ」などカテゴリ分けすると、利用者が目的のサイトを探しやすくなります。
また、相互リンクはブログ同士の交流を目的としたものなので、単純に数を増やすよりも、関連性のあるサイトを整理して掲載する方が訪問者にも価値があります。
JavaScriptを使った高度な開閉メニューも可能
より細かい動きを付けたい場合は、JavaScriptを利用して開閉アニメーション付きのメニューを作ることもできます。
ただし、ライブドアブログではテンプレートや設定によって使用できるコードに制限がある場合があります。そのため、まずはdetailsタグを使った方法を試すのがおすすめです。
シンプルな折りたたみ機能でも、サイドバーの高さを大きく減らすことができ、ブログ全体の見やすさを改善できます。
まとめ
ライブドアブログの相互リンク欄が長くなった場合は、折りたたみ表示に変更することでブログのレイアウトをすっきり整理できます。
簡単に実装するならdetailsタグとsummaryタグを使う方法がおすすめで、HTMLを少し追加するだけで開閉式のリンク一覧を作成できます。
相互リンクが増えてきたブログほど、訪問者が見やすい配置に整理することが重要です。リンクを有効活用しながら、読みやすいブログデザインを目指しましょう。
コメント