人生RPG

一児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

はてなブログ無料ユーザー時に行ってきたカスタマイズまとめ

SPONSORED LINK

f:id:boukenshaLv1:20180414090146j:image

はてなブログProにジョブチェンジしたということで、一旦無料ユーザー時に行ってきたカスタマイズを整理しておこうと思います。

 

って言っても、無料ユーザー期間は1か月ちょっとだったのでそんなに種類はおおくないんだけども・・・

 

 

レスポンシブ化

www.life-is-rpg.com

使っているテーマをレスポンシブデザインに変更するやり方です。

「PCとスマホの設定(デザイン)を同じにしたい」「PCとスマホそれぞれでカスタマイズするのがめんどくさい」「ディスプレイの大きさによって自動でデザインが切り替わるようにしたい」 という方にオススメです。

 

ちなみにわたしは『DUDE』というテーマをレスポンシブ化して使っています。

DUDE - テーマ ストア

 

 

グローバルメニュー

www.life-is-rpg.com

ブログタイトル下に大カテゴリのメニューバーを設置してマウスをカテゴリ上に乗せるとドロップダウン形式で子カテゴリが表示される仕組みです。

またタブレット以下の画面サイズではトグルメニュー表示に切り替わり「MENU」のボタンをクリック(タップ)すると大カテゴリのみ表示される仕組みです。

 

グローバルメニューを設置するのはSEO的に良いといわれています。

なにより訪問者にブログ内構成を分かりやすく表示できるので、回遊率のアップにも繋がります。

 

 

フォローボタン【サイドバー】

www.life-is-rpg.com

はてなのデフォルト機能でもありますが、デザインに面白味がないのでカスタマイズをオススメします。

オシャレになるし、ボタンが大きくなるので効果もアップしますよ。

 

 

シェアボタン

www.yukihy.com

シェアボタンは記事にはしていませんでしたので、参考させてもらった記事を貼っておきます。

シェアボタンもはてなのデフォルトで備わっていますが、大きさや高さの違いでバランスが悪かったので、カスタマイズして統一感を出した方がきれいですね。

シェアボタンは自分の記事を多くの人に拡散してもらえるチャンスを生み出す大切な機能なので絶対設置しといたほうがいいです!

 

2018.4.14時点では上記のシェアボタンを利用していますが、気になるデザインを他で見つけたので近々変更するかもしれません。

 

 

ヘッダー画像の設置・調整

www.life-is-rpg.com

ヘッダーは訪問者が一番に目に入るブログの看板です。

オリジナル画像を設定するのは大切ですが、「ブログのサイズと合っていない」「変な隙間(余白)ができて浮いている」そんな感じになってしまうと印象があまり良くありません。

 

 

続きを読む

www.life-is-rpg.com

はてなブログ無料版ではブログトップに記事内容が全て表示されて縦に長いページになってしまいます。

記事内に「続きを読む」を設定すると設定した以下の文章は省略されてトップページには表示されなくなるのですが、さらにカスタマイズで「続きを読む」をボタン化にして横幅いっぱいまでサイズを拡大することにより記事と記事の仕切りの役割と表示の分かりやすさアップになり整頓されたデザインになります。

 

 

目次

www.life-is-rpg.com

記事内の「目次」を隠しておいて、表示ボタンで出すカスタマイズです。

「文章が長い記事を書く」「記事内容のネタバレを防ぎたい」という方にオススメです。

特にスマホでの訪問者はスクロールの回数が減るので喜ばれる機能だと思います。

 

 

見出しデザイン

www.life-is-rpg.com

記事にメリハリが出て読みやすくなるのが一番のメリットです。

見出しのデザインはいろんな方が発信しているので種類が豊富です。

私は今大見出ししかデザインを変えていませんが、中見出し・小見出しも同じようにカスタマイズできるのでいずれ変えてみたいと思います。

 

女性の方ならこの方のデザインはどうでしょう?

Hatena Blog Theme Custom

 女性のプログラマーの方なのでカワイイ系のデザインが多いです。

 

 

フッター

www.life-is-rpg.com

上記で紹介した「続きを読む」と組み合わせることで効果を発揮します。

このカスタマイズをすることでブログトップページの各記事の感覚を狭くできるので、より整頓されたデザインになります。

 

はてなスターはいただくと嬉しいのでトップでも表示したままにしたいのですが、読み込みが遅く少し重くなるんですよね。トップの表示だけ消そうか今迷い中です。

 

 

カエレバ・ヨメレバ

www.life-is-rpg.com

オススメ商品とかレビュー記事を書くときに綺麗なデザインで表示できるツールを使える様にするカスタマイズです。

オリジナルのコードに少し不具合があり表示バランスが崩れていたので修正したものを提示しています。

 

PCの時と、スマホの時のデザインが切り替わるのと、なるべくコンパクトに表示されるデザインが気に入っています。

 

 

プロフィール

www.life-is-rpg.com

元々用意されているプロフィールではなく、1からサイドバーのモジュールでプロフィールをつくります。

少し難易度は高いですが、他のブロガーとの差別化を図れるのでオリジナリティがグンッと上がりますよ。

 

今面白いプロフィールデザインを考えています。実行まで時間がかかりそうですが頑張ってみます。

 

 

欲しいものリスト

www.life-is-rpg.com

アマゾンの「ほしい物リスト」機能を使った連携カスタマイズです。

これが意外と効果が高いです。

私自身このブログを始めて間もないのですがいくつか読者様よりプレゼントをいただきました。本当にありがとうございます。

 

「私は読者少ないからファンなんていない」「読者に買って!なんておこがましいことできない」という方。まさに私と同じです。

今も読者に買って!なんておこがましいと思っています。

「欲しいものをリストとしてメモしておきたい」「いつかお金に余裕が出来たら買いたい」そんな感じで作り、もしブログを気に入ってもらって援助してもいいよって読者がいてくれたらありがたく頂戴いたします。という気持ちで設置しています。

 

 

 

まとめ

他にも文字の大きさとか細かいカスタマイズもしていますが、おおまかこんな感じのカスタマイズで作ってきました。

私は「形から入る」タイプなので、ブログを始めた当初からカスタマイズに手を出していました。

 

カスタマイズに成功するたびにテンション上がりますよね!

特に苦戦したり難易度が高めのカスタマイズが出来たときは達成感があります。

今回紹介したカスタマイズたちは、素人初心者の私でもできたものなので、簡単だと思います。

 

プログラミングの方法などもカスタマイズにチャレンジしていく度に身についていっているのが分かります。もっと勉強していつか冒険者デザインを生み出したいという小さな夢もできました。

 

今後も、カスタマイズを楽しんでいきますので、その都度紹介できたらなと思います。

 

はてなブログ無料ユーザー向けカスタマイズ特集でした☆