amzn_assoc_ad_type = "link_enhancement_widget"; amzn_assoc_tracking_id = "cheeeehonz-22"; amzn_assoc_placement = ""; amzn_assoc_marketplace = "amazon"; amzn_assoc_region = "JP";

読者です 読者をやめる 読者になる 読者になる

ガジェットミッション

ありとあらゆる情報に挑む,ガジェットブログ

読めば一瞬で変えられる!はてなブログをカスタマイズする時に役立つ記事18選

ライフハック ライフハック-はてなブログ

はてなブログのデザイン等をカスタマイズする記事をまとめました!

f:id:chehonz5:20160421175515j:plain
はてなブログのカスタマイズは、とっても面白い!
でもどこから変えて良いのか分からない!

どうしたら良いんだ!!!!!

そんな方に贈りたい記事を書いてみました。
この記事を読んで頂ければはてなブログの大体のカスタマイズを網羅出来ると思います。
因みに、ここで紹介されている記事は僕自身もすべてやってきたカスタマイズ内容です。
※自分へのメモも込めてまとめました

18個の記事を書いて頂いたブロガーさんたちには感謝しかありません。
とても助かりましたありがとうございます!

では、早速ご紹介していきたいと思います。

  • PC
  • スマホ
  • レスポンスシブデザイン
  • 共通

今回の記事では、PC向け・スマホ向け・レスポンスシブデザイン向け・共通で使えるものの4つに分けてご紹介させて頂きます。

PC

ナビゲーションバー

pomeyama.hatenablog.com

実際に設置するとこんな感じになります!
f:id:chehonz5:20160421154855p:plain

凄く簡単に設置できるので初めての方にもオススメ!
自分でバーの色を変更出来たりもしますよ。

タイトルバーの下に人気記事の"画像&紹介文"を表示させる方法

tsukuruiroiro.hatenablog.com

▼ HPタイトルのすぐ下にオススメの記事を表示出来る!
f:id:chehonz5:20160421155940p:plain

とりあえず、お洒落!
また自分のブログでオススメしたい記事をパッと見て分かるように出来るのは良いですよね。
とてもシンプルで分かりやすく表示も出来るのでオススメしたい!

ブログのヘッダとフッタを非表示にできるようにしました(有料プラン)

staff.hatenablog.com

上に出るヘッダーは邪魔ですよね。
はてなブログの有料会員であれば簡単に非表示にできます。
スマホ版も別の方法で非表示に可能です。

記事タイトルをお洒落に変える方法

www.north-geek.com

記事のタイトルをお洒落に変える事ができます!
コピペで簡単に出来るのでオススメです!

スマホ

スマホデザインを一気に変える方法

tsukuruiroiro.hatenablog.com

▼こういう感じになります!

とてもシンプルで分かりやすく、レスポンスシブデザインでない方は必ずやっておきたいカスタマイズの一つです!上記、記事ではとても分かりやすく説明も書かれているので誰でも取り掛かりやすい内容です。

スマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム方法

www.yukihy.com

▼設置すると下部にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーが出来ます!

コレは絶対やっておきましょう!
内部リンク強化にも繋がるので嬉しいことだらけです。
上部に「MENU」を設置する方も多いですが、個人的には下部に付いていた方が見栄えもよくいいと思っているので当ブログではこちらの記事を参考に設置させて頂きました。

スマホ版でヘッダー・フッターを消す(Proのみ)方法

littlewing.hatenablog.com

コレも見た目がすっきりするのでやっておくのが良いと思います。
ヘッダー・フッターは不要。

レスポンスシブデザイン

ドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方

www.yukihy.com

レスポンスシブデザインの方は、このレスポンスシブなメニューはどうでしょうか?
とても良い感じに設置出来て見栄えもいいですよ!

共通

ブログ見出し

shiromatakumi.hatenablog.com

▼当ブログの見出しデザイン PC・タブレット
f:id:chehonz5:20160421161741p:plain

▼当ブログの見出しデザイン スマートフォン

ブログの見出しは凄く重要です。
上記、記事ではいくつか紹介されていて簡単に設置も出来るのでオススメ!
自分のブログに合わせて色や見出しデザインを変えることでより記事を魅力的に見せましょう!

SNSフォローボタンを設置する

www.yukihy.com

▼ SNSフォローボタンを設置すると・・・
f:id:chehonz5:20160421162057p:plain

読者登録をして貰うことで安定したアクセスを!
読者登録をしてもらうためには、SNSフォローボタンをお洒落にしましょう。




ソーシャルボタンをシェア数付きでおしゃれにする方法

www.yukihy.com

▼ シェアボタンのカスタマイズは必ずしよう!
f:id:chehonz5:20160421162351p:plain

記事をシェアしてもらえる確率が格段に上がりますよ!

SNSボタンでTwitterのTweetカウント数を取得する方法

www.yukihy.com

▼ 当ブログもTweet数がカウントされています
f:id:chehonz5:20160421162351p:plain

count.jsoonへの登録が必須になるんですが、登録まで1~2日かかります。
Tweet数のカウントが見れるようになるのは便利!
あまり知られてないですが、設定しておくといいかも。

はてなブログの公式目次機能にカスタマイズして使いやすくする方法

www.yukihy.com

▼ 目次機能をカスタマイズして見やすく出来ます!
f:id:chehonz5:20160421162440p:plain

当ブログでは、あまり多く目次機能をカスタマイズしてはいないですが
少しカスタマイズするだけでもよりより読み手が見やすくなりますよ!

パンくずリストをはてなブログで設置する方法

bulldra.hatenablog.com

▼ パンくずリストを設置するとアクセスアップに繋がります!
f:id:chehonz5:20160421164537p:plain

パンくずリストの設置についてですが、はてなブログを初めて間もないころは上手く設置が出来なかったことがありました。ただ、自分の設置した場所が間違いっていただけなんですが焦らず記事にしたがって設置をすれば何の問題もなく上手くいきますよ!

お問い合わせフォームを設置する

wepli-dot2.hatenablog.com

コレは自己満ですが、念のためお問い合わせを設置してみました!
必要ない方は特に作る必要はありません。

引用枠線デザインと太字マーカーを追加で見やすくする方法

www.gadget-mission.com

コレはやっておくといいかも!←のように太字を太字マーカーに変更できますよ!

関連記事を表示する方法

www.yukihy.com

関連記事の表示は、設置しておいたほうが内部リンクが強化されていいですよ!
誰でも簡単に設置可能です!

記事下とスマホのページ下部はてなID(プロフィール)を消す(非表示)方法

www.interest-blog.com

個人的には、不要だと思ったので消してしまいました。
簡単に消せるのでお試しあれ!
勿論、元に戻すことも可能です。

最後に・・・

▼ もしもはてなブログのカスタマイズに迷ったら一度覗いてみると良い記事!
www.yukihy.com

最後に、はてなブログのカスタマイズにおいて一番お世話になったゆきひーさんにお礼をありがとうございます。上記、記事を見て頂ければ変更出来ない箇所はないのでは?と思うぐらいはてなブログのカスタマイズについて網羅されています。とてもお世話になったのでご紹介させて頂きます。

以上が、「読めば一瞬で変えられる!はてなブログをカスタマイズする時に役立つ18個の記事」でした。

どうでしたでしょうか?
実際、変えてみると最初の状態から大きく変わっていることと思います。
どうせ、ブログをやるなら見た目から変えたい入りたいタイプの僕がまとめてみました。(笑)

Copyright © 2016 TheGadgetMission All rights reserved.