非エリートの日常

学歴なし、就職失敗、非正規、ニートも経験した非エリートがそれでも豊かに暮らす為に試行錯誤するブログです。

アフィリエイターの僕がはてなブログをレスポンシブ化しない理由

f:id:kiki0923:20141215145037j:plain

今更ながら半年も前の下記の記事に釣られたわけですが、モバイルからの収入を伸ばすにはレスポンシブにするべきと書いてあります。

参照:レスポンシブデザイン対応のはてなブログテーマ一覧まとめ!モバイルからの広告収入を伸ばしたいなら、レスポンシブデザイン必須ですね。 - クレジットカードの読みもの

興味津々で読んだのですが、僕はレスポンシブデザインを使っていません。

常日頃アフィリエイトががががががと言ってる僕が使っていないのには訳があるのですが、それを置いておいたとしても、ユーザーにはより良い形で記事を読んで頂きたいというのがブロガーの性でしょう。

今回はアフィリエイト大好きの僕がレスポンシブデザインにしていない理由について何らかの参考になれば幸いです。

photo by albyantoniazzi

ぶっちゃけやろうと思ったんだけど出来なかっただけだったりして…

はい。正直1番の理由がこれです。

実は僕もレスポンシブにしようとしたんですよ(笑)ただね、出来なかったんです…

まず、はてなブログでレスポンシブデザインに対応したブログを作るためには、レスポンシブ対応したカスタムテーマを使用する必要があります。

そしてデザインCSSに下記のコードを追加

/* Responsive: yes */

「デザイン>スマートフォン>詳細設定>レスポンシブデザイン」にチェックを入れます。

さて、普通ならここまででレスポンシブデザインに対応したブログが出来るんですが、僕の問題はここからでした…

CSSを弄ってるとレスポンシブに出来ない

僕が躓いたのはここです。CSSを弄るとと書いてありますが、正確にはCSSでブログの幅やその他いろいろとカスタマイズしているとレスポンシブ対応している元のカスタムテーマがおかしくなるようです。

ちなみに初期のカスタムテーマに上記の方法でレスポンシブ化を試みたところ、あっさり出来ました。

あくまで、このデザインを維持しつつレスポンシブ化が出来なかったということです。

僕の推測ですが、ブログの幅を変えたりするようなカスタマイズは注意が必要です。恐らく、元のテーマの骨組みを崩さないような装飾的なカスタマイズは問題無いでしょう。

この辺は詳しい方の記事を探してみたのですが、見当たらなかったので、あくまで僕の推測であることを断っておきます。

CSSに詳しい人ならこの辺の問題も分かるのでしょうが、僕では無理でした。

ならスマホ版をカスタマイズして頑張るしかないな

今ココです。僕がレスポンシブにしたかった1番の理由は見た目の問題なのですが、はっきり言ってスマホ版のデザインはそのままだとゴミクズみたいな物です。さすがに言い過ぎか?

裏を返せば、ここがクリア出来れば取り敢えずはスマホ版のままで良いと思っています。

そこでいろいろ調べたらありましたよ。いい記事が。

参照:はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally

大変有難いこの記事を参考にカスタマイズするしかないですね。

見出し部分とヘッダーをいじればかなり変わってきそうです。

ちなみに下の記事を参考にして、スマホ版のプロフィールやはてなブログ関連のリンクも消してみました。

参照:【はてなブログ】スマホ用ページ下部分のプロフィール(id)とかを非表示にしてみました - チップの日常

ここまですれば、かなりスッキリしてスマートなデザインになると思います。(ちなみに現時点では上の記事はまだ実践していません)

負け惜しみでレスポンシブデザインのデメリットを探してみた

出来ないとなれば粗探しをしたくなるのが人の性…というわけでデメリットを探してみました。

僕が以前から知っていたのは、

  • 表示が遅くなる可能性がある

  • モバイル専用のデザインと比べると使いにくい可能性がある

  • 設計により多くのコストが掛かる可能性がある

この辺です。

少し調べてみたら分かりやすくメリット・デメリットをまとめた記事を発見しましたので参考にしてみて下さい。

参照:レスポンシブWebデザインのメリット・デメリットまとめ | HTML5GOGO

後はこちらも参考になります。

参照:メシオプレス03でレスポンシブWEBデザインを採用しなかった理由 | WordPressテーマ「メシオプレス」ブログ

特にレスポンシブは最適化ではなく、汎用化というところには一理あるように感じました。

アドセンスはレスポンシブ広告を利用した方が良い

広告は目立ってなんぼですよね。そのためには大きい方が良いわけです

最近では、iPhone6やタブレットなど画面サイズの大きいデバイスがどんどん登場し、サイズの固定された従来型のアドセンスでは対応が難しくなっています。f:id:kiki0923:20141215135702p:plain

The Ultimate Guide To iPhone Resolutions

こんな感じで最近のデバイスはどんどん大画面になっているので、それに合わせて広告も大きくなるようにした方が良いですよということです。

さて、そのためにはアドセンスをレスポンシブ化するのが1番です。

今は有難いことにアドセンスにレスポンシブ広告がありますので、下記の記事を参考に設定すれば良い感じになるはずです。

参照:はてなブログのスマホ用Googleアドセンスお勧め設定!iPhone6やiPhone6Plusにも最適! - マネー報道 MoneyReport

 まとめ

ひとまずレスポンシブ化は断念した僕ですが、それならモバイル専用デザインを少しでも良くしようと思っています。現状出来てませんが…

アドセンスについてもそろそろ貼っていろいろ検証記事とかも書いてみたいんですけど、とにかくアクセスがありませんからね(笑)したくても出来ないんですよね。

毎日更新してる人ってどれだけ記事書くの早いんだよ…と思ったり。

それでは失礼します。