【はてなブログ】ここで完成できる!Minimalismのおしゃれなデザインカスタマイズ

 

 

こんにちは~いもこぞうです。

ちょくちょくデザインを変えていましたが、やっと落ち着いてきたのでこのサイトで行った全てのカスタマイズをご紹介します。

テーマははてなブログで1番使われている「Minimalism」を使用しています。

*他のテーマではできないカスタマイズもあるかもしれません。

 

Minimalismカスタマイズ。

部分的にみたい方は目次から飛ばしてください!

*当ブログはレスポンシブデザインを採用していないためPCと携帯両方のカスタマイズをご紹介しています。

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
↑ほとんどがひつじの雑記帳さんのデザインです汗

 

 

 

配色決め

まずはブログの配色決めから。

色の知識がゼロだったので↓下のサイトの色の組み合わせをパクりました。

saruwakakun.com

colorhunt.co

 

①ヘッダー

まず、ブログの顔ともいわれるヘッダーのカスタマイズ。

ヘッダーはCanvaというプラットフォームで作成しました。

↓このページに詳しく書きました。

www.gatablog.org

当ブログはレスポンシブデザインを採用していません。スマホ設定用のヘッダーは上記と同じ作り方で、350×73のサイズで作成しました。

 ヘッダー付近は携帯版でも同じデザインです。

 

②ヘッダー画像下にグローバルメニュー設置

f:id:gataimo:20200530170332j:plain

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

CSSはこちら

 

メニュー下にリンクラベル設置

f:id:gataimo:20200530170357j:plain

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

リンクラベルのCSSも同じサイトを参考にしました。↑CSS

1行目のURLに紹介したいページのリンクを記入。「タイトル」に紹介文を記入。

 

 記事一覧

次は記事一覧のカスタマイズです。PCはカード形式、スマホはカードだとみにくいので一覧形式にしています。

 

PC設定記事一覧

f:id:gataimo:20200530170406p:plain

こんな感じになってます。

このサイトを参考にしました。

www.daifuku.blog

 

スマホ設定記事一覧

f:id:gataimo:20200530171444j:plain

【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳

このページの記事一覧のCSSをコピペしました。

投稿した日付は必要ないと思ったので以下のコードで消しました。

 

デザインCSSにに入力↓

/*記事の日付を消す*/
.date {
display: none;
}
/*記事が書かれてからの日付を消す*/
.entry-footer-time {
display: none;
}

 

プロフィール

f:id:gataimo:20200530170338p:plain

こんな感じ。カーソルを合わせると読者登録ボタンとアイコンが動きます。

f:id:gataimo:20200530170402p:plain

おしゃれだけど少し重くなるかも。。

このサイトを参考にしました。

mshitech.hatenablog.com

カーソルを合わせると開く読者登録ボタン↓

mshitech.hatenablog.com

 

 お問い合せフォームの設置

コメント欄がありますがはてなに登録している人しかコメントできなそうだったので、一応設置しました。

このサイトを参考にしました。

お問い合わせフォームを作成&はてなブログに設定する方法【図解でわかりやすく!】|ウィリスの宇宙交信記

 

アバウトページ

アバウトページはまだカスタマイズしていませんが、いずれやろうと思います。

www.okuni.me

さいごに

デザインカスタマイズって神経使いますよねー

もし、質問あればコメントにお願いします!!