どうも！LSSです！！
だいぶ久々に？デザインCSSを触ってみました。
…微々たる変更なんですが^^;
実は以前からやってみたかった！
↑この「実は以前からやってみたかった！」っていう見出し。
LSSは<h2>タグで書いています。
（ちなみに、はてなブログの編集画面でいう「大見出し」は<h3>、「中見出し」は<h4>で、<h2>は大見出しよりも上位の見出しになります。）
購読中のブログの中に「画面をスクロールしても、元々定位置にあった見出しが上部に残る」という設定になっているブログがあり、「どうやってるんだろう？」と思っていましたが、調べてみると結構簡単な記述で実現できるようです！^^
書き足したコード、わずか２行
この画面ですね。
で、だいぶごちゃごちゃ書いていますが、元々h2タグに対しては
h2 {
background: #b0dcfa; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em 0.5em 0em 0.5em;/*角の丸み*/
font-weight:bold;
text-shadow:-1px -1px 1px #00000080,1px 1px 1px #ffffff80;
}
こういう指定を書いていました。
そこに今回、
position:sticky;
top:30px;
の２行を追加しました。
それだけで実現します^^
結果としてコードは、
h2 {
background: #b0dcfa; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em 0.5em 0em 0.5em;/*角の丸み*/
font-weight:bold;
text-shadow:-1px -1px 1px #00000080,1px 1px 1px #ffffff80;
position:sticky;
top:30px;
}
こうなりました。
実際どうなるかは…
この記事をスクロールしてみていただくのが一番分かりやすいかと^^
top:30px;
としているのが「画面の上の方で停止した時の、画面上端からの位置」を指定している部分です。
元々黄緑のバーを設定しているので、それと重ならないように30pxにしましたが、それをしていないブログの場合は
top:0px;
でいいと思います^^
これだと「今、どの項目を読んでいるか」が分かりやすい、というメリットがありますね^^
…positionプロパティって、これまで主に absolute と relation をよく使っていましたが、新しい値「fixed」や「sticky」も面白い使い方ができそうですね^^
追記！見出しが複数行になった場合の対策
スマホで記事を開いた場合や、見出しの文字数が長いなどで「見出しが複数行になった」時に、「前の見出しの後ろのほうの文字が画面に残ってしまう」 という状態になってしまいます^^;
実際のところ、stickyに設定した要素（今回だと<h2>）は「その要素を囲んでいる親要素」が終わるまで、ずっと画面上に残り、同じ親要素をもつsticky要素はその上に乗るだけで、前の要素の方が大きい分にはハミ出してしまうんですね。
じゃあ、
<div><h2>タイトル</h2></div>
<div><h2>タイトル</h2></div>
<div><h2>タイトル</h2></div>
のように書いた場合には、「次の<h2>が来た時は前の<h2>は上に押し出され」て上手い具合になるのですが…「見出し」の概念的にはあまりよろしくないですｗ
position: stickyの面白い使い方と使用時の注意点 | Rriver
↑そのあたりの仕様は、こちらのページに具体的な説明がありました。
とりあえず…このブログとしては、以下のように変更しました。
h2 {
background: #b0dcfa; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em 0.5em 0em 0.5em;/*角の丸み*/
font-weight:bold;
text-shadow:-1px -1px 1px #00000080,1px 1px 1px #ffffff80;
}
.stk{
position: -webkit-sticky;
position:sticky;
top:30px;
height:130px;
}
position: -webkit-sticky;
を追加しているのは、こうしないとstickyに対応しないブラウザがあるからですｗ
で、そのstickyの設定を「h2」にではなく「stk」というクラスを持つ要素に対して指定、という事にしました。
あと、
height:130px;
を追加し、高さを広くとっています。
現在の文字サイズだと３行までこれでいけます^^
…もちろん、広くした事でそれだけ、後の文章のスペースが狭くなる、というデメリットもあります^^;;;
あとは記事のほうで見出しを書く時に、
<h2 class="stk">実は以前からやってみたかった！</h2>
のように書く事で、クラスにstkを指定した場合のみ、stickyに対応する事になります。
というわけで、このブログの過去記事はstickyになりません。
こうしておけば、過去記事の長い見出しを修正せずに済みましたｗ
…やっぱ本当は、なんとか過去記事自体に手を加えずとも、押し出しstickyにできれば一番いいんですけどね^^;
あ！むしろ、逆に広くなった見出しを装飾しちゃうという手も！？ｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
