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

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

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

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

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

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

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

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

続いてソース末尾に

</div>

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

---- ここから追記

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

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

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

---- 追記ここまで

月間アーカイブを「折りたたみ」と「横並び」にカスタマイズ

月間アーカイブを「折りたたみ」と「横並び」にカスタマイズ

月間アーカイブの高さが大きすぎてお困りの方が多いようなので2つご提案しようと思います。...

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)