IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

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

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

2018/10/2 はてなテーマ, はてなブログ

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

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

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

  • 完成したテーマの画像
    • モバイル
    • デスクトップ
    • トップページ

完成したテーマの画像

www.tokotokotekuteku.com

モバイル

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

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

デスクトップ

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

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

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

@半径とことこ60分

トップページ

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

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

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

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

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

nodist で管理する npm のバージョンアップ
rgba の16進数表記 #rrggbbaa はダメだって!?
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/03/27

WordPress:Fetch(Ajax)でお問い合わせフォーム(プラグインなし)

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress66
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com