Hatena Blog Theme Custom

はてなブログテーマ『Minimal Green』のデモブログ。はてなブログカスタマイズや、HTML、CSSなどについて書いています。

はてなブログカスタマイズ記事のまとめ

f:id:mini-guri:20180321163528j:plain

はてなブログカスタマイズ記事一覧です。今までの過去記事をまとめました。
パーツ毎に分けているので、カスタマイズしたいところの記事をご参照下さい。上から順番にヘッダー、グローバルメニュー、記事上・記事下、サイドバー、フッターと辿っていくとはてなブログを一通りフルカスタマイズ出来ます。

ヘッダー・タイトル

タイトル画像の調整

はてなブログのタイトル画像のサイズは標準では1000*200です。横幅いっぱいにしたり、調整が必要なときは以下の記事をご参照下さい。
blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com

ヘッダー下におすすめ記事を並べるカスタマイズ

blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com


グローバルメニュー

blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com

blog.minimal-green.com

見出し・囲み枠

かわいい系の見出しや囲み枠をご紹介しています。
blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com
blog.minimal-green.com

シェアボタン

シンプルなレスポンシブシェアボタンからかわいい系のガーリーデザインまでご紹介しています。
HTTPS化対応済み。
blog.minimal-green.com
blog.minimal-green.com

サイドバー

サイドバーにバナーを貼り付けたり、サイドバーの最新記事や人気記事にリボンラベルを付けるカスタマイズをご紹介しています。

サイドバータイトルのデザインカスタマイズ

blog.minimal-green.com

サイドバーの最新記事にリボンラベルを付ける

blog.minimal-green.com

サイドバーに画像(バナーリンク)を貼る

blog.minimal-green.com

目次のデザイン

はてなブログ標準の目次デザインを少しおしゃれにしてみました。
blog.minimal-green.com

記事上・下

はてなブログの記事下関連記事のカスタマイズや記事下にプロフィール欄やCTAを追加するカスタマイズをご紹介しています。

日付のカスタマイズ

blog.minimal-green.com
blog.minimal-green.com

読者になるボタン

blog.minimal-green.com

記事下にCTAを設置する

blog.minimal-green.com

記事下にプロフィール欄を設置する

blog.minimal-green.com

「コメントを書く」ボタンのカスタマイズ

はてなブログのコメント欄のカスタマイズはこちらをどうぞ。
blog.minimal-green.com


フッター

はてなブログのフッタにCopyrightやフッター3カラムメニューを追加する方法を書いています。
blog.minimal-green.com

トップページ・レイアウト

トップページをホームページ化したり、記事幅変更、カード型レイアウトの方法を書いています。

トップページをカード型レイアウトに

blog.minimal-green.com

はてなブログの記事幅・レイアウトの変更

blog.minimal-green.com

はてなブログのページ全体を枠で囲みカスタマイズ

blog.minimal-green.com

スマートフォン版

スマートフォン版カスタマイズのまとめやはてなブログでのAMPの対応を書いています。
blog.minimal-green.com

はてなブログのAMP対応

blog.minimal-green.com

自作テーマの制作

はてなブログテーマストアははてなユーザーなら誰でも投稿できます。公開する場合は注意が必要ですが、非公開で自作テーマをアップロードして自分だけ使うこともできます。
自分だけのオリジナルテーマを作ったり、多くのユーザーに使ってもらえるテーマを公開したり、テーマ作りは楽しいですよ。
blog.minimal-green.com

はてなブログ入門ガイド

他の方のカスタマイズ記事も含めた便利なはてなブログ入門ガイドはこちら↓をどうぞ。
blog.minimal-green.com