タロウです。
Bloggerに施したカスタマイズを備忘録的にまとめていきます。
2019年1月から本記事を更新していくスタイルにしました。
Bloggerのカスタマイズは基本的にHTMLをいじることが多くなるので、元の形に戻したりすることが非常にめんどくさい。
なので、どこかいじったら必ず備忘録にとどめておこうと思います、という趣旨です。
- 1 VASTER2ってなんぞや
- 2 トップページの記事サムネイルを元画像縮尺からトリミング表示に
- 3 ブログの画像をすべて中央に
- 4 Chromeアドオンでリンク機能を追加する
- 5 プライバシーポリシーの設置
- 6 サイトマップの設置
- 7 トップの１ページの表示記事数を増やした（2019年1月31日更新）
- 8 サイトのデザインの色とかを変えた
- 9 リダイレクトでGoogleにきちんとサイトを認識するように設定した
- 10 記事下にトップページに戻るボタンを設置した
- 11 記事下のPOCKETリンクをLINEリンクへ変更した
- 12 Adsenseの広告サイズを変更した
- 13 スマホ版のトップページのサムネイルサイズと記事タイトルのサイズを変更
- 14 まとめ
VASTER2ってなんぞや
Bloggerを使っている人はだいたいこのテーマ使ってるんじゃないんでしょうか。トーマス氏が作成した非常によろしいブログテーマです。
マイノリティのBLOGGERにあって、シンプルでいじりやすい上に、いろんな人が使っているから、何か問題が起きた時の解決法も見つかりやすいというシロモノ。
作成者が挙げる特徴は
- シンプルデザイン
- 日本語対応
- SNSボタンが自動表記
- 関連記事の初期装備
- アドセンスを記事中＆下に設置できる
の5点。
レスポンシブデザインでスマホで見た時のデザインも良。
何より日本語対応なので、日本語のブログのフォントサイズ感にぴったり合うんだ。
トップページの記事サムネイルを元画像縮尺からトリミング表示に
サムネイルの表示がいつも元画像の縮尺で表示されるので、非常に見にくい状態になっていました。
そこで元画像をトリミングして表示する形にカスタマイズしました。
おかげできれいに表示されるように。
BEFORE
AFTER
細かい差だけど、すっきりしました。
参考にしたのはふでたまごさんの「BLOGGER LABO」というブログの下記の記事
Ctl+Fで「article-list img」を検索して「object-fit: cover;」を追加するというもの。
これだけで見た目すっきり。
ブログの画像をすべて中央に
ブログの画像が左寄りになっているのがとても気になっていたので、すべて中央揃えにするようなCSSを設定しました。
下記のタグをCSSに
.separator img{
margin-left: auto;
margin-right: auto;
}
を導入するだけ。
導入する場所は「.post-outer img{」で検索してその下あたりに挿入する。
同じくふでたまごさんの「BLOGGER LABO」がとにかく参考になります。
Chromeアドオンでリンク機能を追加する
かっこいいリンクを貼りたいと思いいろいろと探っていました。
上記まではEmbed.lyというサービスでリンクカードを作っていたのですが、ちょっとリンクの画像等が大きいのでもう少しコンパクトなリンクカードを探していました。
Chormeアドオンでiframeタグを利用してリンク作成サービスをはてなブログのリンクカードっぽく作成してくれる機能を「寝ログ」さんにて紹介されていたものを見つけて、こちらをメインに導入しました。
こんな感じに表示されます。
美しく、かつすっきりとしたリンクが張れて気に入りました。
目的のページでChromeのメニューバーに表示されているアドオンボタンで一発リンク生成、貼り付けという簡単さ。
プライバシーポリシーの設置
プライバシーポリシーを設置しました。
Adsenceの審査に必要というのと、EUでのGDPR（EU一般データ保護規則）法案の可決で個人情報を取り扱うAdsenceやGoogleアナリティクスを設置している以上置いとけ的な記事を見たのでとりあえず。
このGDPRをめぐる論争、最近気になることの一つです。
プライバシーポリシーはこちらのサイトから拝借しております。
そのままコピペすると、Google評価的にどうなん？みたいな意見もあるようなので、wordで作成した後、PDFに落とし込み、「PDF to Image」というサイトでwordファイルから生成したPDFをJPGに変換して貼り付けました。
だんだんとサイトっぽくなっていって楽しい。
ついでに画像の転用されるのも嫌だなあとおもって著作権に関してもサイドバーに記述しておきました。
ちなみにAdsenceは無事通過しております。
良かったですね。
サイトマップの設置
もっとGoogleのクロールが効率的に回るようにするにはどうすればいいかなあと考えた結果、BLOGGERに備え付けのXMLサイトマップだけでなくHTMLサイトマップも作成しようと思いました。
wordpressとかは結構見つかるけど、Bloggerはやっぱりあまり見つからなくて少しだけ探しました。
やり方は簡単。コードをCSSに挿入して、あとはサイトマップページを作るだけ。
こんな感じになります。サイトマップ
ブログのトップページ最下部に設置しました。
トップの１ページの表示記事数を増やした（2019年1月31日更新）
こちらの画像が現在のトップの５記事目から下のスクリーンショットです。驚きの白さ。広告うっとおしいですね。サイズ変えようかな。
サイドバーにはいろいろ表示されてるのに下までたどり着かないんじゃないかなと思って表示件数を変えました。せっかく人気記事も表示してあるのに。
こちらがアフター。勘で「適当に20件くらい表示すればいいんじゃね～の！」というノリでやったらドンピシャハマった。
実は免責事項とかも書いてたんですよ。アドセンスを導入するためにいろいろやったときのなごりです。
読み込み速度が遅くなって、SEO的にどうなんだろうという懸念もありましたが、すっきりしないのでしばらくはこれで行こうかと思います。
ついでにそのあとに人気記事が二つしか表示されてないのを見て、7個に増やしました。するとまた下に驚きのホワイティができたので諦めました。いたちごっこ。
サイトのデザインの色とかを変えた
全体の色味がうっとおしいなあ、安っぽいなあと思っていてせっかくのサムネイルの色味を台無しにしている気がしました。
なので全体に色味を変更しています。リンクの文字の色・カーソル時のリンクの色・サイドバーのセクションタイトルの色味とかです。
全体的にシックな色合いに変化させました。これでサムネイルの写真の色味が映えてくると思う。
基本はVaster2を導入していれば、管理画面の『テーマ』→『カスタマイズ』→『Bloggerテーマデザイナー』で各文字の色味やラベルの色なども変更できるけど、リンクの色味を重めにしたかったので、わかりづらくなるのを予防するためにリンクは下線に線を引く形へ変更した。
詳しくはこちらのブログが役に立ったので参照。
ちなみに本文中のリンクの色の変更はCSSにて行うので、管理画面より『テーマ』→『htmlの編集』からHTML編集を開いて、「リンク」という言葉でctrl+F検索。
んで僕の場合はすべてリンクにはアンダーバーを表示させたかったので『 text-decoration:underline;』をすべての要素に追加して完成。こんな感じです。
.post a{ text-decoration:underline;color:#5c767f;}.post a:hover { text-decoration:underline; color:#666666;}.post a:visited{ text-decoration:underline;color:#e4e4e4;}リダイレクトでGoogleにきちんとサイトを認識するように設定した
こちらWoorankというSEOチェッカーサイト。
なんとwww.tarogtarog.comとtarogtarog.comの二つを認識しているとの結果。やばい。
すぐに管理画面より『設定』→『基本』→『公開』を見てみると・・・
おおお、リダイレクト設定されていない。ドメイン替えた後最近一気にランクダウンしたなあと思ってました。
記事下にトップページに戻るボタンを設置した
せっかくクリックしてもらったら、ほかの記事にも飛んでもらいたいなー、という思いがあり、一番下まで行って戻るボタンを押させてしまうよりは、と思い導入しました。
方法はコード埋め込むだけでした。こちらを参考にさせてもらいました。
良い情報をありがとう・・・ありがとう・・・・
記事下のPOCKETリンクをLINEリンクへ変更した
Vaster２では記事の下にSNSリンクが埋め込まれているのですが、デフォルトでは一個謎のリンクがあります。POCKETというボタン。
こんなもん日本ではほとんど使わんやろ、ということでLINEのリンクへ変更しました。
どこかでやり方を調べたのですが、忘れてしまった・・・。
Adsenseの広告サイズを変更した
上の画像でもあったようにアドセンスがサイトのトップデザインを崩している気がしたので、小さめのモノに変更しました。あと量を減らした。サイトデザインを損ねている。
スマホ版のトップページのサムネイルサイズと記事タイトルのサイズを変更
スマホ版で見ると、いつも画像が小さく、文字が大きくなっていて不満でした。
もっとビジュアルでクリックしてほしいな、という気持ちから、めいっぱい画像を大きくする形で変更しました。
ちなみにレスポンシブのスマホ版の画像、文字サイズを変更するには、Bloggerのhtml編集画面でctrl+f検索をして、「レスポンシブデザイン」で検索して出てくる項目の以下の部分を変更すると変更できます。
スマホ版サムネイルの画像サイズの変更
このコードのwidthとheightの数値を打ち換えてやると、変わります。
.article-thumbnail img{ width:200px !important;height:140px !important;}スマホ版トップページ記事タイトル文字の大きさの変更
このコードのfont-sizeを打ち換えてやると、変わります。
.article-list-title h2{font-size:16px;line-height:1.4em;}まとめ
今回の更新は2019年1月デス。何個もばらけるのうっとおしかったので一つの記事を更新していくスタイルに変更しました。
おおむね全体的な構成には満足しているので、文字の大きさだとか、雰囲気を変えていってます。
あとはできればサイトに訪れた人には2つくらい読んでいってほしいなあという譲れない思いがあるので、できる限り読みやすく、できる限り次をクリックしちゃうような流れをデザインで取り入れていこうと思ってます。
雑記ブログなので、できれば毎日の暇つぶしに見てほしい。検索流入とかよりデイリーの暇つぶしに見てもらうちょっと役に立つブログという立ち位置で頑張りたい。
そして仕事も勉強もだけど、ブログもやるぞ、という気持ちで頑張ります。
では。