CSS

CSSって弄り始めると、ついつい「あ、じゃぁここもついでにやっちゃお！」と思っちゃって
あっという間に時間が経っちゃいますよね💦

ということで先日に引き続き、このブログのデザインを弄っていました。
h2見出しタグにメインカラーの下線を付けてh3見出しタグと差別化したので、 hrタグ(水平線)の色もメインカラーにしようと思ったのですがうまく行かず……

なんかいろんなこと書いてるサイトがあって混乱したのですが、最終的に以下で、
「限りなくデフォルトに違いけど色だけ変える」が実現できたかな、と思うのでメモっておきます。

hr {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(80,181,181,0.8);
  border: 0;  /*デフォルトデザインでは線がある場合があるので、消しておく。*/
  box-shadow: 0px 1px 1px 0px rgba(80,181,181,0.4);
}

↓こんな感じ

↑こんな感じ

参考

はてなブログ公式のデザインテーマであるNatural - テーマストアを結構気に入っているのですが
色々いじり始めると、デザインの「サイドバー」で設定した項目が記事や記事一覧の下にしか出ない(しかもそれぞれの項目の並び方も微妙……)のが無視できなくなってきました。

自分で1からいじろうとしたらちょっとダルかったので、「他に同じこと考えてる人いるでしょ！」と思ってググったら見事にhit❗️

デザインテーマ：Naturalのデザインを２カラムにカスタマイズした。 - 命名って難しい

早速適用したのですが、

なんか右の白いエリアが余分でもうちょっと詰まらないか、とか
幅を狭くしていったら要素が重なっていく！とか

色々足らない部分があるんですが、とりあえず反映。

と御本人も書かれているように、表示が崩れてしまいました……😢

ということで、これをベースに改造してみました🔧

/* for side bar */
#container {
  width: 75%; /* 変更前の指定値: 800px */
  min-width: 800px; /* 変更前の指定値: なし */
  padding-right: 30px; /* 変更前の指定値: 50px */
}
/* width: about 60px */
.entry-date, .entry-header-menu > a {
  left: -70px; /* = #mainとの間隔は 約10px */ /* 変更前の指定値: -90px */
}
#main {
  float:left;
  width:70%; /* 変更前の指定値: 650px */
  margin-left: 30px; /* 変更前の指定値: auto(実質75px) */
  margin-right: 30px; /* 変更前の指定値: auto(実質75px) */
}
#box2 {
  float:left;
  width: 160px; /* 変更前の指定値: 650px */
}
#bottom-editarea {
  clear:left;
}

これが最適ではないかもしれません(paddingとmarginの使い分けがわかってない…😢)が、とりあえず以下は達成できました。

余白の調整
ウィンドウを小さくしても重ならない
記事の投稿日付の領域が隠れない

補足

HTMLとnatural.cssを見るとはだいたい以下のような構造になっていました。

- #container : 背景が白の部分 : 800 pxで指定されている
    + ...
        + #wrapper
            + #main : メインのカラム : 650 pxで指定されている
            L #box1 : ？(自分の場合は空でした)
        L #box2 : 右カラム : 650 pxで指定されている
     L #bottom-editarea : デザインの設定で指定できるフッタ領域

方針として、テーマの方のCSSで固定値が指定されている要素の値を変更することにしました。

元にした記事のCSSがwidthをパーセント指定してたのと、
ウィンドウを広げた時にある程度追従した方がみやすかろうと思ってパーセント指定にしてますが、
別にこれは固定値指定でも問題ないと思います。

今回は、右カラムはそもそも小さめなので固定幅にして、残りの部分がメインカラム+余白になるようにしました。

#containerにmin-widthを設定することで、背景が白の部分の幅が元々の大きさより小さくならないようにしています。

.entry-dateは記事の投稿日付領域、.entry-header-menu > aは(自分にしか見えないはずですが)記事の投稿日付領域の下に出現する[編集]ボタンです。
これのleftの値の絶対値を下げることで、記事の投稿日付領域とメインカラムの間の余白を詰めました。

そして、記事の投稿日付領域が隠れないように、#mainのmargin-leftで余白を確保しました。
記事の投稿日付領域の右の余白の大きさは以下(多分……)

{50px(#containerのpadding-right) + 20px(#containerのleft) + 30px(#containerのmargin-left)}
    - 70px(.entry-dateのleft)
= 100px - 70px
= 30px

あと、私はカスタムのフッタ領域(#bottom-editarea)を設定してたんですが、それも右カラムの下に行っちゃってたのでclear:left;でfloat:left;を解除てちゃんとページ下部に表示されるようにしました。

もし誰かのお役に立てれば幸いです。

遠き君へ

〜インターネットの最果てで自分語りを垂れ流したり垂れ流さなかったりするブログ〜

hrタグ(水平線)の色を変えつつ他は限りなくデフォルトの状態にする

公式デザインテーマ：Naturalのサイドバーを右カラム化

補足