はてなブログに慣れてきた脱初心者にオススメ！イケてる「はてなブログカスタマイズ」まとめ

はてなブロガーの皆様こんにちは。

GW最終日いかがお過ごしでしょうか。

私は「はてなブログカスタマイズ」にいそしんでおりました！！

f:id:yu1gst:20170507135614p:plain

1年前からはじめ、「はてなブログProの月600円が回収できてればいっかー」くらいのゆるいスタンスで、なんとなく気の向くままに取り組んできたはてなブログ。

最近心境の変化があり、ガチに運営しようと決めました。

というわけで、とりあえず良くするなら外見からでしょ！ということでカスタマイズを頑張ってみました！

今回変更した点を方法と合わせて紹介したいと思います。

若干大変でしたが、とても満足した通っぽいカスタマイズです！

はてなブログはユーザー品質が高すぎ、何かやりたいことがあると参考になるコードなどがたいていネット上に存在します。

はてなブロガーレベル高すぎ・・・

いつもお世話になりっぱなしなので、私もはてなブロガーを支援する記事は定期的に投稿したいと思っています。

お役に立てれば幸いです。

コピペでOK！プルダウン式のグローバルナビゲーションメニューの設置
5分で作れる！問い合わせフォームの作成
サイドバーにフォローボタンを設置
まとめ

コピペでOK！プルダウン式のグローバルナビゲーションメニューの設置

最近記事数も増えてきて、記事へのアクセス周りが悪くなりました。

雑記ブログのため取り扱っている内容も多岐にわたります。

なので、メニューから該当項目にすっとアクセスできるようにしたかったんです。

パンくずリストの導入でカテゴリーの階層化はできていたので、グローバルナビゲーションメニューをプルダウン式に変えることにしました。

パンくずリストの導入による関連記事の表示、階層化については下の過去記事にまとめていますのでご参照ください。

yu1gst.hatenablog.com

参考にしたのは下のサイト様です。

めちゃくちゃ参考になりました、ありがとうございます！

www.yukihy.com

このCSS、Htmlの導入はそこまで大変ではなかったです。

というかコピペ＋自分のホームページの要素に書き換え＋若干の微調整だけで済みました。

コードを書き換えプレビューした時、「すげーかっけえええええええええ！！！！！！！！！！」と心のなかで叫びました（笑）

最初に手書きでどういうデザインにしたいかを紙に書き、カテゴリーの階層を細かく変えたりする作業のほうが時間がかかりました（2時間くらい？）

html／cssコードの書き換えだけで、カテゴリの階層化がすでにできてれば実際30分程度でできると思います。

注意点としては、グローバルナビゲーションのプルダウンがGoogle adsenseにかぶると広告停止措置をとられるらしいので、位置取りは慎重にしたほうがいいですね。

グローバルナビゲーションメニューの先頭部につけた「自己紹介・いいねアイコン」は下のサイト様を参考に導入しました。

アイコンを入れるだけでぐっと洗練されていい感じです！

と○○○部分に好きなアイコンのコードを記述するだけなのでとても簡単＆オシャレ！！！！！

shirokai.hatenablog.com

5分で作れる！問い合わせフォームの作成

Big tomorrowの取材を受けるという大目標のもと副業、投資にいそしんでいますが、問い合わせフォームがなきゃBig tommorrowから連絡こなくね？となったのでつけました。

調子に乗って「すーぱーまんになりたい。へのお問い合わせ、記事執筆依頼、レビュー依頼、広告依頼、ご意見、質問等はこちらからどうぞ。」と書いています。

「お前みたいな雑魚ブログで執筆募集とか片腹痛いわ！ｗ」といじめないでください。

導入方法は下のサイトの無料フォームを利用しただけ！

めちゃくちゃ簡単だし、編集も直感的にできてオススメ！

作成後は問い合わせフォームのリンクが生成されます。

グローバルナビゲーションに問い合わせフォームのリンクを貼ればOKです。

Google formよりも企業のもののほうが、セキュリティも良さげでいいのではないでしょうか。

他にも投票フォームを作れたりするのも面白いですね！

www.form-mailer.jp

サイドバーにフォローボタンを設置

参照したサイトは複数あったんですが、ブラウザ閉じて消えました・・・

参考に当ブログで使用したコードを載せます。

以下をサイドバーのHTMLにコピペします。

はてな読者、Twitter、Feedyのボタンができます。

赤くなっている部分は自分の要素に書き換えてください。

◯HTML


<div class="follow-btn" >
フォローする 
<a class="hatena" href="http://blog.hatena.ne.jp/yu1gst（はてなID）/yu1gst.hatenablog.com（自分のブログのドメイン）/subscribe" target="_blank"> はてな</a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=yu1gst1（Twitter＠以下）" target="_blank"> Twitter</a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/http://yu1gst.hatenablog.com/archive（TOPページアドレス）/feed" target="_blank"> Feedly</a>
</div>

CSSは以下をコピペします。

◯CSS

/*サイドバー*/

.follow-btn{
width: 100%;
text-align: center;
margin-bottom: 10px;
}
.follow-btn a {
display: inline-block;
width: 60px;
height: 60px;
line-height: 32px;
font-size: 14px;
text-align: center;
text-decoration: none;
border-radius: 50%;
}
.follow-btn .hatena {
color: #3D3F44;
border: 2px solid #3D3F44;
background: #ffffff;
}
.follow-btn .twitter {
color: #00ACEE;
border: 2px solid #00ACEE;
background: #ffffff;
}
.follow-btn .feedly {
color: #70CA3B;
border: 2px solid #70CA3B;
background: #ffffff;
}
.follow-btn .hatena:hover {
color: #ffffff;
background: #3D3F44;
transition: all .3s;
}
.follow-btn .twitter:hover {
color: #ffffff;
background: #00ACEE;
transition: all .3s;
}
.follow-btn .feedly:hover {
color: #ffffff;
background: #70CA3B;
transition: all .3s;
}
.text-small{
font-size: 8px;
}