MyPoket

好きなことを好きな時に書く

はてなブログテーマ「Simple Gray」をカスタマイズ

スポンサーリンク

はてなブログのテーマを「Simple Gray」に変更した時にカスタマイズしたところをまとめておきます。

 

Simple Grayとは

HacoLifeのはこぬしさんが作成された、はてなブログ用のシンプルなテーマです。

f:id:karimonotaso:20160320111339p:plain

シェアボタン・フォローボタン

「いつ俺」のshunさんのページを参考にさせてもらいました。 シェアボタンを記事上・記事下、フォローボタンはサイドバーに設置しました。

デザインはシンプルな白色で、マウスオーバーで色が表示されるやつを選びました。

www.ituore.com

合わせて読みたい

「太陽が眩しかったから」の池田仮名さんのページを参考にしました。

bulldra.hatenablog.com

今の所、PCの場合記事下に5つ、スマホの場合記事下に3つ表示させるようにしています。

Google Adsense

当ブログのパソコン表示では、記事中に一つ、記事下に二つ。

スマホ表示では記事中に一つ、記事下に一つ、フッターに一つ、アドセンスを表示させています。

記事下のアドセンスは効果が高いとよく言われている「ダブルレクタングル」にしています。tableタグを使用してレクタングル大を2つ横並べにしました。

f:id:karimonotaso:20160320114125j:plain

USEFuLNOTESさんの記事を参考にしました。

www.useful-notes.com

記事中のアドセンスと、スマホ表示でのアドセンスは、画面サイズに合わせて広告サイズが自動で変わるようにしました。レクタングル大をiPhone5などの4インチスマートフォンで表示させないようにするためです。

kinyanpu.hatenablog.com

ちなみに記事中のアドセンスコードは、記事を書く際に手動で打ち込んでいます。

TextExpanderにコードを登録していれば楽ですよ。「スポンサーリンク」か、「広告」の表記を忘れないようにしましょう。

www.jibun-pocket.com

また、アドセンス広告でamazon・楽天・お名前.com・googleを非表示にしました。

こんな広告誰かクリックするのか?と思うような広告は表示させないようにしておきましょう。この方法はすあろぐさんの記事を参考にやりました。

sualog.com

ヨメレバ・カエレバ

ヨメレバ・カエレバは、デザインを変更しました。Yukihyさんの記事を参考にしました。

コピペで簡単ですし、はてなブログ以外でも使えるみたいです。

www.yukihy.com

邪魔な表示を隠す

はてなブログって、余分な表示が結構多いと思うんです。僕は色々隠しました。display noneを使うとSEO的に〜なんて書いている方も居ますが、今の所気にしてません。

gaiusgreen.hatenablog.com

一人で書いているので毎回記事下にはてなIDは必要ないと思い隠すようにしました。

スマホ表示

literallyさんの記事を参考にカスタマイズしてあります。

tsukuruiroiro.hatenablog.com

終わりに

僕はCSSとかhtml詳しくないので、コピペでできるカスタマイズばかり使っています。 是非参考にしてみてください。

Copyright © 2016 MyPocket All rights reserved.