Gスカの3D素材やPCゲーブログ

ゆっくりキャラボイス設定記事、怖い話動画数800以上!とか、マイクラネタ(MOD、役立ち情報、データ解析)や、動画に使える自作MMD素材の配布とか記事にしてます。

【便利】はてなブログのリンクをクリックで展開するようにする

はてなブログのサイドバーにあるリンクリストですが、リンクが増えれば増える程縦長になっていってしまいますね。

縦長になっていって困る!なんとかしたい!って人!

こんなのどうですか!?

 

普段はこんな感じ

 

クリックすると登録したリンクが全て表示

 

やり方は簡単です。コピペOK!

(自分用に使う場合は許可コメントとかいりません、自分のブログで紹介したい!という場合のみ私のブログ名とこの記事のURLをお願いします)

 

まずはてなブログのデザインからレンチマーク(工具)→サイドバー→モジュールを追加→HTML

 

HTMLの場所に以下を記述

<details class="Linklist">
  <summary>リンク</summary>
  <ul>
    <li><a href="URL">リンク先のタイトル</a></li>
    <li><a href="URL">リンク先のタイトル</a></li>
    <li><a href="URL">リンク先のタイトル</a></li>

  </ul>
</details>

 

リンクは    <li><a href="URL">リンク先のタイトル</a></li> ってのをリンクの数だけ増やしてください。

またURLという所にリンク先のURLを貼り付け、リンク先のタイトルって所をリンク先のタイトルに変えてください。

終わったら適用を押す。

 

続いてレンチマークの下の方に高度な設定というがあり、デザインCSSというのがあります。

そこをクリックし、空いてる所に次を記述。

/*リンクリスト*/
.Linklist {
  display: block; /* デフォルトは'none'なので、開閉できるように変更 */
  margin: 0; /* 余白を0に設定 */
  padding: 0; /* 余白を0に設定 */
}

.Linklist summary {
  padding: 0.5em; /* 上下左右に0.5emの余白を設定 */
  background-color: #69AEFC; /* 背景色を設定 */
  font-weight: bold; /* 文字を太字にする */
}

.Linklist ul {
  list-style: none; /* デフォルトのリストマーカーを非表示 */
  margin: 0; /* 余白を0に設定 */
  padding: 0; /* 余白を0に設定 */
}

.Linklist li {
  margin-bottom: 0.1em; /* 各リストアイテムの下に余白を設定 */
}

 

上記の項目で数字をいじれば大きさや色等が変更出来ます。

あとはビュー画面で確認し、それで問題が無さそうでしたら変更を保存するを押せば終了です。