編集

Blogger テーマ F-light (エフライト) について

｜2023/12/10 ｜25
アイキャッチ

Blogger Theme「F-light」に関する注意事項やおすすめの設定などを記します。導入前にご一読ください。

F-light の導入

免責事項など

当テンプレートをご利用になったことで生じたいかなる損失・損害について、当方では責任を負いかねます。

当テンプレートのカスタマイズは自由です。ただし、当テンプレートおよび当テンプレートを改変したものを販売・再配布することは禁止します。

お願い

テスト環境にて充分な確認、検証は行ってはいますが、何分初めてのテーマ作成で不備な点もあるかと思います。実際に利用してみてバグの発見や機能要望等ありましたら、コメントにてお知らせいただけると幸いです。

作者は PC 環境しかないため、モバイルでの検証がほぼ出来ません。そのため特にモバイル実機でモニタリングしていただけると大変助かります。

ダウンロードはこちらから

  1. 通常版 → Google Drive (151KB)
  2. 通常版 (テーマデザイナー付き) → Google Drive (153KB)
  3. カードレイアウト版 → Google Drive (151KB)
  4. カードレイアウト版 (テーマデザイナー付き) → Google Drive (153KB)
  5. English version (List Layout + Theme Designer) → Google Drive (147KB)
  6. English version (Card Layout + Theme Designer) → Google Drive (147KB)

xml ファイルのため警告画面が表示されますが、「このままダウンロード」して頂いて大丈夫です。
A warning page will be displayed because it is an xml file, but you can just "Download anyway".

テーマ適用後にまずやって欲しい初期設定

①表示件数の調整

トップページの番号ページャーが正しく機能しない場合がありますので、以下の設定をご確認ください。

Blogger 管理画面の設定にて「投稿」→「メインページに掲載する投稿数の上限」を10件にして下さい。(デフォルトでは7件になっています)

もし10件以外にしたい場合は、テーマの HTML 編集にて以下の2か所の数値を設定した数値と同じにして下さい。

①2586行目辺り
<b:if cond='data:view.isArchive or data:i lt 10'>
HTML 編集箇所
②3601行目辺り(番号ページャースクリプトの頭の方)
postperpage=10

尚、トップページの記事数が設定より少なくなったりページによってバラバラになってしまう現象に関しては、Blogger の仕様によるもので、追記区切りの挿入などの対処法で解決できる可能性があります。詳しくは下記の記事を御覧ください。
注意！あなたのBloggerのメインページは投稿数が勝手に減っているかも！ - after work lab

②コメントの設定

「設定」 → 「コメント」 → 「コメントの表示場所」で「埋め込み」にしてください。「フルページ」や「ポップアップウィンドウ」にすると一部の UI が正しく機能しなくなります。

おすすめ & 非推奨な設定など

仕様や特徴

  • PC (幅 1024px 以上) のトップページでは2カラム、記事・固定ページでは1カラムになります。サイドバーコンテンツはフッターに移動します。
  • 当テンプレートは最新のバージョン2のウィジェットで構成されています。 機能的な特徴としては、レイアウトページで各ウィジェットの表示非表示の切り替えが簡単にできます。
  • 記事一覧、人気の投稿、関連記事、コメントアバター、以上の画像は遅延読み込み設定済みです。注目の投稿に関しては一番上にある(ファーストビュー)ため、遅延設定は外してあります。JavaScript 処理により自動的に WebP 変換されます。
  • レイアウトページにて「ブログの投稿」ガジェットの各項目の表示・非表示の状態は反映されませんのでご了承ください。非表示にしたい時は、当該箇所の ID やクラス名を調べて CSS で display:none にする必要があります。詳しくはこちらの記事を御覧ください → F-light カスタマイズ集 (随時追加予定) | ふじろじっく
  • 番号ページャーはフィードが非公開だと機能しません。(デフォルトの前後記事ページャーが表示されます)
  • アーカイブウィジェットは「階層」以外にすると表示されません。
  • アーカイブページャーは「階層」以外にすると表示がおかしくなります。
  • コメント投稿機能に関して、「埋め込みフォーム」と別ページに移動する「コメントリンク」を選択できる仕様になっています。
  • 記事編集ボタンや、コメント削除ボタンは、管理者(コメント投稿者)以外には見えません。
    ※Firefoxでは「強化型トラッキング防止機能」により管理者であっても表示されません。
  • 一部のスクリプト(上下ジャンプボタン、スムーススクロール、リンクコピーボタン、匿名アバターアイコン置き換え)は jQuery で動いています。 JS に詳しい方は自力でスクリプト組んで下さい。jQuery を外せば PSI で余裕で満点取れますよ(笑)
  • アイコンは全て SVG を使用しています(Font Awesome, Feather, Bootstrap)。
  • highlight.js 等のシンタックスハイライト機能は実装していません。<pre></pre> で背景は付きます。
  • PC のトップページでは移動距離が少ないので上下ジャンプボタンは非表示にしています。不具合ではありません。もし表示させたいという方がいらっしゃったら、コメントでお知らせ頂ければ手順をお教えします。
  • JSON-LD 方式の構造化データマークアップを搭載。
  • (見える)パンくずリストは搭載していません。 代わりに JSON-LD 方式の 内部的？なパンくずリストを実装しています。読者には見えませんが検索エンジンにはちゃんと認識されます。
  • フッターのコピーライト年は JavaScript で自動的に今年が表示されます。
  • ブログ主のコメント名に付くチェックマークに関して、プロフィールを公開していない場合など、いくつかのケースでが正しく表示されなくなります。そのような場合の対処法についてはこちらの記事をご参考にして下さい。
    https://fujilogic.blogspot.com/2022/03/comment-display-customize.html#4
  • defer.js を導入しているので、Twitter も Instagram も埋め込みコードの末尾にある JavaScript タグは不要です。
    参考: Twitter・Instagram の埋め込みが重いのは万能な遅延読み込みで解決 | リモスキ
    不要！→ <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    不要！→ <script async src="//www.instagram.com/embed.js"></script>
  • 作者が無頓着なため、AdSense に関しては一切配慮しておりませんので悪しからず。

設定など

  • 各ウィジェットはレイアウトページで、ドラッグ・アンド・ドロップで簡単に並べ替えが出来ます。「注目の投稿」をサイドバーに移動させることも可能です。変更後は右下の保存アイコンで保存するのを忘れずに。
  • 「注目の投稿」は個別ページでは非表示になりますが、表示させたい場合は、予めサイドバー(SUB セクション)に移動させてから、テーマ編集にて以下のコードの赤文字の箇所を削除してください。
    <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='false' title='注目の投稿' type='FeaturedPost' version='2' visible='true'>
  • 各ウィジェットはレイアウト設定ページにて表示・非表示の切り替えが可能です。従って使わないウィジェットは削除せず、非表示にしておくことを推奨します。絶対要らない！という場合は好きにして下さい。ラベルウィジェットに関しては、削除後再追加してもカテゴリ/ハッシュタグ振り分け機能付きの独自仕様で復活します。
  • カテゴリ ラベル ウィジェットには、ラベル名に「#」が付かない物だけがリストアップされます。
    ハッシュタグ ラベル ウィジェットは、「#」が付くラベルだけがリストアップされます。
    レイアウト設定で「リスト」にするとハッシュタグ、「クラウド」にするとカテゴリ仕様に切り替わります。
    振り分け機能の仕様上、半角数字のみのラベルがある場合、エラーでトップページの記事一覧や記事ページが表示されなくなってしまいますのでご注意ください。全角の数字の場合は問題ありません。

    ラベル名に「'」(半角シングルクォーテーション)が含まれると # が無くてもハッシュタグとして認識されてしまいます。また関連記事も処理エラーで表示されなくなってしまいますが、「’」(全角)にすればこれらのエラーを回避できます。
  • トップページ記事リストの画像左上には「#」のないカテゴリラベルだけが表示されます。多数のカテゴリがある場合、はみ出した分は非表示になります。
  • Twitter 等でシェアした時に表示されるカードには対応済みですが、トップページや画像のない記事の場合は何も表示されません。62行目の <meta content='【OGP 画像 URL】' property='og:image'/> とは、そういう場合に表示させるタグですので、お好きな画像を設定してみましょう。
  • 注目の投稿の「RECOMMEND」表記を変更したい場合は以下のタグを探して変更して下さい。
    <a expr:href='data:post.url'><p id='feat-name'>RECOMMEND</p></a>
  • コメントは新着順の表示になっています。 他のテーマでは通常、埋め込み時は「返信」ボタン付きのスレッド式表示になりますが、当テーマでは非対応となっていますのでご了承ください。 尚、新着順を逆の投稿順に変えたい場合は、以下のタグを変更して下さい。 
    ①変更
<b:loop reverse='true' values='data:comments' var='comment'>
↓↓
<b:loop reverse='false' values='data:comments' var='comment'>

②変更または削除
<b:if cond='data:post.numberOfComments gt 1'> (新着順)</b:if>
    コメントフォームを下に移動させるためには以下の CSS を追加します。
    #comments {
  display: flex;
  flex-direction: column;
}
#comments-block {
  order: 1;
}
#add-comment {
  order: 2;
}
.comment-form-jump {
  display: none;
}
  • 記事一覧、関連記事に設定されている NO IMAGE 画像を変更したい場合は以下の URL を探して置き換えて下さい。

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi9Nus_dCEzBMw6G-kOlhtsgLP-CkjQKGE3erfQFdkLxG_Y3f2ldTHSXcPVRvtlHKrg7004Jawx8gDFWCdE-QnH2i56g7Dgeff8kvKUKfM71joqYbpIA1vUZOAgibGSk5MjRY_y8j_snP-/ (それぞれパラメータが異なるため以下省略)
  • 匿名コメント投稿者のアバターを変更したい場合は、以下の URL を変更して下さい。(https: は不要)

    匿名アバター
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyphenhyphenZmthYpO-eE1mYwHTHMW4lLB9E2hPcC4XlAdM7xPfv6zh6ovH-H-eV22R6PPw76XLzuHj-WBcEq79csd_VegfWG0uTGYYhMUQKKq_jK_Q9Sw1OEPyLUBk1WLXluYphi4B0JfjB84E-o/s100-e365-rw/avatar.png

    noimageアバター
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeax-ULuArNFc2NFq_z8PLXU_eY5p1ZjJ7mXFVPyuTSdN-n8BfAOjZG7CrpGz4BZtrluBtAwkNVVTr00g-1DP7o91eMn3LsRQ4XXofNy0XIM1CppwPbJp3TQzQukNI1gczhJycaXecqQ/s100-e365-rw-cc/no-image-avatar.png
  • 人気の投稿はデフォルトで「全期間」に、注目の投稿は「最新記事」にそれぞれ設定されていますので、レイアウトページでお好みに変更して下さい。(注目の投稿は「公開した日時が最も新しい投稿を使用する」をオフにする)
    人気の投稿のスニペットは設定に関わらず表示されません。
  • 別の集計期間で2つ目の人気の投稿ガジェットを設置したい方はこちらの記事をご参照ください。→【F-light】2つ目の人気の投稿ガジェットも同じデザインにする方法 | ふじろじっく
  • 人気の投稿の順位番号を消したい場合は、以下の CSS を追記して下さい。 
    .post-rank {
  display: none;
}

2020/10/13 追記

F-light カスタマイズまとめ記事を書きました。宜しければご参考にどうぞ。

F-light カスタマイズ集 | ふじろじっく

Special Thanks

最後にウィジェットや Javascript でお世話になった方々をご紹介します。こちらの有志の方々の技術なしでは、特に JS の知識が乏しい私が理想的なテーマを完成させることは出来なかったと思います。この場を借りてお礼を申し上げます。本当にありがとうございましたm(_ _)m

新しい投稿はありません 前の投稿