【コピペ】はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選
この記事は「はてなブログ」テーマ『Primeiro』のカスタム記事です。
他のテーマでも使えると思いますのでぜひ試してみてください。
ヘッダーはユーザーがサイトを訪れた際に一番最初に視界に入るポイントでSEO的にも重要なパーツですので慎重にデザインにしてくださいね。
まず、サイドバーデザインを先に行っているほうがデザインしやすいと思いますので以下の記事を参考にやっておいてください。
はてなブログのヘッダーデザインについて書かれた記事はたくさんありますのでそれらの記事もご紹介していきます。
それでは、ヘッダーデザイン例を9種類ご紹介していきたいと思います。
ロゴ+バー
隠しテキストになりますのであまりお勧めしません!
ですが「はてなブログ」の仕様上こうせざるを得ないのでご了承ください。
STEP1:まずはロゴをご用意
ロゴ作成のコツ
hitori-koho.com
自作するのは面倒!だという方はロゴジェネレーターを使おう!
おすすめのロゴジェネレーター
TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。
無料でネットショップをつくることができるサービスのSTORES.jpのロゴジェネレーターで簡単にロゴが作れます。
その他のロゴジェネレーター
・Free Logo Maker, Create Custom Logo Designs Online – DesignEvo
STEP2:「css」をコピペ
/*調整*/ header#blog-title { padding: 0; display: block; } /*バー*/ #blog-description { /*テーマに合わせて変えてください*/ background: #668bff; padding: 10px; color: #fff; margin-top: 0; } /*ロゴ表示*/ #title { display: block; /*画像に合わせて変えてください*/ background: url(画像url); padding: 15px;; background-size: 90px; background-position: center; background-repeat: no-repeat; } #title a{ opacity: 0; }
バーはいらない方はこちらでロゴのみを表示できます
#blog-description { display: none; }
ロゴ以外でももちろん使えます。
画像背景(アニメーション)
ハイクオリティなアニメーションを使ったらもっとおしゃれになると思いますのでスキルがある方はやってみてください。
STEP1:まずは画像または動画をご用意
画像のフリー素材
動画のフリー素材
記事でご紹介されているサイトでよさそうなものをダウンロードしよう!
mp4などの動画ファイルはgifに変換して使用しましょう。
STEP2:「css」をコピペ
#blog-title { background: url(動画・画像のurl); background-attachment: fixed; background-repeat: round; } #title a { /* 文字の色 */ color: #f7f8f9; /* 文字の影 */ text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; } #blog-description { font-weight: normal; font-size: .8rem; margin: 1em 0 0; /* 文字の色 */ color: #fff; /* 文字の影 */ text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px; } /*調整*/ header#blog-title { padding: 50px; display: block; }
フォント+バー
このブログのデザインです。
STEP1: フォントを読み込ませる
サルワカさんの記事を参考にフォントを読み込ませてください。
詳しく書かれているので僕が解説する必要がありません。
さすがサルワカ!略してサスワカ!
STEP2:「css」をコピペ
/*フォントを指定する*/ #title a { font-family: 'フォントを指定する'; } /*幅調整*/ h1#title { padding: 15px; } /*バー*/ h2#blog-description { background: #668bff; padding: 10px; color: #fff; margin-top: 0; } /*調整*/ header#blog-title { display: block; padding: 0px; }
ブログヘッダーを消しちゃう
SEO的には最悪ですので使用は避けましょう!
はてなブログテーマ「Primeiro」のデモページで使用しているデザインでデモページやサンプルページでヘッダーの告知を目立たせたいとき等にどうぞ!
テキストアニメーション+バー
跳ねるテキストアニメーション
#title { animation: titlekey .4s ease infinite alternate; } @keyframes titlekey{ 0% {transform: translateY(0px);} 100% {transform: translateY(-10px);} } h1#title { padding: 15px; } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
かっこが点滅するアニメーション
スライドする文字は疑似要素でできそうですがちょっと難しかったのでかっこのみです。
すみません。
#title:before { content: '['; color: #16a085; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } #title:after { content: ' ]'; color: #16a085; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } @keyframes opacity { 0%, 100% {opacity:0;} 50% {opacity:1;} } h1#title { padding: 15px; } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
文字が追加されていくエフェクト(バー)
ヘッダー→タイトル下
<script> var string = "Hello I'm Laith Haleem Form Ghammas Love Developing Websites"; var str = string.split(""); var el = document.getElementById('blog-description'); (function animate() { str.length > 0 ? el.innerHTML += str.shift() : clearTimeout(running); var running = setTimeout(animate, 90); })(); </script>
css
h1#title { padding: 15px; } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
溶けていくようなエフェクト
css
#title { position: relative; padding: 4em; filter: contrast(20); background-color: black; overflow: hidden; } #title a { color: white; font-size: 5rem; font-weight: 700; text-transform: uppercase; line-height: 1; filter: blur(0.5rem); animation: letterspacing 10s infinite alternate cubic-bezier(.2, 0, 0, 1); display: block; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); } @keyframes letterspacing { 0% { letter-spacing: -5rem; filter: blur(0.5rem); } 50% { filter: blur(0.5rem); } 100% { letter-spacing: -1rem; filter: blur(1.5rem); } } @keyframes letterspacing { 0% { letter-spacing: -5rem; -webkit-filter: blur(0.5rem); filter: blur(0.5rem); } 50% { -webkit-filter: blur(0.5rem); filter: blur(0.5rem); } 100% { letter-spacing: 1rem; -webkit-filter: blur(1.5rem); filter: blur(1.5rem); } } h2#blog-description { background: #fe928b; padding: 10px; color: #fff; margin-top: 0; } header#blog-title { display: block; padding: 0px; }
とりあえずこんなところでしょう!
他にもいっぱいありますので是非探してみてください。
あまり派手すぎると邪魔になるかもしれませんのでお気をつけて!
それでは、はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選のご紹介を終わります!
自分なりのオリジナリティを出していきましょう!
Primeiroの紹介記事を書いていますのでテーマに興味がある方はどうぞ!