ブログ収益化への道（その４）
関連記事まとめページです → ブログ収益化への道
今は2020年8月7日（金）、花金です。
ブログ初めて24日目になりました。
まだ、「AdSenseを申し込む」ボタンは出ていません。
SEO対策とかモバイル端末対応とかしようと思ったら、、
アクセス数をあげるためには、Googleの検索エンジンに効率よくヒットしなければいけないということがわかったのですが、そのためにはブログを「読みやすい・わかりやすい記事」にすることが必要のようです。
そして、こちらのサイトを拝見したところ、とても無理だ、、、と思いました。
（とてもわかりやすいサイトでした。ありがとうございます。）
しかし、「ブログの収益化」のためには通らなくてはならない道です。
とにかく見やすいデザインにしなければと思い、Webを検索してみたところ「bloggerテンプレート」という言葉が目に入りました。
そして、「テンプレートはこちら」と親切に導線まで用意されています。
（これが、読みやすいということか、、！）
早速ページにアクセスしました。（こちらです）
テンプレートの機能一覧を読みました。（欲しかったものいっぱいだ！）
下記、引用させて頂きます。
- ついてくるサイドバー：→削除
- クセの強いデザイン：→シンプルに
- シェアボタンのアイコン：→しょぼくなった
- 関連記事機能：OK!
- パンくずリスト：OK!
- SEO対策：OK!
- テーマデザイナー：OK!
- 2カラムデザイン：OK!
- レスポンシブデザイン：OK!
- 記事中アドセンスリンク：←追加！
- 折り畳みナビゲーション：←しょぼいけど追加！
引用元：©ラムネグ：シンプルで速い日本語bloggerテンプレート「QooQ」の紹介！
感動したのは、「シェアボタン」と「ＳＥＯ対策」です！
いろんなブログで、facebookとかtwitterとかのシェアボタンがあるのを見ていました。
↓こういうの
いつか設置したいなぁと思っていたのですが、これが標準機能でついている！？
そして、「SEO対策：OK！」 に期待が高まります。
あと、スマホ向けの表示にも気を配られているところが嬉しいですね。
早速ダウンロードして入れ替えてみる
テンプレートのダウンロードページが用意されていました。
（テンプレートのダウンロードページはこちら）
サンプル表示を見比べて、今回は「QooQ list版」をダウンロードしました。
ダウンロードした「QooQ_list.xml」ファイルをPCのローカルフォルダに保存。
自分のbloggerの管理ページから「テーマ」を選択して、今のテーマの編集メニューを開きます。
心配なので今のソースを「バックアップ」しておきます。
そのあと、「元に戻す」を選んで、ファイルをアップロードします。
更新に成功したら、↓のような表示になりました。
「レイアウト」を開いたら、結構変わっていました。
（記事の中身も結構崩れるんだろうなと思ってました）
・前の記事でつくったナビゲーションバーがサイドエリアに移動してた
・プライバシーポリシー・免責事項を表示していたガジェットが消えてた、、
・いろんなガジェットが追加されてた
以上の点だけ調整しないといけないと思い早速なおしました。
ガジェットを整理して色を変える
まずは、自分に必要なさそうなガジェットを削除して、表示するガジェットの位置を調整しました。
「Navbar」ガジェットは削除がなかったので「OFF」にしました。
そして、いろんな箇所の色を調整しました。
「テーマ」の「カスタマイズ」ボタンを押して、
「詳細設定」のなかで「文字の色」「ブランドカラー」「背景色など」をそれぞれ選んで各色を自分の好みのものへ変更しました。
ナビゲーションバーを表示させる
前の記事で自分で作ったナビゲーションバーの変わりに、いい感じのものがすでについていました。
表示されるように設定します。
「レイアウト」を開いて、「ナビゲーション」にある「ページガジェット」の編集を押します。
編集ポップアップで、「ホーム」とついでに「プライバシーポリシー・免責事項」にもチェックをいれました。
プレビューしたらいい感じに出てきました。
なんと、画面の幅が狭くなると自動判別でボタンに切り替わります！
「プライバシーポリシー・免責事項」が常に表示されてないと審査に影響するかもと思ったので、サイドエリアのところに「ページガジェット」で追加しておきました。
自分でつくったナビゲーションバーを復活させる
前の記事でつくったナビゲーションバーもせっかくなので復活させることにしました。
「QooQ_list.xml」に記述されているナビゲーションバーのCSSを全てコピーして、navigation を menubar に変換します。
「テーマ」の編集メニューから、「HTMLを編集」を選択します。
81行目あたり、
120行目あたり、
160行目あたりにコピーして、navigation を menubar に置換する。
今回は、ヘッダーの下につけたいので、778行目あたりに下記コードを追加
- <div id='menubar'>
- <div class='container'>
- <b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'>
- </b:section>
- </div>
- </div>
保存して「レイアウト」を見ると、ヘッダーの下に「Cross-Column」が表示されてガジェットを追加できるようになっているので、前回の記事と同じように「ＨＴＭＬ/Javascript」ガジェットを追加して、コードを記入します。
今回、CSSはとくに指定しませんでした。
（そのままで十分なじんでるから）
そして、このテンプレートに変えてついにっ！！
私の記事のなかに各種シェアボタンが搭載されました！
やったーっ！！
今回、blogger テンプレートを差し替えてとても素晴らしい結果を得ることができました。
製作者の方に感謝です。
これで、審査とおりやすくなったかな？？
現時点のKPI：
今日は、モバイル端末で表示確認をたくさんしたのでアクセス数（自分）が伸びてます。
（全記事のレイアウト崩れをなおして確認してました）
投稿
0 件のコメント:
コメントを投稿