池田町地域おこし協力隊~kuro隊員の活動日誌~

平成28年4月。30才目前にして、北海道池田町地域おこし協力隊として移住したkuro隊員の活動をダラダラ綴ります。

blogのデザインを色々いじっている話Vol2~先人の知恵をありがたくコピペ~

こんにちは。

北海道池田町の地域おこし協力隊かつ駆け出しボルダラー、kuro隊員です。

f:id:kuroroman:20170308202509p:plainblogのデザイン変更が完了

数日前から当blogのデザイン変更にチャレンジしていました。何しろ変更前は「やっつけ仕事」だったので、どうせ変更するならしっかり構成を考えようと決意。聖域無きblog構造改革。

それが本日どうにか完了。慣れている人から見れば単純な変更でしょうが、kuro隊員の所要時間は計7時間。本当に無知ってヤツは罪ですわ。

変更点と参考にしたblog記事などを紹介していきます。

なお前回までの構造改革はコチラ↓

www.kuroroman.com

ナビゲーションメニュー

ありがたい助言からのコピペ

念願の(という割には先延ばしにしていましたが)ナビゲーションメニューを設置できました。以前に設置を試みた時よりも遥かに楽にできました。

なぜなら現在のデザインテーマ「Report」の作成者が当blogにコメントを下さいまして。メニュー設置方法を丁寧に説明した記事をご紹介いただきました。

あとはコードをコピペして、メニューリンク先のURLを設定したり表示名を変えていくだけで出来上がり。まぁ簡単。

参考にした記事はコチラ↓

design.syofuso.com

こうしてリンクを貼ることくらいしか恩返しができませんが、このデザインが多くの人の目に留まるよう頑張ります。感謝。

メニュー項目設定に悩む

ナビメニューの形はできましたが、そこに表示させる項目をどうするかはちょっと思案しました。

「HOME」「kuro隊員とは」は必須として、残り3つの項目は何を設定するのがベストなのか?今イチオシの「ボルダリングDIY」なのか「協力隊Facebookページ」なのか、はたまた町おこし推進員らしく「池田町紹介」なのか。

30分ほど考えた結果、最も無難で協力隊らしい「活動記」カテゴリのリンクと、記事数の割にはアクセス数が多い=需要があると思われる「協力隊の収入・副業」カテゴリのリンク、拡散力強化のためプルダウンで「SNS(協力隊Facebookページ・Facebook&Twitterの個人アカウント)」へのリンクに決定しました。

これでしばらく様子を見てみます。

「TOPへ戻る」ボタン

ついでに設置を試みた

ナビメニューが設置できた事に気を良くしたのか、調子に乗って「TOPへ戻る」ボタンも設置しようと目論みます。もちろんコピペ一発で設置できる方法のみを探しました。他力本願な男、kuro隊員。

探してみるとあるもんですね。一番わかりやすかったblog記事からコピペできました。調整したのはボタンの背景色と大きさ、あとはフォントサイズくらいです。楽チン。

参考にした記事はコチラ↓

ahoudori.hateblo.jp

非常にわかりやすかったです。kuro隊員のような素人にとってはありがたい。

f:id:kuroroman:20170308205601p:plain

ボタン設置の説明のために画像貼ってみたはいいけど、よく考えたらこの記事を読んでる人はボタンが表示されてますよね。意味の無い画像になってしまったけど矢印まで付けたからこのまま貼っておきます。

ボタン設置による問題点

読者の立場から見た操作性や利便性はこれで少しはマシになるでしょう。

しかしblogを書いている立場からすると一つ問題が発生。

デザイン変更前にはフッター(Webサイトの一番下の部分)に池田町のふるさと納税の広告を設置していました。当blogはkuro隊員の収入源=ナリワイ作りが最大の目的であり、その手段として活動記や町の紹介をしている訳です。

が、協力隊という立場として書いている以上は町にも利益をもたらす存在でありたい。その想いからふるさと納税の広告を貼っていたのですが、トップに戻るボタンを設置する事で、当blogの再下段までスクロールしない読者が増える=池田町のふるさと納税広告が見られない確率が上がるのでは?と考えました。

そこで急遽対策を打ちました。

広告位置の大幅変更

収益化と町の宣伝の狭間で

正直言えば広告収入の柱であるGoogle AdSense広告が一番目立つのがベストなんですが、それじゃ協力隊らしくない。

協力隊らしさと収益と宣伝を両立できるような広告配置を考えました。

変更点を簡単にまとめると。

  • ヘッダー&フッターから広告撤去
  • (PC版)ふるさと納税広告をサイドバーへ移動
  • (スマホ版)サイドバー部分はページ下部に表示されるため、「注目記事」などの間に挟んで視認性を確保する

とにかく「PCでもスマホでも、最下段まではスクロールしないであろう」ことを前提としています。ではページから離れる前に読者の目に留まるためには「記事を読み終えてスクロールする範囲内」に広告を設置することだと推測しました。

ついでに収益化の効率も検討する

まだまだアクセス数の少ない当blogですが、これまでのデータを分析した上でさらに広告位置を修正。

ヘッダー(blogのタイトル下)と記事タイトル下から広告を外した分、どこかでカバーしないとちょっとマズい。

そこで記事中にGoogle AdSenseを挿入する方法を探しました。もちろんコピペで手入力することも可能ですが、毎回毎回それはダルい。

すぐに素晴らしいblog記事を発見できました↓

uxlayman.hatenablog.com

この記事のすごい所は「これを貼ればOK」って単純にコードを載せているのではなく、各自の希望に応じたコードが簡単に作成できちゃう所。

今後もお世話になると思います。

 

最後に

これにて「聖域無きblog構造改革」は一段落。本当に肩の凝る作業でした...。

デザインもレイアウトも必要に応じてちょこちょこと変えていくかも知れませんが、これで心機一転、ガンガン記事を書いていきますよ。

まずは今月度の目標達成!3月8日時点では進捗悪いです。

ではまた(^O^)/