【はてなブログテーマ Material】見出しタグの変更と、2カラムにカスタマイズしてみた

はてなユーザーのブログを見ていたら、

「何これ!!かっこいいデザインじゃん」ってのがあったので

テーマを調べて変更してみました。

 

スポンサーリンク
スポンサーリンク

テーマは「Material」 

カッコイイと思ったテーマは「Material」。

インストールは下のリンク先からできます。

Material – テーマ ストア – はてなブログ

 

次に僕がやったカスタマイズの紹介。

※スマフォのレイアウトはカスタマイズしてません。そのうち飽きたらするかも。

2カラムに変更する方法 

webgaku.hateblo.jp

デフォルトだと1カラムなので、はじめに2カラムに変更しました。

上の記事どおりにやれ簡単です。

 

 見出しタグの変更

f:id:kenkouitiban1978365:20151215175726p:plain

 

次に見出しタグを変更しました。

そのままでもシンプルでいいのかもしれませんが、少しインパクトのあるものにと。

上の画像はデフォルトでの大見出し。

 

 

f:id:kenkouitiban1978365:20151215175804p:plain

上の画像のように変更しました。

 

www.yukihy.com

参考にした記事はこちら↑

 

最終的にできたコード 

 

/* <system section=”theme” selected=”8454420450093337097″> */
@import url(“http://hatenablog.com/theme/8454420450093337097.css“);
/* </system> */

 

#container #content {
  width: 1010px;
}
#main {
  width: 650px;
  float: left;
}

.entry-content h3{
    color: #ffffff ;
    background: #2838A9;
    font-size: 24px ;
    line-height: 1;
    margin: 30px -10px 30px -10px;
    padding: 20px 5px 20px 20px;
    font-weight: bold;
    line-height: 1.4;
}
.entry-content h4 {
    color: #444444;
    padding: 10px 10px;
    margin-left: -5px;
    font-size: 20px;
    border-left: 9px solid black;
    background: #f0f0f0;
    font-weight: bold;
    line-height: 1.4;
}
.entry-content h5 {
    color: #3f3f3f;
    background: #ffffff;
    padding: 10px 0px;
    border-bottom: 2px solid black;
    font-weight: bold;
    line-height: 1.4;
}
.entry-title{
    font-weight: bold;
    font-size: 30px;
    padding: 20px 0px;
    margin: 10px 0px 10px 0px;
    color: #2a2a2a;
}

#box2 {
  width: 300px;
  padding: 24px;
  float: right;
  margin-top: 0;
  margin-bottom: 60px;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  –webkit-animation-duration: 0.4s;
  –webkit-animation-duration: 0.4s;
  –webkit-animation-fill-mode: both;
  –webkit-animation-fill-mode: both;
  –webkit-animation-name: slideRight;
  –webkit-animation-name: slideRight;
  –webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  –webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
@-webkit-keyframes slideRight {
  0% {
    –webkit-transform: translateX(6.25em);
    transform: translateX(6.25em);
  }
  100% {
    –webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes slideRight {
  0% {
    –webkit-transform: translateX(6.25em);
    transform: translateX(6.25em);
  }
  100% {
    –webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
#box2-inner {
  width: auto;
}
.hatena-module {
  text-align: left;
  padding-right: 0;
  width: 300px;
  float: left;
}

@media (max-width: 1024px) {

}

@media (max-width: 1024px) {
      #container #content {
    width: 95%;
  }
 
  #main, #box2, .hatena-module {
    width: 100%;
    float: none;
  }
  #box2 {
 padding: 0;
 background-color: transparent;
 box-shadow: none;
 border-radius: initial;
 –webkit-animation-duration: initial;
 –webkit-animation-duration: initial;
 –webkit-animation-fill-mode: none;
 –webkit-animation-fill-mode: none;
 –webkit-animation-name: initial;
 –webkit-animation-name: initial;
 –webkit-animation-timing-function: initial;
 –webkit-animation-timing-function: initial;
  }
}

 

 参考にさせていただいたサイト様。

ありがとうございました。

 

 ↓ちなみにシェアボタンのカスタマイズは、こちらのサイトのものがオススメ!!

www.yukihy.com

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする