Imaginary｜Bloggerのテンプレートの提供

メインのブログの些細な日常に2016年の終わり頃からブログサービスのBloggerを二年くらい使い続けた。テンプレートに公式テーマを入れながら様々なカスタマイズを行った。少しずつ知識を増してBloggerでのサイト作成のコーディングが高度化された。どんなカスタマイズを行ったかをブログの記事に取り上げても余りに専門的過ぎて皆には直ぐに分からないような状況になって来てしまった。ならばオリジナルのテンプレートを作成して皆に使って貰う方が良いかも知れないと感じたんだ。コーディングが難しくてカスタマイズが無理な人にも僕がやっているのと変わらないデザインが手に入るわけだから便利だ。

目次

1. Imaginaryのダウンロードと使用上の注意
2. MIT License の日本語訳
3. Imaginaryの無料のダウンロード先
4. GitHubのRawのリンク先
5. Imaginaryに盛り込まれたBloggerのテンプレートとしての特徴
6. どこが変わったか：Imaginaryの公式テーマからの主な変更点

Imaginaryのダウンロードと使用上の注意

Jeans back pocket with a paper written Blogger by kalhh [CC0], via Pixabay

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],via Open Source Group Japan（著作権の年と氏名は筆者）

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 by 結城永人 via 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の構造化データの追加
• スニペットの文字数の読み込みの軽減
• 全ページに使用可能な共有ボタン（パソコンとタブレットではてなブックマークを追加／スマホでネイティブアプリから選択可能）
• 記事の下段に更新日を表示
• 記事ページなどにページネーションを設置
• レイアウトの下段にウィジェットセクションを増設（エラーページでは表示されないようにした）
• metaタグの不要なソースコードの削除
• インデックスページのOGP画像の一本化
• OGP設定にog:typeを追加
• TwitterのURL投稿でブログのTwitterカードを表示可能
• 記事／追加ページのタイトルにh1タグ
• 記事／追加ページのタイトルにブックマークのリンクを設置
• 記事／追加ページのブログ名にpタグ
• アーカイブとラベルのtitleタグのブログ名にアーカイブとラベルの併記
• HTML5のセクショニングの強化（記事のarticleタグのヘッダーにheaderタグ、アドセンス広告にasideタグを使うなど）
• 古くて無用な一部のrole属性の削除（headerタグにrole='banner'などのマークアップの重複を防ぐ）
• preタグは単語で折り返す／レイアウト崩れの防止
• ページ内ジャンプにゆっくりのアニメーション
• 新しいフローティングバー（JavaScriptからCSSのpositionのstickyへの置き換え）
• 全ページの右下にブログ名への戻るボタンを設置（ブログのヘッダー以降の画面でのみ表示される）
• インデックスページに無限スクロールを付けてブログの下段から次のページのスニペットを自動的に表示する。
• Search Consoleの警告への対応（インデックスページのページネーションのリンクタグの見直し）
• 視覚障害者のスクリーンリーダーでの操作性をランドマークやラベルを付けるなどして向上
• スニペットの画像の遅延読み込み
• ブログの投稿のスニペットの取り込みのエラーの回避
• コメントフォームのメッセージが動作する
• スニペットの下段にアーカイブリンクの追加

リンク付きの項目はBloggerブログのカスタマイズを行ってかつて記事に取り上げていた。

Imaginaryは日本語での表示とソースコードの縮小／表示速度の改善とブログとしての利便性とSEO（検索エンジン最適化）対策を踏まえながらBloggerの使い心地を総合的に高めるために作り出された。