はてなブログテーマ開発(0)とりあえず完成させた

はてなブログテーマ開発(0)とりあえず完成させた

はてなブログテーマ開発(0)とりあえず完成させた

別ブログ「@半径とことこ60分」のテーマ変更を機に、はてなブログのテーマ開発について書いています。まだいろいろ書くことはあるのですが、テーマ変更とともに独自ドメイン化と HTTPS 化をやろうということで始めましたので、あまり遅くなってもと思い、概ね完成させてテーマを変更しました。

はてなブログテーマ開発(1)
はてなブログテーマ開発(2)
はてなブログテーマ開発(3)
はてなブログテーマ開発(4)
はてなブログテーマ開発(5)
はてなブログテーマ開発(6)(Javascript 記載の漏れがありました)
はてなブログテーマ開発(7)

完成したテーマの画像

www.tokotokotekuteku.com

モバイル

記事ページです。iPhone6 のサイズですが、キャプチャは下が切れています。

ハンバーガーメニュークリックでメニューを出したところです。メニューは右からスライドインし、検索フォーム、カテゴリー、記事一覧、Contuct Us が入っています。

デスクトップ

記事ページです。タイトルを top-editarea に移動しています。メニューは右上に出しています。スムーズスクロールナビを右下に出しています。

メニューのカテゴリーにマウスを置いたところです。マウスオーバーでカテゴリーブロックがフェードインします。検索フォームも同様です。

実際の確認はこちらでどうぞ。

@半径とことこ60分

トップページ

トップページの表示は一覧形式にしていますので画像が並びます。モバイルは画像が縦に並びます。画像はサムネイルではなく元画像に変更しています。元画像に変更する方法は以下にあります。

(bug fix)はてなブログ「一覧形式」の画像をオリジナルのものに変える – IMUZA.com

画像が少しさみしく感じられますが、人物がとことこ歩いてくるアニメーションを入れようかと思っています(笑)。

まだ、細かい調整が必要ですし、アドセンスも入れなくちゃいけません。

この後、このテーマに使っている小細工を書いていこうかと思いますが、なかなか手がまわりません(涙)。