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

ちょっとバンコクに住んでみました。

関西系ネクラ主婦のバンコク駐在妻日記

超初心者の私が、はてなブログのカスタマイズでお世話になったサイトまとめ

スポンサーリンク

f:id:pukuko15:20160516214956j:plain

このブログで行ってきたカスタマイズのまとめです。

当初、私はHTMLもCSSも分からなかったので、色々な先人者たちの知恵をお借りしてきました。参考にさせていただいたサイトは、全部ブックマークに入れていたんですけど、多くなってきたので整理のためにも、この記事を残しておきます。

スポンサーリンク

 

 

初期設定

niche.hateblo.jp

これらに加えて、アナリティクスやサーチコンソールの設定なども行いました。

dobonkai.hatenablog.com 

いやー最初、これだけでも相当苦労したなあ。

 

記事関連

見出し

www.yukihy.com

最初に行ったカスタマイズがこちら。これだけで、ブログの記事がグッと本格的になった気がします。今後、ゆきひーさんのサイトには相当お世話になることになります。

 

目次記法

kumoaozora.hatenablog.com

はてなの公式機能でなく、CSSで自動的に目次を生成してくれるものを探していたので参考にさせていただきました。

 

続きを読むボタン

www.ituore.com

「続きを読む」ボタンも、デフォルトだと見辛いので少しだけカスタマイズしました。「いつ俺」さんのカスタマイズ関連記事もオシャレで分かりやすいのでだいぶお世話になりました。

 

グローバルメニュー

f:id:pukuko15:20160516205028p:plain

やっぱり、メニューがあるとカッコいいかなと思って作成することにしました。

www.yukihy.com

で、これを作るために「パンくずリスト」を作成する必要があったので、せっせとカテゴリの再設定も。けっこう時間がかかったので、出来上がった時は嬉しかったです。

wepli-dot2.hatenablog.com  

 

フォローボタン

記事下

f:id:pukuko15:20160516204112p:plain

www.yukihy.com

記事下のソーシャルボタンはまんま、ゆきひーさんのコピペです。

 

サイドバー

f:id:pukuko15:20160516204054p:plain

www.ituore.com

サイドバーも当初はゆきひーさんのコピペだったんですけど、途中から「いつ俺」さんのを参考にさせていただきました。

 

ソーシャルボタン

f:id:pukuko15:20160516203325p:plain

www.yukihy.com

こちらも丸々コピペです。うまく表示されなくて、何度もやり直してたら、いつの間にか出来ていました。

 

関連ページの表示

f:id:pukuko15:20160516200620p:plain

関連記事表示には、いろいろな方法がありますが、私は「Millard」を使っています。

 

基本設定

corp.shisuh.com

はてなブログで表示せる方法が分かりやすく記載されています。

 

関連記事を2列表示する

www.yukihy.com

そして、また出ました!ゆきひーさん。個人的には1列より2列の方がスッキリしていて好きです。

 

カエレバ・ヨメレバ関連

f:id:pukuko15:20160516203009p:plain

happylife-tsubuyaki.hatenablog.com

カエレバ・ヨメレバも最近やっとこさ導入しました。シンプルで可愛いこちらの記事を参考にしました。

 

アドセンス関連

記事下にアドセンスを横並び表示

www.useful-notes.com

大きさが合わなかったので、何度かやり直しをしたり、テーマを変えたりしました。

記事本文の直下にアドセンスを表示

chipspd.hatenadiary.jp

そのまま記事下に配置すると、ソーシャルボタンの下に設置されます。それよりソーシャルボタンの上の方が良いらしい。(よく分かってない)

文中にアドセンスを自動表示

uxlayman.hatenablog.com

 

スマホ関連

スマホ版画面の不要な部分削除

www.mataro1.com

スマホ版は不要な表示が多いので、消えるとスッキリします。

カテゴリのプルダウンを設置

nikkiblog.hatenablog.jp

最近よく見るスマホ下に出るナビゲーションバーもいいなあと思ったんですけど、とりあえずこっちで。ちゃんと機能しててホッとしています。

 

まとめ

他にも、試してみては止めたり消したりしたものも多々あります。それらは今回記載してないんですけど、本当に助けられました。今回、記載させていただいた方々、本当にありがとうございました。

そうそう。なぜかは分からないんですけど、そのままコピペしてるのに上手く表示されないこともよくありました。そんな時は、一からコードを入れ直してみたり、各コードの順番を変えてみたりすると、上手くいったりしましたので色々試してみてください。

最近、自分でも少しずつCSSなどの勉強も始めました。仕組みが分かってくると面白いですね!

 

◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇

他のバンコク情報・駐在妻ブログはこちらのボタンからご覧いただけます♪
にほんブログ村 海外生活ブログ バンコク情報へ にほんブログ村 海外生活ブログ 海外駐在妻へ