Imaginary｜Blogger用テンプレートの提供 結城永人 - 2020年4月26日 (日) メインのブログの些細な日常に2016年の終わり頃からブログサービスのBloggerを二年くらい使い続けた。テンプレートに公式テーマを入れながら様々なカスタマイズを行った。少しずつ知識を増してBloggerでのサイト作成のコーディングが高度化された。どんなカスタマイズを行ったかをブログの記事に取り上げても余りに専門的過ぎて皆には直ぐに分からないような状況になって来てしまった。ならばオリジナルのテンプレートを作成して皆に使って貰う方が良いかも知れないと感じたんだ。コーディングが難しくてカスタマイズが無理な人にも僕がやっているのと変わらないデザインが手に入るわけだから便利だ。 目次Imaginaryのダウンロードと使用上の注意MIT License の日本語訳Imaginaryの無料のダウンロード先GitHubのRawのリンク先Imaginaryに盛り込まれたBloggerのテンプレートとしての特徴どこが変わったか：Imaginaryの公式テーマからの変更点 Imaginaryのダウンロードと使用上の注意 Blogger by Nick Youngson / CC BY-SA Bloggerのテンプレートの作成に取りかかって初めて完成したのがImaginary（イマジナリー）だ。Imaginaryは想像的、仮定的、架空的という意味で、色んな人が色んな使い方をできるようなテンプレートを目指して命名している。将来へ求める気持ち、すなわち夢を加味してBloggerのテンプレートを構想したし、仕上げたかった。 サンプルブログ 皆がBloggerで使えるようにImaginaryを提供する。先ずは所定のXMLファイルをダウンロードする。次いでBloggerのウェブの編集のテーマのバックアップ／復元からアップロードすればブログに従来のものと入れ替わって装着されている。そのまま、使うか、カスタマイズを行うBloggerのテーマやレイアウトから普通に可能だ。 僕が開発者としてImaginaryの使用上の注意を一つだけ挙げておきたいのは著作権だ。 Imaginaryのソースコードは全てのタイプやヴァージョンをThe MIT License（MITライセンス）によって提供する。 The MIT Licenseの日本語訳 The MIT License Copyright (c) 2019 結城永人 以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。 上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。 ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。 原文 Copyright 2019 Nagahito Yuki Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. license MIT_license by sado / GNU Free Documentation License（著作権の年と氏名は筆者） Imaginaryのソースコードは著作権／Copyright：Nagahito Yuki、または結城永人などとライセンス：The MIT Licenseの表記を行うかぎり、誰でも無料でダウンロードして商用でも使うことができる。デザインは自由にカスタマイズして構わないし、あるいはアレンジして再配布しても構わない。 加えてImaginaryを使って何等かの損害が起きたとしても提供する僕には責任を負わせないこと、いい換えれば利用者は自己責任においてImaginaryを使うことを予め承諾するように求められている。 Imaginaryのソースコードに必要最小限の著作権とライセンスの表記を行っているので、すなわち「Copyright: Nagahito Yuki 2019 | The MIT License | https://github.com/nagahitoyuki/imaginary-liquid」（URLはファイルの提供ページで、ライセンスの確認が行える）を決して消さないように使って貰えば問題はない。 テンプレートの最下段にも「With Imaginary」とダウンロードのページへのリンクを載せていて宣伝のためになるべく外さないで欲しい。 Imaginaryの無料のダウンロード先 Imaginary with liquid designリキッドデザイン：パソコンとタブレットとスマホで共通の縦一列のインデックスページ。スニペットは小さな画像で文章が多めのスタイル。Imaginary with grid designグリッドデザイン：パソコンと横向きタブレットで縦二列／スマホと縦向きタブレットは縦一列のインデックスページ。スニペットは大きな画像で文章が少ないスタイル。 GitHub@nagahitoyukiのリポジトリからImaginaryを無料でダウンロードして使うことができる。 Imaginary with liquid design｜GitHub ブラウザからImaginaryのXMLファイルを取得する場合はパソコンかモバイルはブラウザのデスクトップモードで表示される「Clone or Download」の緑のボタンから「Download ZIP」の青文字のボタンを押すとリポジトリの全てのファイルが手に入る。 LICENSE＿ライセンスの文書README.md＿Imaginaryの説明文english.xml＿Imaginaryの英語版firstview.jpg＿告知用の画像japanese.xml＿Imaginaryの日本語版 圧縮のZIPファイルなので、デバイスのファイルマネージャーで解凍してテンプレートのXMLファイルを取り出す。するとBloggerの管理画面のテーマのバックアップ／復元からアップロードしてブログにImaginaryを付けることができる。 GitHubのRawのリンク Imaginaryのリキッドデザイン日本語版ファイル英語版ファイルImaginaryのグリッドデザイン日本語版ファイル英語版ファイル ファイルを個別にダウンロードすることもできてファイルのページのファイルのリストの左上の「Raw」を使う。リンク先を開くとテンプレートのファイルがブラウザに表示されるので、ブラウザのダウンロードのボタンからデバイスに取り込める。スマホでもブラウザの通常モードで可能で、ファイルも圧縮されてないから直ぐにBloggerの管理画面のテーマのバックアップ／復元からアップロードして使える。 その他、GitHubはデバイスのターミナルエミュレーターからリポジトリを取得することができる（Git リポジトリの取得）けど、ただしBloggerではテーマ／テンプレートのXMLファイルをブログに反映させるにはブラウザから管理画面を開いてアップロードしなくてはならない。 GitHubだとファイルの更新履歴が残って利用者が確認して新しく付け替えたり、元に戻したりできるからテンプレートを提供するには便利だと思う。 Imaginaryに盛り込まれたBloggerのテンプレートとしての特徴 公式テーマのContempoを相当に気に入っていたし、Imaginaryのデザインやパフォーマンスの参考にもなっている。Bloggerのテンプレートのウィジェットバージョンとレイアウトバージョン／defaultwidgetversionとlayoutsVersionを2と3で同じにしたので、独自タグはContempoとSohoとEmporioとNotableとの互換性が大きい。そうした公式テーマをさらにチューンアップするような仕方で、オリジナルのテンプレートを着想したんだ。 どこが変わったか：Imaginaryの公式テーマからの変更点 日本語向けの文字サイズと行間デバイス毎の字体／font-familyの適用使用しないWebフォントのソースコードの削除テーマ用のHTMLとCSSとJavaScriptの大幅な削減（半分以下のファイルサイズ）記事／追加ページの上段の著者名にプロフィールアイコンを表示インデックスページに固有のJSON-LDの構造化データの記載記事／追加ページにMicroformatsの構造化データの追加スニペットの文字数の読み込みの軽減全ページで使用可能なFacebookとTwitterの共有ボタンとパソコン／タブレットでリンクのクリップボードへのコピーボタンかスマホでネイティブアプリから選択可能な共有ボタン記事の下段に更新日を表示記事ページなどにページネーションを設置レイアウトの下段にウィジェットセクションを増設（エラーページでは表示されないようにした）metaタグの不要なソースコードの削除インデックスページのOGP画像の一本化OGP設定にog:typeを追加TwitterのURL投稿でブログのTwitterカードを表示可能Google検索にモバイルサイトのURL（末尾に「?m=1」が付いたもの）を提示してモバイルファーストインデックスを安定化させる記事／追加ページのタイトルにh1タグ記事／追加ページのタイトルにブックマークのリンクを設置記事／追加ページのブログ名にpタグアーカイブとラベルのtitleタグのブログ名にアーカイブとラベルの併記HTML5のセクショニングの強化（記事のarticleタグのヘッダーにheaderタグ、アドセンス広告にasideタグを使うなど）古くて無用な一部のrole属性の削除（headerタグにrole='banner'などのマークアップの重複を防ぐ）ページ内ジャンプにゆっくりのアニメーション新しいフローティングバー（JavaScriptからCSSのpositionのstickyへの置き換え）全ページでヘッダーを過ぎたところから右下に表示されるフローティングの戻るボタン（ヘッダーのブログ名へ自動的にスクロールふる）を設置記事／追加ページでコメントが有効ならばコメント欄を過ぎたところから左下に表示されるフローティングのコメントボタン（コメント欄へ自動的にスクロールする）を設置。インデックスページに無限スクロールを付けてブログの下段から次のページのスニペットを自動的に表示する。Search Consoleの警告への対応（インデックスページのページネーションのリンクタグの見直し）視覚障害者のスクリーンリーダーでの操作性をランドマークやラベルを付けるなどして向上Bloggerの「収益」からアドセンス（Googleのサイト広告）を使用した場合の事前接続のpreconnectの設定アドセンスの自動広告に対応済み／アドセンスで設定して（審査に合格したライセンス所有者のみ）Bloggerの「収益」をオンにすれば広告コードの記載は不要プロフィールと注目の投稿の画像のdecoding属性による非同期処理スニペット画像のloading属性による遅延読み込みヘッダー背景画像のpreload属性による先読み埋め込みコメントフォームのIntersection Observerによる遅延読み込みBloggerの「設定」からアナリティクス（Googleのアクセス解析）を使用した場合の後回しの実行ブログの投稿のスニペットの取り込みのエラーの回避コメントフォームのメッセージが動作するスニペットの下段にアーカイブリンクの追加 リンク付きの項目はBloggerブログのカスタマイズを行ってかつて記事に取り上げていた。 Imaginaryは日本語での表示とソースコードの縮小／表示速度の改善とブログとしての利便性とSEO（検索エンジン最適化）対策を踏まえながらBloggerの使い心地を総合的に高めるために作り出された。 コメント minato さんの投稿… Imaginaryの構造化データのエラーについて。先程Search Console で「「}」またはオブジェクト メンバーの名前がありません」_というエラーが検出されました?同様のエラー報告があり色々試してみましたが、解説には至りませんでした。4件のURLに発生していたので、例外的にオブジェクトが取得できなかった可能性などもあるのでしょうか? 2022年5月11日 10:17 結城永人 さんの投稿… ソースコードを調べましたが、記載のミスでした。<script type='application/ld+json'>{"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem", "position": 1, "name": "<data:blog.title.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>"}, {"@type": "ListItem", "position": 2, "name": "<data:blog.pageName.jsonEscaped/>" }]}</script>パンくずリストの構造化データで、諸々の項目（数値以外の文字列）に半角二重引用符（""）を付け忘れてました。済みませんが、修正をお願いします。 2022年5月11日 13:04 minato さんの投稿… ご対応有難うございました～ よく見るとそれ以外の箇所は「"」ついてますね、、気づくべきでした^^; 2022年5月11日 14:27 minato さんの投稿… 無限スクロールについてですが、必要に応じて読み込みを追加する仕様にカスタマイズする方法などないでしょうか?10記事ごとに"さらに表示"_というボタンを表示できればいいのですが、、 2022年5月13日 11:51 結城永人 さんの投稿… 分かりました。細かい調整などで、少し時間がかかるかも知れませんが、カスタマイズの方法をサンプルブログに後で投稿したいと思います。お待ち下さい。 2022年5月13日 12:36 結城永人 さんの投稿… サンプルブログに読み込みボタン／無限スクロールの手動化のカスタマイズを掲載しました。 2022年5月15日 8:19 minato さんの投稿… ご対応いただきまして有難うございました。早速導入させて頂きます!! 2022年5月15日 9:12
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU（European Union／欧州連合）の GDPR （General Data Protection Regulation／EU一般データ保護規則）がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC（British Broadcasting Corporation／英国放送協会）が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者：秘められたスキャンダル に衝撃を受けた。 目次 ジ...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
アドセンスの個人のアメリカの税務情報／W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
結城永人
結城永人
コメント
Imaginaryの構造化データのエラーについて。先程Search Console で「「}」またはオブジェクト メンバーの名前がありません」_というエラーが検出されました?同様のエラー報告があり色々試してみましたが、解説には至りませんでした。4件のURLに発生していたので、例外的にオブジェクトが取得できなかった可能性などもあるのでしょうか?
2022年5月11日 10:17ソースコードを調べましたが、記載のミスでした。
2022年5月11日 13:04<script type='application/ld+json'>{
"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{
"@type": "ListItem", "position": 1, "name": "<data:blog.title.jsonEscaped/>", "item": "<data:blog.homepageUrl.canonical/>"}, {
"@type": "ListItem", "position": 2, "name": "<data:blog.pageName.jsonEscaped/>" }]}</script>
パンくずリストの構造化データで、諸々の項目（数値以外の文字列）に半角二重引用符（""）を付け忘れてました。
済みませんが、修正をお願いします。
ご対応有難うございました～ よく見るとそれ以外の箇所は「"」ついてますね、、気づくべきでした^^;
2022年5月11日 14:27無限スクロールについてですが、必要に応じて読み込みを追加する仕様にカスタマイズする方法などないでしょうか?10記事ごとに"さらに表示"_というボタンを表示できればいいのですが、、
2022年5月13日 11:51分かりました。
2022年5月13日 12:36細かい調整などで、少し時間がかかるかも知れませんが、カスタマイズの方法をサンプルブログに後で投稿したいと思います。
お待ち下さい。
サンプルブログに読み込みボタン／無限スクロールの手動化のカスタマイズを掲載しました。
2022年5月15日 8:19ご対応いただきまして有難うございました。
2022年5月15日 9:12早速導入させて頂きます!!