韓国ソウル ゆる暮らし

韓国在住日本人による現地のお役立ち情報あれこれ

はてなブログ テーマMinimalism カスタマイズで参考にしたサイトまとめ

ブログ

こんにちは。今日はブログカスタマイズについてお話します。

はてなブログをはじめて2か月。ようやく30記事を超えました。

四苦八苦しながらも、楽しくブログ書いています。

当ブログは2019年5月現在、ブログテーマ「Minimalism」を使用しています。

「Minimalism」はそのままでもシンプルで使い勝手の良いテーマですが、少しずつカスタマイズしてきました。

私はもともとCSSやHTMLの知識はほとんどなく、先人のみなさまが公開してくださっているコードがなければブログのカスタマイズはできなかったと思います。

今日は、そんな先人の方々への感謝と尊敬を込めて、私がブログカスタマイズの際に参考にしたサイトをご紹介したいと思います。

ヘッダー(ブログタイトル)

ヘッダーの背景色変更

▼ブログテーマ「Minimalism」配布元のひつじさんのページを参照しました。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

サイドバー・メニュー関係

グローバルメニュー/トグルメニュー

PCではグローバルメニュー、スマホではトグルメニューになる、レスポンシブデザインのメニューです。こんなに素晴らしいものが無料で配布されていることに、感謝の気持ちが止まりません。

▼ゆきひーさんのサイトです。

CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

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

サイドバーのタイトル「関連記事」「カテゴリー」などの書式の変更方法です。

▼minimalgreenさんのサイトを参考にしました。minimalgreenさんのサイトは、ブログカスタマイズの情報が豊富で、なおかつ素敵なデザインのサイトをつくるヒントがたくさん紹介されているので、よくお世話になっています。

はてなブログで使えるサイドバーカスタマイズまとめ - Hatena Blog Theme Custom

カテゴリ階層化

親カテゴリの下に子カテゴリを作って階層化させる方法です。

【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ

記事ページ

シェアボタンの設置

シェアボタンは公式のものを利用しています。

▼ブログテーマ「Minimalism」配布元のひつじさんのページ。

シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳

文字サイズ、行間調整、段落の余白

Minimalismのデフォルト設定ではかなり字が小さいので、調整しています。

また、スマホで読んだ時読みやすくなるように、行間、段落の余白を少し広めにとっています。

どなたのサイトを参照したのか失念してしまいましたが、以下のサイトに同様の内容が記載されていましたのでリンクを貼らせていただきます。

▼タクミさんのサイトです。

【初心者向け】読みやすいブログの作り方!はてなブログを始めたら導入したいオススメカスタマイズ - タクミの帰宅塾

PCと、スマホとで文字数を変えたい場合はこちら(当ブログではスマホ版のほうが少し文字サイズを大きめにしています)。

▼さくらいさんのサイトです。

【はてなブログ】レスポンシブデザインでもスマホの文字の大きさを変える方法|コピペで簡単! - マジPEACE。

H2~H4見出しデザイン変更

見出しのデザインは、このブログのメインカラーに合わせて調整しました。

▼みんなが一度は参考にする、サルカワさんのサイトです。サルカワさんのサイトは本当に情報量が多くて参考になります。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

囲み枠デザイン

囲み枠があるとブログが一気に読みやすくなります。

▼同じく、サルカワさんのサイトです。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

記事下にプロフィールカードを表示

デフォルトだとなんとなくさみしいプロフィールの見栄えがぐっとよくなりました。

▼minimalgreenさんのサイトを参考にしました。

はてなブログの記事下にプロフィールカードを表示するカスタマイズ - Hatena Blog Theme Custom

関連記事を記事下より下に

デフォルトでは、関連記事がシェアボタンなどより上に表示されてしまうので、もっと下に表示させる方法です。

▼SHIROMAさんのサイトです。

はてなブログの関連記事を記事下よりも下に移動させるカスタマイズ | SHIROMAG

上に戻るボタン

ブログの下のほうにスクロールすると現れる、上に戻るボタンのコードです。

コピペですぐに使えました。本当にありがたいです。

▼トモノリさんのブログです

はてなブログで超簡単に「トップページに戻る」ボタンを設置する方法 - はてぶ丸

フッター

コピーライト表示

コピーライトはあってなきようなものですが、お問合せ、プライバシーポリシーを表示したかったので、フッターを作りました。

▼漆うしるさんのサイトです。

はてなブログのフッターに『コピーライト』や『お問い合せリンク』を導入する方法を紹介しますの! - 元IT土方の供述

まとめ

先人のみなさまのお陰で、ウェブデザインの知識もない私もなんとかカスタマイズできています。本当にありがとうございます! この先も、カスタマイズしていくことがあれば、この記事に追記していこうと思います。

▼記事がお役に立ちましたら、よければクリックをお願いします。

にほんブログ村 海外生活ブログ ソウル情報へ
にほんブログ村