Beyond the Silence

Sound of Science

ブログのデザインを変えてみる

いつもありがとうございます。

いろいろデザインをいじってるとこなので、しばらく落ち着かないと思いますがよろしくお願いします。
 
今まではSharpNightというrokuzeudonさん作のデザインテーマを使っていた。
 
昔から暗い背景に明るい文字でブログを書くことが多かったので、今回もそれを踏襲している。このテーマはかなり自分の好みに近くて、ブログ開設当初からずっと使わせて頂いていた。そろそろデザインに手を入れたいなと思う気持ちもあり、また、SharpNightテーマはシンプルさが売りなので、サイドバーの過去記事をカレンダーにしたときに、リンクとして表示される記事の日付の色がわかりにくいという問題が出てきた。なのでちょっと浮気してみようかと。
 
今試しているのが、同じダーク系の公式テーマSolidと、ダーク背景に白のカンバス、赤をアクセントにつかったBordeauxのふたつ。どちらも良いけど、やっぱり自分は暗めの背景が好きかな。。
 
まだマクロメディアが出していた頃のDreamweaverしか扱ったことがなく (当時も、ダークグリーンの背景に白と黄色とライトブルーの文字という変わったデザインのホームページを作っていた)、cssの知識も全くないのだが、

nekonkeo.hatenablog.com

さんの記事を参考にしてカスタマイズに挑戦してみたい。

 

とりあえずSolidでいくことにして、cssを取得しテキストエディットに貼り付け。

Solidのテーマはちょっと右側のメインのコラム幅が狭いのが難点。フリーのhtmlエディタをDLしてやってみたが使い勝手が悪かったので (使いこなせてないだけとも言う)、テキストエディットで

}

#container-inner {

  width: 1024px;

}

 

#main {

  width: 673px;

}

 

.entry-header {

  margin-bottom: 25px;

  position: relative;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  border-bottom: 1px solid #3d4043 \9;

  /* IE8 and below */

  padding-left: 50px;

  padding-right: 100px;

  padding-bottom: 5px;

  left: -50px;

  width: 573px;

}

#footer-inner {

  margin-left: 250px;

  border-left: 1px solid;

  border-color: rgba(255, 255, 255, 0.1);

  border-color: #3d4043 \9;

  /* IE8 and below */

  width: 673px;

  padding: 20px 50px;

  text-align: center;

}

/* CATEGORY */

.page-category-category_name .breadcrumb {

  border: 1px solid rgba(255, 255, 255, 0.1);

  border: 1px solid #35383a \9;

  /* IE8 and below */

  background: rgba(0, 0, 0, 0.2);

  background: #202325 \9;

  /* IE8 and below */

  font-size: 13px;

  color: #c1cdd6;

  width: 653px;

  padding: 10px;

}

あたりの、幅を決めてるっぽい数字をいじっていった。container-innerが951pxだったので、1,024に広げ (+73px), 他のも同じ分プラスすると整合性が保てる模様。

ちゃんとしたスタイルシートの知識があればこんな面倒なことしなくてもいいのだろうなぁ。そのうちレスポンシブデザインにも手をつけたい。Solidは非対応のためスマートフォン用画面に戻しました。

 

とまぁここまでやったんだけど、ダークの背景に明るい文字 (特にTwitterや他記事貼り付けなどの白が背景になる)は目が疲れるとよく言われているので、Bordeauxを試してみるかもしれない。

f:id:aurora3373:20160304211039j:plain