Recommended!2020年オススメする有料WordPressテーマ7選 Read More
はてなブログカスタマイズ

【まとめ】はてなブログを始めたときに行った5つのカスタマイズ

このブログを始めたときに行った5つのカスタマイズを紹介いたします。

現在サイトは閉鎖いたしましたので、以前開設していた「はてなブログ」でのカスタマイズとなります。

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。

基本的な設定は色んなサイトが紹介していますが、自分でちょっと迷ったところを備忘録的に残しました。

はてなブログをやるなら、制限が少ないはてなブログProがオススメ!

Googleウェブフォント設定

Webフォントは、Webサイト上で表示できるフォントのことです。

Google ウェブフォントは無料で利用でき、英字フォントを変更するだけで見た目がガラッと変わります。

Googleウェブフォントはとてもかんたんに設定できますので、その方法を残しておきます。

Brooklynのヘッダー画像をスマホで表示する

はてなブログで人気が高い「Brooklyn」ですが、レスポンシブデザインを採用したらヘッダー画像がリサイズされずに大きいままで表示されていました。

いろいろ調べて結構苦労しました。

Brooklynの吹き出しを削除

Brooklynは良いテーマですが、特徴的な見出しやサイドバーの左下に付いている吹き出しが馴染めず削除することにしました。

この吹き出しはリセットしなくては削除ができません。

うぇぶ活
 
はてなブログカスタマイズ 人気テーマBrooklynの吹き出しを削除 - うぇぶ活
http://affiliate-couple.hatenablog.com/entry/customize_heading
このブログを開設した時に行ったカスタマイズを紹介いたします。 使用したテーマははてなブログテーマで一番人気がある「Brooklyn」ですが,見出しやサイドバーの吹き出しがあまり好きではなく,これを削除しました。 その時の対応を備忘録を兼ねて記事にしました。 ...

グローバルメニューにアイコンwebフォント設定する

グローバルメニューはヘッダー画像と並んでブログの顔ともいえる部分です。

しかし、ただ文字だけでは面白くありません。

アイコンwebフォントを設定することで見た目もガラッと変わります。

うぇぶ活
 
はてなブログカスタマイズ グローバルメニューにアイコンWebフォントを使う - うぇ...
http://affiliate-couple.hatenablog.com/entry/globalmenu
このブログを開設した時に行ったカスタマイズを紹介いたします。 グローバルメニューを設置しているブログは多い。 そのメニューの頭にはてなブログのアイコンWebフォントを表示させ、見た目の印象を変えてみました。 使用したテーマははてなブログテーマで一番人気...

トップに戻るのカスタマイズ

「ページのトップに戻る」ボタンは今や必須の設定です。

その戻るボタンを少しカスタマイズして印象的にしてみました。

うぇぶ活
 
はてなブログカスタマイズ トップに戻るを簡単に設置する - うぇぶ活
http://affiliate-couple.hatenablog.com/entry/returntop
このブログを開設した時に行ったカスタマイズを紹介いたします。 記事が長くなるとページをスクロールして下の記事内容を見ますが,ページの下の方に行くとページトップへ一気に戻りたくなります。 そんな時「ページのトップに戻る」ボタンがあれば解決します。 使用...

まとめとして

今回の5つの設定は当ブログを始めたときに設定したものです。

基本は「ヘッダ」「記事上・下」「フッタ」に記述し、色や形は「デザインCSS」に追加します。

ほとんどが「コピペ」で行えますので、気軽に挑戦してみてください。

これからも面白いカスタマイズがあれば取り入れていこうと思っています。

はてなブログを運営していましたが、訳あって閉鎖しました。

そちらのサイトから「はてなブログのカスタマイズ」だけをピックアップし、コチラに移行しました。

フォントの変更や文字色の変更など、WordPressに合わせてモデファイしておりますが、文章的におかしいところもあります。
これは、なるべく「はてなブログユーザー」が理解しやすくするため
です。

2020年11月

関連記事
はてなブログカスタマイズ

役に立つ!はてなブログのカスタマイズ20選

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。…
はてなブログカスタマイズ

はてなブログ グローバルメニューの文字をホバーしたら他の文字が半透明表示になるCSS

はてなブログはWordPressみたいにカスタマイズできるというもので…
はてなブログカスタマイズ

はてなブログのカスタマイズ!シンタックスハイライトを挿入する

はてなブログのカスタマイズを紹介する際、CSSやHTMLのシンタックス…
WordPressテーマをテストしているサブサイトはこちらからどうぞ ↓

テストサイトに各WordPressテーマを実際にインストールしてみました。
各テーマ毎に少しカスタマイズしたところもありますが、基本的に同じ画像、同じ記事で構成していますので、参考になるかと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です