
Blogger日本語テンプレート「Imaginary」(リキッドデザイン)を使い始めて5ヶ月ほど経過した。Search Consoleに怒られる事もなくなり快適だ。
「ページエクスペリエンス」「ウェブに関する主な指標」「モバイル ユーザビリティ」に関する不良(エラー)が現状一つもない。無料テーマでこの出来は凄いことだよ。
Imaginaryには、リキッドデザインの他にグリッドデザインがある。当初こちらを使用するつもりだったが、トップページのカスタマイズが上手くいかず取り敢えずリキッドを採用していた節がある。
今回はImaginaryのカスタマイズにおける新発見と、Bloggerでアドセンスを申請する場合の懸念事項について話したい。
※「Imaginary theme」の入手方法などは、記事の最後で紹介する。
Imaginary(グリッドデザイン)カスタマイズ

Imaginaryグリッドデザインのトップページ(インデックスページ)では、記事タイトルがサムネイル(画像)の上に表示される。そしてデザイン面の理由から一行に省略されているのが寂しい。
そしてスニペットと呼ばれる記事冒頭部分の情報量は多い。これはImaginaryのSEO的強みになっている可能性がある。ただ僕好みの見た目はこれだった。

サムネイルの下に全文に近い形で表示されたタイトル、スニペットはあえて表示しない。こんな感じにカスタマイズしたかったが、5ヶ月前はやり方が分からなかった。それが最近になってサブブログに当該テンプレートを採用して再検証したことで解決方法が見つかった。
Imaginaryって、「グリッドレイアウト」なんだよね。グリッドコンテナー内の要素ってCSSのみで簡単に並べ替える事が出来る。僕はそれを知らずにHTMLの入れ替えに熱を上げていた。

図のようにピンクの部分がグリッドレイアウト。そして濃いピンク(記事リスト)にも display: grid; が適用されている。

ここではそれぞれの要素(クラス)に順番をつけることで、自由に並び順を変更する事が出来る。もうグリッドレイアウト以前の問題かもしれない、、
以下のCSSで上書きすれば願いは叶っていたのだ。/*--Imaginaryカスタマイズ(グリッドデザイン)--*/ p.summary { display: none; } .total-snippet { order: 1; } .hfeed .snippet-title { order: 2; } footer.post-footer { order: 3; } .blog-pager { order: 4; }
CSSの order がこんなに便利だとは知らなかった。知識がないとこういう簡単なところで躓いてしまう。
これらを踏まえてImaginaryのカスタマイズに挑戦したテストサイトが存在するので、興味があれば覗いてみて欲しい。BloggerでImaginaryを利用する際の参考になるかもしれない。

Imaginaryカスタマイズ(テストサイト)
Imaginaryグリッドデザインのトップページを中心に、日付の日本語化やページナビ(無限スクロール停止)をカスタマイズ…
Bloggerでアドセンス(収益化)を申請する
2022年の9月にサブブログ(Blogger)を立ち上げた。テンプレート(テーマ)は海外製の「JetTheme」にした。日本でも利用者が増えている人気テーマの一つだ。
1週間で10記事投入しインデックスが完了した段階でアドセンスの申請をした。しかし残念ながら同じ理由で2度審査落ちとなった。
【申請時のブログの状況】
- 記事数・・・10記事
- 1記事の文字数・・・800~2200文字程度
- ジャンル・・・エンタメ / YMYL系
- お問い合わせ・・・あり
- プライバシーポリシー・・・あり
- アフィリエイト(かんたんリンク)・・・あり
- プロフィール・・・なし
アドセンスに指摘されたのが、「コンテンツが不必要に操作しにくいページ」についてだった。ちょっと意味が分からなかった。
2度目の申請では、フッターにあった「お問い合わせ」や「プライバシーポリシー」をグローバルメニューに移動したり、記事同士の内部リンクを修正した。
しかし最初と同じ理由で審査に落ちてしまった。
ここは一度アドセンスは諦めてもう少し記事を蓄えようと思ったが。ただその前にメインブログで使用しているテンプレート(Imaginary)がSEO的に不備のないモノだったので、JetThemeに変えて再申請してみようと思った。というか閃いた_。
三度目の正直、結果は無事合格となった。
「コンテンツが不必要に操作しにくいページ」は、テンプレートの構造が関係していた。という結論になってしまった。
JetThemeは多機能(高性能)で、アドセンス(JavaScript)によるLPC問題も対策済みだ。とても便利な反面、アドセンスの規約的に大丈夫なのかという不安はあった。
アドセンスは審査の合否に関する具体的な情報を開示しないので真実は不明だ。ただBloggerでアドセンスを申請する場合は、JetThemeをはじめとする多機能な海外製テンプレートは避けたほうが得策かもしれないと思った。
すでにJetThemeでアドセンスを運用しているブロガーは多数いるが、ペナルティを受けたという話は聞いたことがない。この辺は柔軟に考えるべきかもしれない。
※一般論としてアドセンスの遅延読み込みは収益に悪影響を与える恐れがあり、規約上もグレーな可能性がある。
Imaginary(無料)の入手ページ

Imaginary|Blogger用テンプレートの提供
Bloggerブログのオリジナルテーマ/カスタムテンプレートのImaginaryを作成した。初めての開発は分からないことが多くて大変だったけれども一つずつ問題を解決するほどに面白かった。サイト作成の能力も相当に増した。
こちらのページのダウンロードリンクからテンプレートの入手が出来る。
Imaginaryカスタマイズで読むべき記事

投稿の日付表示を日本語の順番に変える方法
Bloggerの日本語テーマ/テンプレートのImaginary theme、想像的・仮定的・架空的などの意味があります。
Imaginaryの日付部分はデフォルトでは日本語表示に対応していない。カスタマイズする方法は公式ブログで詳しく解説されている。

読み込みボタン/無限スクロールの手動化のカスタマイズ
Bloggerの日本語テーマ/テンプレートのImaginary theme、想像的・仮定的・架空的などの意味があります。
またトップページなどでは無限スクロール(ページナビ)が採用されている。これはスクロールが一番下に到達すると自動的に次のページを読み込む仕様だ。この仕様はフッターコンテンツへのアクセスの弊害になる場合があるので、僕は手動化のカスタマイズで対策している。
Imaginaryライセンスについて
「Imaginary」は"The MIT License"に準拠することで、複製、複写、変更、結合、掲載、頒布、サブライセンス、販売などが自由に行える。
たとえば僕がカスタマイズしたImaginaryを、製作者(結城永人氏)の許可なく販売したり、再配布することが出来る。
ただしテンプレートのソースコードに著作権 / The MIT Licenseの表記が必須となる。これは以下のソースコードをテンプレートファイルから削除しない限り担保される。

あとは自己の創造性の赴くままに活用すればいい。_よし決まった!!