読者です 読者をやめる 読者になる 読者になる

仕事は母ちゃん

どーってことない脳内と日常の垂れ流しです

ブログのテーマをInteract New Daysに変更しました

いろいろ ネット・CSS

今日は晴れ間も見えるということで、早朝からせっせと家事に買い物にと動き回ってたさっこさんですこんにちは。帰宅がお昼過ぎになってしまったので、慌てて昼食の支度をしたよ。そして昼食を済ませた長男は本日遅出なので2時過ぎに出勤しました。長男の職場がどんなところかと言うと「マスクつけてサウナに入って耐えられるのなら大丈夫やで」とのことで。真夏はそんな感じらしいです。まあ炉のそばで仕事してるから仕方ないんだけど。これから暑さも和らいでくるから、少しは仕事も楽になるかなあ。

さて、昨夜突然ブログのテーマを変えたくなりまして、Interact New Daysというテーマに変更しました。カスタマイズしやすそうだったのが選んだ理由です。作者のid:interactingさんご自身がテーマのカスタマイズについて解説してくださってますので、初心者でも簡単なカスタマイズならできると思います。
というわけでちょっとだけですがカスタマイズしております。テーマ適用+グローバルナビゲーション追加だけだとこうなります。

f:id:plutan:20160924152305p:plain

これをあれこれいじりましてこうなったわけです。

f:id:plutan:20160924151612p:plain

ついでにAboutページも編集できるようになったことだし、さっくり書き換えました。

f:id:plutan:20160924160405p:plain

で、どうカスタマイズしたかを全部書くと長くなっちゃいますので、私がテーマをいじるときに必ずやってることだけを書いてみようと思います。

グローバルヘッダ

グローバルヘッダというのはブログのトップに必ず表示されるナビゲーションです(proは非表示にすることが可能)。

f:id:plutan:20160924154035p:plain

このグローバルヘッダの背景色と文字色は変更可能です。このテーマだとグローバルヘッダのCSSはこうなってるんですが、指定された部分のカラーコードを変更すれば背景色や文字色を変えられます。

#globalheader-container {
  background-color: #333;/*背景色*/
  color: #fff;/*文字色*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

私の場合は背景色を半透明にしてます。この場合、カラーコードを10進数で指定して透過度を最後にくっつけたら半透明になります。数字が小さいほどスケスケになるわけですね。

#globalheader-container{
    background:rgba(255, 255, 255, 0.8);
    color:#5882b5;
}

背景画像を透過させる

グローバルヘッダと同じ要領で背景画像を透過させることができます。このテーマだとこの部分の背景色を変更すればOK。

#container {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
  padding-top: 37px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffff;/*背景色*/
}

私の場合は背景画像一枚を繰り返しなしで、なおかつウインドウサイズが変わってもそれに合わせてぴったり画像が表示されるようにしてます。これはカスタマイズの背景画像アップロードでアップロードするのではなく、CSSで直接背景画像を指定しています。背景画像ははてなフォトライフにアップロードしたものを使用してます。

html{
   min-height:100%;
   background: url('http://f.st-hatena.com/images/fotolife/p/plutan/20160104/20160104010423.jpg?1451837064') no-repeat center bottom fixed;/*背景画像のURLを直接指定*/
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}
body{
   background:transparent;
   color:#004d80;/*ブログ全体の文字色*/
}


とまあこんな感じで。気が向いたら色々いじってみると面白いですよ。

最後になりましたが作者のid:interactingさん、素敵なテーマを配布してくださってありがとうございます。一からテーマを作るほど詳しくない私としてはテーマを配布してくださってる方々は大変ありがたい存在です。これから大事に使わせていただきます。