すけこむブログ

カメラが好きな都内在住31歳男性の写真ブログ。ニコンD810を愛用。娘二人の子育てにも奮闘中。

CSSでコリコリ動く!ブログのイメージキャラクターを作ってみる

CSSでコリコリ動く!すけこむブログのイメージキャラクターを作ってみる

以前からブログのヘッダー部分がちょっと寂しいな・・・と思ってました。

パソコンで当ブログをご覧いただいている方はお気づきになったかもしれませんが、以前作成したD600のイラストに手足を生やして、当ブログのイメージキャラクターとしてヘッダーに登場させてみました。

・・・ちょっとキモいでしょうか。

カメラに手足を生やしてみよう

CSSでコリコリ動く!すけこむブログのイメージキャラクターを作ってみる

以前作成したイラストがこちらです。ブログの見出し部分(h3)にアイコンを入れみようと思い、D600を見ながらイラストレーターで書いてみました。トップページで表示される「続きを読む」部分にも使用しています。

はてなブログの見出しをオリジナル画像でカスタマイズしてみる - すけこむブログはてなブログの見出しをオリジナル画像でカスタマイズしてみる - すけこむブログ

このカメラのイラストを顔にしてしまって、手足を生やしたら素敵なイメージキャラクターが出来上がるのではないだろうか・・・っ!?という野暮な発想が浮かんできてしまったんです。

思いついてしまったのであれば、やるしかありません。いつやるの・・・っ!?

完成したのがこちら

CSSでコリコリ動く!すけこむブログのイメージキャラクターを作ってみる

・・・結構キモいでしょうか。

なんだか「No more 映画泥棒」の息子みたいな雰囲気に仕上がりました。まぁよしとしましょう。万が一「子どもが泣く」などのクレームがあれば変えましょうか。子どもさんはご覧になってないと思いますが。

当ブログのイメージキャラクターとして、良さげなネーミングがありましたら、ぜひともご意見をいただきたく存じます。

CSSでコリコリ動かす

CSSでコリコリ動く!すけこむブログのイメージキャラクターを作ってみる

仕上げはCSSの調整です。

2体分の画像を作成して、上下に並べた画像を作成します。よさげなセリフが思い浮かばなかったので、適当に書きました。1ヵ月に1回くらいセリフを変えてみましょうかね。

ヘッダーのブログタイトルあたりにマウスを持って行くと、画像下側のセリフに切り替わります。コリコリと音はしませんが、CSSはこんな感じです。

/* ヘッダーアニメーション */

#blog-title {
height: 131px;
margin: 53px 0 33px 0;
background-image: url(*****.gif);
background-position: right top;
background-repeat: no-repeat;
}

#blog-title-inner {
height: 57px;
padding: 27px 0 47px 0;
}

#blog-title:hover {
background-position:right bottom;
}

heightやmarginのピクセルは使用する画像の大きさ、ブログのテーマによって最適な数値が変わりますので、あくまで参考値としてお考えください。「*****」としているところは、はてなフォトライフにアップロードしたURLを挿入します。

最新のIEとGoogleクローム、iPhoneのサファリでは動作を確認しましたが、その他のブラウザでは確認していないので、もしかしたら表示がずれているかも。

まぁ古いIEを使ってる人は見ていないでしょう・・・たぶんきっと・・・

まとめ ブログデザインをどんどんカスタマイズしよう

キャラクターのキモさは私のデザイン力ではどうにもできないこととして、以前よりはヘッダー部分がにぎやかになったでしょうか。せっかく作ったイメージキャラクターなので、ヘッダー以外にも登場させてみましょうかね。

ブログタイトルもフォントそのままではなく、ロゴなどを作るとカッコよくなると思うのですが、なかなかハードルが高いですなぁ。とはいえ、いずれ手を加えていこうと思います。

引き続きブログデザインのカスタマイズを進めて、ちょっとずつすけこむブログのオリジナリティを出していければと考えています。

ちまちま頑張ります。