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

日なたと木陰

木陰で立ち止まって一休み。ちょっと考えることや、どーでもいいことなど

ブログデザイン変更・カスタマイズしました!

このブログについて google adsense はてなブログ入門 ブログカスタマイズ ブログ運営

先日の記事にも書きましたが、ようやく当ブログのデザイン変更に取り掛かりました。

あまり知識がありませんので恐る恐るカスタマイズしております。

まだ最終決定ではありませんので途中経過になってしまいますが、今のところ変更したところを書いていきたいと思います。

メインテーマの変更

長らくお世話になりました、公式テーマのEpicからはこぬし (id:mr58n)さんが作成されているSimple Grayに変更しました。

はてなブログは公式テーマにも美しいデザインのテーマが沢山ありますし、はこぬしさんのようにテーマを作成して公開して下さっている方もいらっしゃいますので私のような知識のないものでも気に入ったデザインを選んでブログを書く事ができます。本当にありがたい事です。ありがとうございます。

Epicのシンプルなデザインと背景が薄いグレーになっているのが好きでこれを開始当初から使ってきましたが、Simple Grayも同じ系列と言いますか、シンプルですがタイトルの大きさから本文のフォントサイズ、カテゴリの並び方など細かな部分まで私が好きなデザインです。
Epicは文字が小さかったりしてサイズを調整しておりましたがSimple Grayはほとんどそのままで使用しています。

皆さんのブログを拝見していますとデザインを変更されている方をちょくちょくお見かけしていて、私も変更したくなったんですよね。
他の方も書かれていますが当ブログでもモバイル端末から見て頂く方が多いです。今回のテーマはレスポンシブルデザインに対応していて、画面サイズによってデザインが変わります。

PCで閲覧されている方なら横幅を縮めるとサイドバーがシュッと下に移動して、広げるとサイドバーがシュッと元に戻ってきます。これに密かに憧れていました。

Epic - テーマ ストア - はてなブログ

Simple Gray - テーマ ストア - はてなブログ


変更前がこんな感じで、

f:id:hinatakokage:20150811051125p:plain

変更後がこっちです。

f:id:hinatakokage:20150811051502p:plain

Google adsenseについて

当ブログではGoogle Adsenseを利用しており、この広告から得られた収益でブログ運営をさせて頂いております。

今回、Google AdsenseのPC・スマホ表示の両方からタイトル下の広告を削除しました。

理由は2つあります。

1つは自分がタイトル下の広告を見る事が殆どないからです。基本的に記事を読むために記事を読みに行きますので、タイトル下の広告ってよほど気になる広告じゃないとクリックしません。

2つ目は最近まで知らなかったのですが、というか正しいのかどうかも知らないのですがGoogle Adsenseの広告は一番最初に表示される広告が最も高単価になるらしいです。私のブログでも記事下が最もクリックされていますし、私自身も他の方のブログで記事を読んでから気になる広告があればクリックします。これらの事から、記事下の広告が最初の広告になるようにしました。しばらく検証してみたいと思います。

私のスタンスは収益を最優先にしない、というスタンスです。読みやすさなどのユーザビリティを犠牲にしたり、炎上させたり、煽ったりせず、私の許容できる範囲で収益を最適化したいと思っています。(※あくまでも自分基準ですので、そうなっていないと思われる方もいらっしゃるかもしれません。)

また、スマホ表示の広告サイズはレスポンシブルに変更しました。

記事下の広告を横並びに表示させる

これまで当ブログではPC表示の際、記事下の広告を縦に2つ並べておりました。クリック率が上がるから・・・ではなく、単に横並びにする方法を知らなかったからです。そして調べる事も放置していたからです。

今回はブログデザイン見直しという事で、調べました。

参考にさせて頂いた記事はこちらです。

www.useful-notes.com

あわせて読みたいG

池田仮名 (id:bulldra)さんの作成されているはてなブログの記事下に関連記事を表示する「あわせて読みたいG」を設置させて頂きました。ありがとうございます。PC・スマホの両方に設置しました。

bulldra.hatenablog.com

関連記事ジェネレータ

こちらを使用させて頂き、関連記事を挿入する時には挿入することにしました。replication様ありがとうございます。

remix-remix.rash.jp

スマホ表示のデザイン変更

スマホ表示の記事一覧・記事中の見出しのデザインを変更しました。

参考にさせて頂いた記事はこちらです。

tsukuruiroiro.hatenablog.com


これはもうそのまんまです。こんな感じです。

記事一覧

f:id:hinatakokage:20150811051122p:plain

見出し

f:id:hinatakokage:20150811051124p:plain

大見出し5つ以上で自動的に目次を表示

大見出し5つ以上で自動的に目次を表示させるようにしました。

こちらを使わせて頂きました。ありがとうございます。

datsugoku.hatenablog.jp

見出しのデザインカスタマイズ

PC表示の見出しのデザインを変更しました。

参考にさせて頂いたのはこちらです。

www.yukihy.com

蛍光マーカー風の強調表示

これ見やすいのでどうやってるんだろう?って気になっていました。

こちらを参考にさせて頂きました。ちなみに私の現在の環境ではデフォルトでピンクの蛍光マーカー風になっていましたが、黄色が良かったので黄色にしました。こだわりです。こんな感じになります。

蛍光マーカーは黄色が好きなんだよー

mu2in.hatenablog.com

CSSを学べるサイト

こういったサイトで学ぶことができます。お盆休みにこういうのを勉強するのも良いかも知れません。

prog-8.com

さいごに

AM1時から記事を書き始めて現在AM6時・・・。眠くなってきましたがもうすぐ起床・出社の時間です。

この辺にしておきます。

後はスマホ表示で不用な表示を消したいのと、デザインの微調整をしたいですね。

1年以上ブログを書いてきてわかったことがあります。

素人がブログカスタマイズすると1年経つとどこを触ったかわからなくなる。1年ぶりにテーマストアを見てみると時代に合ったテーマがちゃんとある。カスタマイズの知識がなくても親切な方々のおかげで何とかなる。蛍光ペンは黄色がやっぱり好き。あと触り出すと何時間でもやってしまうので今すごく眠い。

こんな感じです。

最後にもう一度、参考にさせて頂いたり、使用させて頂いたツール作者の方々、ありがとうございました!

デザインは真似ばかりですが、記事はオリジナルですよ!