かしこくもなりたいし、女の子にもなりたかった。

とってもガーリーなゆるふわ愛され何でも屋を目指す、30代男性がお送りするファビュラスなブログ。

女子力は、作れる。CSS3で。(はてなブログのデザイン改造編)

f:id:takustaqu:20140315152230p:plain

はい、タイトルの通りです。さっぱりですね?でも上のヘッダ、PCでみるとちょっとガーリーじゃないですか? いや、もともととってもゆるふわでガーリーでギザントカワユスなわけですが、正直、もうちょっと可愛く動いていてもいいなーとか思ったわけです。

そんなわけで、はてなブログ内蔵テンプレートのポップコーンをちょっと改造してみました。


レッツ改造

どないな改造すんねん

上のヘッダの、丸いカラフルな奴とかをふわふわさせたいよね。あと、できればイラストも可愛く出てきて欲しいよね。 そんなわけで、全部を分割して、CSSアニメーションを書きます。 設置場所はヘッダー部分に差し込みたいので、この要素(#blog-title-inner)に全部を突っ込む形式とします。

元の構造はどないなってんねん。

こないなってんねん。

f:id:takustaqu:20140315151722j:plain

(#blog-title-inner)に背景画像としてイラストが差し込まれていて、その中にh1,h2がごろっと配置されています。position:absolute;ではなく、そのままボックス要素として流し込まれています。

どないやって改造すんねん

先に画像を用意しませう。

f:id:takustaqu:20140315151849p:plain

元画像はさっき申し上げた通り1枚の画像になってます。 こいつをバラすのですが....このあたりのプロセスはPSDを置いておきました。

加工の過程のPSD

ちなみに、オリジナルは45kbですが、このPSDの切り出しのプロセスでちょっとばっかし秘伝の最適化を施すことで5KBほどファイルサイズが削れています。(このあたりは、以前のエントリーの応用です)

全部ばらし、丸と★はイメージスプライトに、キャラクターは1枚の独立した画像にしましょう。 CSSにはアップロードが面倒という理由でbase64で埋め込むつもりだったのですが、後者を入れるとローカルでは出るのにはてな経由だと出ない謎現象が起きたのでこれまた面倒なのでここだけははてなのエントリーからアップロードを掛けてURLを指定して拾います。

イメージスプライト自体は今回は完全にツール任せなので大した最適化はせずにそのままスルーです。

それでは組み込んで行きましょう。

どうやらはてなブログはテンプレートの編集は一応できるものの、編集というより元のブロックの後に追記などの形しか取れません。 幸いscriptタグは通るので、JavaScriptでコンテンツを差し込む形で対処しましょう。

差し込むHTMLは以下のようなものです。

<div id="header-animation">
    <div id="char" class="flipInY animated"></div>
    <ul class="sprHd groupA">
        <li class="c01"></li>
        <li class="c04"></li>
        <li class="c06"></li>
        <li class="c08"></li>
        <li class="c10"></li>
        <li class="c13"></li>
        <li class="c16"></li>
        <li class="c18"></li>
        <li class="c20"></li>
        <li class="c23"></li>
    </ul>

    <ul class="sprHd groupB">
        <li class="c02"></li>
        <li class="c05"></li>
        <li class="c07"></li>
        <li class="c12"></li>
        <li class="c15"></li>
        <li class="c17"></li>
        <li class="c21"></li>
        <li class="c24"></li>
    </ul>

    <ul class="sprHd groupC">
        <li class="c03"></li>
        <li class="c09"></li>
        <li class="c14"></li>
        <li class="c19"></li>
        <li class="c22"></li>
        <li class="c11"></li>
    </ul>
</div>  

header-animationにposition:relativeを振っておき、あとはposition:absolute;で配置します。 ちなみになぜULを複数に分割しているのかというと、円が降りてくるのをある程度グループで分けたいことと、このグループ単位でアニメーションのスタートタイミングをズラしたいためです。

で、これを差し込む為のコードはこんな感じ。

var target = document.getElementById("blog-title-inner")
target.insertAdjacentHTML('afterbegin', '<div id="header-animation"><div id="char" class="flipInY animated"></div><ul class="sprHd groupA"><li class="c01"></li><li class="c04"></li><li class="c06"></li><li class="c08"></li><li class="c10"></li><li class="c13"></li><li class="c16"></li><li class="c18"></li><li class="c20"></li><li class="c23"></li></ul><ul class="sprHd groupB"><li class="c02"></li><li class="c05"></li><li class="c07"></li><li class="c12"></li><li class="c15"></li><li class="c17"></li><li class="c21"></li><li class="c24"></li></ul><ul class="sprHd groupC"><li class="c03"></li><li class="c09"></li><li class="c14"></li><li class="c19"></li><li class="c22"></li><li class="c11"></li></ul></div>');

はい、簡単ですね。

CSSの側は書けば長くなるので、まあうまいことやってください(ぉぃ)

組み込み結果を確認してみよう。

f:id:takustaqu:20140315151743j:plain

はい、こんな具合です。

みなさんもやってみましょう。

かわいいは、作れる。
30代のおっさんでも。