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

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


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


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



完成したテーマの画像

www.tokotokotekuteku.com


モバイル

f:id:ausnichts:20181002193800j:plain

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


f:id:ausnichts:20181002193844j:plain

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


デスクトップ

f:id:ausnichts:20181002194711j:plain

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


f:id:ausnichts:20181002194740j:plain

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


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

@半径とことこ60分


トップページ

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

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


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


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

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