かるみに

趣味とともに生きる

トップ > カスタマイズ > 【コピペで楽々】インパクトの強いヘッダーをはてなブログに導入するカスタマイズ

【コピペで楽々】インパクトの強いヘッダーをはてなブログに導入するカスタマイズ

カスタマイズ

はてなブログのヘッダーをつくりました！最近流行りのフラットデザインを意識しています。

ブログに個性を出したい方は試してみてください。

 完成予想図

f:id:trrun:20170305004033p:plain

コードを貼り付ける場所

スマートフォンページのヘッダ→タイトル下に貼り付けてください。

f:id:trrun:20170227185231p:plain

貼り付けるCSS

ヘッダーの文章やURLは変更できます。自分のブログのURLを貼り付けてください

<div id="header-jumbotron">
  <div class="overlay">
    <div class="header-content">
      <h1><a href="#">HELLO WORLD</a></h1><!--ブログのタイトルとURL-->
      <p>ボードゲームとプログラミングが好きなのブログ</p><!--ブログの説明-->
<!--ボタン部分です。不要なら削除してください-->
      <div class="header-category">
<!--カテゴリボタン１-->
      <div class="header-menu-btn category1"><a href="#"><i class="blogicon blogicon-public"></i><br>ミニマリスト</a></div>
<!--カテゴリボタン２-->
      <div class="header-menu-btn category2"><a href="#"><i class="blogicon blogicon-laptop"></i><br>プログラミング</a></div>
<!--カテゴリボタン３-->
      <div class="header-menu-btn category3"><a href="#"><i class="blogicon blogicon-haiku"></i><br>ボードゲーム</a></div>
      </div>
<!--ボタン部分ここまで-->
    </div>
  </div>
</div>

<!--CSS-->
<style>
<style>
  #globalheader-container{display:none;}/*はてなブログのヘッダーメニューを消す*/
html{position:relative;}
#container{margin-top:210px;padding-top:0;}/*ブログの本文を下げます。下の「画像の高さ」と同じ値にしてください*/
#header{display:none;}
  #header-jumbotron{
  width:100%;
  height:210px;/*「画像の高さ」ボタンを設置しない場合調整してください*/
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
}
.overlay{
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,1);/*背景色*/
}
.header-content{
  padding:10px 10px 0 10px;
  width:100%;
  height:100%;
  color:white;
  text-align:center;
}
.header-content h1{
  letter-spacing:5px;
  margin:0;
  padding-top:40px;
}
.header-content a{
    text-decoration:none;
    color:white;
}
.header-content p{
  margin:10px 10px 0 10px;
  font-size:10px;
}
.header-category{
    margin-top:-10px;
}

.header-menu-btn{
  font-size:10px;
  margin-top:30px;
 display:inline-block;
  width:30%;
  border-radius:4px;
}
.header-menu-btn i{
    font-size:160%;
}
.header-menu-btn a{
    color:white;
}
.header-menu-btn-content{
    margin-top:-17px;
 margin-left:-40px; 
 display:none;

}

.header-menu-btn-content li{
  display:block;
  padding:5px 0 5px 10px;
  list-style-type:none;
  border-bottom:1px solid rgba(0,0,0,0.2);
  box-shadow:0 1px rgba(255,255,255,0.2);
  color:black;/*文字色*/
}
.header-menu-btn-content a{
  text-decoration:none;
  color:black;/*文字色*/
  }
</style>

画像風のヘッダー

ちなみに背景に画像を入れることもデザインもできます。

f:id:trrun:20170305002944p:plain

コピペ部分

貼り付け先は同じです。こちらのソースを貼り付けてください。画像はオリジナルのものを用意してください。僕は以前遊んだボードゲームの写真を使ってます。

<div id="header-jumbotron">
  <div class="overlay">
    <div class="header-content">
      <h1><a href="#">HELLO WORLD</a></h1><!--ブログのタイトルとURL-->
      <p>ボードゲームとプログラミングが好きなのブログ</p><!--ブログの説明-->
<!--ボタン部分です。不要なら削除してください-->
      <div class="header-category">
<!--カテゴリボタン１-->
      <div class="header-menu-btn category1"><a href="#"><i class="blogicon blogicon-public"></i><br>ミニマリスト</a></div>
<!--カテゴリボタン２-->
      <div class="header-menu-btn category2"><a href="#"><i class="blogicon blogicon-laptop"></i><br>プログラミング</a></div>
<!--カテゴリボタン３-->
      <div class="header-menu-btn category3"><a href="#"><i class="blogicon blogicon-haiku"></i><br>ボードゲーム</a></div>
      </div>
<!--ボタン部分ここまで-->
    </div>
  </div>
</div>

<!--CSS-->
<style>
  #globalheader-container{display:none;}/*はてなブログのヘッダーメニューを消す*/
html{position:relative;}
#container{margin-top:210px;padding-top:0;}/*ブログの本文を下げます。下の「画像の高さ」と同じ値にしてください*/
#header{display:none;}
  #header-jumbotron{
  width:100%;
  height:210px;/*「画像の高さ」ボタンを設置しない場合調整してください*/
  background:url("https://cdn-ak.f.st-hatena.com/images/fotolife/t/trrun/20170223/20170223182608.jpg");/*背景の画像URL*/
    background-size:cover;
    position:absolute;
    top:0;
    left:0;
}
.overlay{
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.6);
}
.header-content{
  padding:10px 10px 0 10px;
  width:100%;
  height:100%;
  color:white;
  text-align:center;
}
.header-content h1{
  letter-spacing:5px;
  margin:0;
  padding-top:40px;
}
.header-content a{
    text-decoration:none;
    color:white;
}
.header-content p{
  margin:10px 10px 0 10px;
  font-size:10px;
}
.header-category{
    margin-top:-10px;
}

.header-menu-btn{
  font-size:10px;
  margin-top:30px;
 display:inline-block;
  background-color:#337ab7;/*ボタンの色*/
  border:1px solid #2e6da4;
  width:30%;
  border-radius:4px;
}
.header-menu-btn i{
    font-size:160%;
}
.header-menu-btn a{
    color:white;
}
.header-menu-btn-content{
    margin-top:-17px;
 margin-left:-40px; 
 display:none;

}

.header-menu-btn-content li{
  display:block;
  padding:5px 0 5px 10px;
  list-style-type:none;
  border-bottom:1px solid rgba(0,0,0,0.2);
  box-shadow:0 1px rgba(255,255,255,0.2);
  color:black;/*文字色*/
}
.header-menu-btn-content a{
  text-decoration:none;
  color:black;/*文字色*/
  }
</style>

はてなフォントアイコンについて

このカスタマイズでは<i class="blogicon blogicon-○○>という風に、特殊なウェブフォントを用いています。変更したい方は、「はてなブログ　Webフォント」で検索してみてください

過去に作ったカスタマイズはこちらをどうぞ

今まで作成したはてなブログカスタマイズ一覧