『オーロックス』読みやすいBloggerの日本語テンプレート【無料】
可読性の高いBloggerテンプレート
Blogger は、広告無しの無料ブログとして非常に優れています。ブログに文章を書くと考えると、本来なら第一選択として名前が挙がって良いレベルです。しかし、実際のところはてなブログやnote, ライブドアブログの方が書きやすく、読みやすいのが実情です。なぜ書きにくいのかと言うと、正直、はてなブログと比べるとなんかモッサリしてて、可読性がよくありません。また、ブロガーテンプレートの種類が少ないためにBloggerユーザーは、限られたテンプレートから選ばなくてはいけません。
そこで、可読性の高いBloggerテンプレートを作成しました。可読性の高さは、文字間隔や文字サイズの調整、タグの最適化に加えて、pタグの挿入によって解決しました。pタグとは、段落を決定するタグで はてなブログやライブドアブログでは標準搭載です。一方で、Bloggerにおいては、仕様上の問題でpタグを入れることが出来ず、“段落の存在しない記事”を書かざる得ませんでした。本テンプレートでは、Jqueryによって、pタグを自動挿入することで、段落によってメリハリをつけたブログが書けるようになっています。
オーロックスシリーズ
そこで私は、文字サイズ、行間の最適化と段落の導入によって読みやすさ(可読性)の高さを目指したいと思います。はてなブログやNaverまとめの様に、そのまま使えるBloggerテンプレートを作りました。
オーロックスII
オーロックスIは、ガジェットが古いため更新日時を設定できませんでした。そこでガジェットバージョンを上げて、SEO最適化したオーロックスIIを作りました。こちらにデモサイトがあります。はてなブログやNaverまとめをデザインの参考にしています。オーロックスIIは、ガジェットのバージョンが2なので、更新日の機能がついています。
オーロックスIIの特徴
シンプル・レスポンシブシンプルなデザインで読みやすいデザインにしています。フレームワークにMaterializeを採用したころで、レスポンシブな動きが可能になっています。レスポンシブでメニューが折りたたまれた状態では、ハンバーガーメニューになります。
読みやすい文章の型・段落
文章には、pタグが自動挿入されるため、従来のBloggerでは難しかった『段落』を作ることができます。そのため、より読みやすい作りになっています。
日本最大のキュレーションサイトであるNaverまとめは、段落と見出しに型があるため、誰でも綺麗なページを作ることができます。本テンプレートでも文章の型を維持することで、読みやすさを向上させています。
SEOとパンクズリスト
SEOについては、http://schema.org/を使うことで、Googleから認識されやすくなりました。パンクズリストもしっかりと稼働しております。
標準文字サイズ
書きやすさ向上のために、標準文字サイズ(最小,小,大,最大)の大きさを変更し、太字にしました。CSSからサイズ変更が可能です。
https://note.com/onakapeco/n/na26f419de392
デモサイト
特徴としては、以下の様になっています。
- シンプル
- レスポンシブ
- SEO最強(最新の構造化スキーム)
- 読みやすい
- メニュー折りたたみ時のハンバーガーメニュー採用
- アンダーラインが黄色
- 文章の型が既に決まっているため、読みにくい文章や薄っぺらい文章になりにくい。
- はてなブログの様に段落があるため、読みやすい。
- 標準文字サイズ(最小,小,大,最大)の調整済み(サイズ変更可能)
- フレームワークとしてはMaterializeを採用
見た目はこんな感じです。
カスタマイズからバーの色とピンク色を変更できます。
追伸)Bloggerのアップデートによるタグの自動追加について
オーロックス の初期設定
オーロックスシリーズの亜種
視差背景を持つラクーンドッグ
オーロックスIIをベースにして、今風なページにするために視差背景を導入したラクーンドッグも作りました。視差背景とは、スクロールをするときに、背景と記事の動きに差が出る機能のことです。視差背景があると一気に今風なブログに見えます。詳細については下URLを。https://techotecho2.blogspot.com/2019/12/raccoon-dog.html
このコメントは投稿者によって削除されました。
返信削除このコメントは投稿者によって削除されました。
返信削除このコメントは投稿者によって削除されました。
返信削除