0

Blogger カスタマイズ 備忘録

Bloggerでブログを作成した際にかなり苦労したのでカスタマイズの参考にしたサイトを紹介しつつ記録として残しておこうと思います

完成したブログがこちらになります

CATCH!!｜東京パフォーマンスドール ファンサイト
目次
  1. ブログ作成手順
  2. テンプレート関係
  3. SEO
  4. Googleアドセンス

ブログ作成経緯

東京パフォーマンスドールのブログを本格的に制作するため。パフォーマンスドールのサイトはいくつか存在しているもののかなり昔に作られていたりデザイン的に時代を感じるものとなっているので今見ても問題ないようなデザインとスマホなどでも閲覧できるようなレスポンシブデザインにしたかったため

ブログ作成手順

これまでもBloggerでブログを作成したことはあったのですが以前とはまったく異なるテンプレートを使ったためかなり難航しました

テンプレートの選択

日本人Bloggerの方が使う定番テンプレートと言えば「QooQ」「JetTheme」あたり。最近だとふじろじっくさんのF-lightなんかも人気のようです 

テキストベースのブログであれば上に挙げたテンプレートを使ったほうが良いと思います。が、今回はデザイン的に選択肢として入れることは難しいので海外製のテンプレートの中から選択しました 

トップページのみ画像がスライドするガジェットが用意されているものです

Bloggerの設定項目

  • コメント関係
    • コメント関係はすべてオフにしました
  • WebP 画像の提供
    • オン
  • タイムゾーン
    • (GMT+09:00) 日本標準時 – 東京
  • メタタグ
    • オン 検索向けの内容も記入
  • ブログフィードを許可
    • 追記の区切りまで
      ここを変更するとなにかと競合しているのか表示に不具合が発生

ドメイン関係

ドメインを取得したのでBloggerでカスタムドメインの設定をしました。初めての作業だったので少しばかり苦労しました。 

筆者はお名前.comでドメインを取得しました。Blogger×お名前.comの組み合わせで手順を紹介しているサイトがありましたのでそちらを参考にしました

ドメインの反映にどのくらい時間がかかるのかまったく検討がつかず不安になりましたが、DNSのキャッシュ状況を確認できるサイトでキャッシュOKになっていればおそらく大丈夫だと思います。その状態でBloggerの設定をしても即時反映されないかもしれませんが設定が間違っていなければ時間をおけばしっかり表示されると思います

テンプレート関係

かなりいじってます。いろんなサイトを参考にしながら手探りで試行錯誤しながら作成しました。

ヘッダー

タイトルと説明を画像で代替しています。Bloggerのレイアウトのページヘッダー設定からイメージをアップロードすると800pxにリサイズされてしまいます。パラメーターにs1600を追加して対策しました。

ふじろじっくさんのF-lightを使用している方はブログで対策が紹介されています。

パンくずリスト

パンくずリストを構造化データ形式にするため下のサイトを参考に追加しました。リストの表示位置は記事上ではなく記事下へ移動させました

ラベル

Bloggerではタグのことをラベルと呼称しています。このラベルをカテゴリとタグに分けたいと思ったため下のサイトの「カテゴリーとハッシュタグに分ける」を採用させていただきました

ハッシュタグの「#」部分をjsを使って非表示にしました

関連記事

記事の下に該当記事のタグと同じものからランダムに表示してくれるガジェット。Bloggerでは標準搭載されていないのでこちらも下のサイトのものを使わせていただいています

シェアボタン

TwitteをはじめSNSでシェアできるボタン。ふじろじっくさんのデザインとコードを使わさせていただきました。はてなはいらないのでwwいいねボタンに変更しました

ブログカード

レスポンシブに対応したブログカード。デザインタイプを選べるところもいいと思う

いいね! ボタン

押されることはほぼないと思われるが一応設置してみる。はてなの代わりにいいねボタンを追加
(リンク元が削除されています)

自動目次

全部のページではなく特定のページのみに目次を表示させたかったところ下のサイトで紹介されている方法で可能だった。open・closeの設定が可能でブラウザ表示時に閉じた状態にできるところがありがたい

ページネーション

上のコードを使用させていただきました。ページのフォント色、背景色、ホバー時に色変化させるようにCSSをカスタマイズ。

ブログ内検索

Bloggerの「このブログを検索」ガジェットで検索を行うと検索結果が20件表示されるというのがデフォルトの仕様らしく上で採用したページネーションとの表示にズレが生じてしまいました。
具体的には検索結果の1ページ目は20件表示、2ページ目以降が指定した件数=12件が表示されておりページネーションで設定した件数を差し引いた(20件-12件)の8件が1ページ目と2ページ目に重複して表示される状態でした。

使用しているテンプレートでの検索フォームの記述がこちら

<div id='nav-search'>
   <form class='search-form' expr:action='data:blog.searchUrl' role='search'>
      <input autocomplete='off' class='search-input' 
       expr:placeholder='data:messages.searchThisBlog' name='q' type='search' value=''> 
      <span class='hide-search' />
   </form>
</div><span class='show-search' />

これに

<input name='max-results' type='hidden' value='12'/>
<input name='by-date' type='hidden' value='true'/>

と追加しても検索結果の表示件数は20件のまま変わりません。

そこでこちらのブログで紹介されている方法を使いました

最終的な形がこちら

<div id='nav-search'>
   <form action='https://www.performancedoll.com/search' class='search-form' 
    id='searchthis_gadget' method='get' name="searchthis_gadget" role='search'>
      <input class='search-input' expr:placeholder='data:messages.searchThisBlog' 
       name='q' title='検索' type='text'> 
      <input name='max-results' type='hidden' value='12'>
   </form>
<span class='hide-search' />
</div><span class='show-search' />

これで検索結果の表示件数が設定した12件となりページネーションとの表示件数と合致して重複することなく表示することが出来ました。

Chat GPT

CSS、Javascriptでどうすればよいか分からず調べても情報を見つけることが出来なかったときにはChat GPTを使って解決しました。

意図したとおりの回答が得られず時間がかかったケースも多かったですがそれでもかなり助かりました。

CSS

スタイルシートは大幅に追加。正直わけがわからなくなっているww レスポンシブにも対応させたかったのでメディアクエリも使用している。おそらくもっとシンプルにできると思うしまとめられると思うのだがとりあえず表示されているのでヨシ!

要素をホバー時にエフェクト

画像の上をホバーしたときに文字を表示させるために追加。 ただしスマホなどでは動作しない

テーブル

PCでの表示では1行、スマホでは2行になるようにレスポンシブ対応

見出し

できるだけシンプル、かつわかりやすく表示できるものをピックアップ。いろんなサイトから採用している

年表

タイムライン系はいくつかあったもののレスポンシブでデザインが崩れてしまったりすると手直しが難しいものが多かった。採用させていただいたのはこちら

グリッド

グリッドめちゃくちゃ便利。昔はレイアウト整えるのが難しかったのにグリッド使うとすごく簡単!

外部CSS

CSSがかなり長くなったのとBloggerのテンプレート編集画面がXMLで特殊文字が置き換えられ分かりづらく感じたためGitHubに外部CSSファイルを配置して読み込むようにしました

SEO

ブログのタイトルやOGP関連の記述はこちらを参考にしました

Googleサーチコンソールにxmlのサイトマップを送信しました

Googleアドセンス

Blog作成から1週間、記事数は50程度でアドセンス申請。3週間弱で合格の通知がきました。記事の内容はほとんどが情報のみでしたが、他サイトとは書式を変えて掲載されていない情報も追記しています。 

また他サイトでは誤表記・誤植や漏れなどがありましたがそういったものも補完しました。自サイトの独自性として楽曲データからフィルタリングできるものも用意しました。 

内部リンクもしっかりと張ってナビゲーションのわかりやすさを重要視したデザインを心がけたつもりです。

現状デザインと情報量には概ね満足できているかなと思います。画像サイズやコードの関係でサイトスピード表示の数値はかなり低いですが、デザインとの両立は難しいと思ったのでデザインを優先しました。 

Bloggerはかなり癖が強くカスタマイズするのはなかなかに難しいと思います。しかしBloggerは広告が付きませんしGoogleアドセンスの審査も申請できますのでテキストベースでブログを始めるときの選択肢としてはありなんじゃないかなと思います。

0 件のコメント:

コメントを投稿