サイドバーの項目をスクロール

サイドバーの項目をスクロール

カスタマイズ
2015/02/15 0
vanillaice (Akira)
vanillaice (Akira)
Instruction HTML CSS 初心者向け

2019.5.31に追記を行っています。

カテゴリなんかが増えていくと サイドバーの縦幅が必然的に長くなって不格好になります。短文記事の横に縦に長~~~いサイドバーというのは鬱陶しいものでございます (´・ω・`)

サイドバー… プラグイン表示されている方がほとんどだと思いますが、各項目の縦幅を予め決めてしまい溢れた分はスクロール表示にする方法ですね。初心者さんにはこれが一番手っ取り早いかと思います。

テンプレートのソースではなくプラグインの設定からやりますので、
設定 > プラグインの設定
こちらから該当プラグインの
詳細 > プラグイン改造 > HTMLの編集
までたどり着きましたらまずソースの頭に以下の内容を追加します。

<div style="height: 縦サイズpx; overflow-y: auto;">

続いてソース末尾に

</div>

を追加。スクショ ↓ 縦幅が 200px を超えたら自動でスクロールバーが出るような指定です。縦幅が小さすぎるとパソコンでの操作が困難に、大きすぎると今度はスマホでの操作が困難になりますので、200〜400pxを目安にされると良いと思います。

---- ここから追記

本記事を書いた当初から日が経ちまして、現在では スマートフォン表示最優先時代 です。スマートフォンを基準に考えるとやはり縦方向のスクロールバーは理想的ではないと感じています。

また、本記事内のスクリーンショットはWindowsの様子です。Macの場合は実際スクロール動作が発生するまでスクロールバーが出ない、というのがデフォルト設定です。 Macではスクロールバーは表示です

そういう時代的な背景もあり、現在ではまた別の提案が必要かな、と思います。

---- 追記ここまで

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ