ネットの海

『オーロックス』読みやすいBloggerの日本語テンプレート【無料】

2019年12月5日  2020年3月2日 

可読性の高い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からサイズ変更が可能です。

オーロックスIIのデータ(2019/12/18)データは、
https://note.com/onakapeco/n/na26f419de392

デモサイト

特徴としては、以下の様になっています。
  • シンプル
  • レスポンシブ
  • SEO最強(最新の構造化スキーム)
  • 読みやすい
  • メニュー折りたたみ時のハンバーガーメニュー採用
  • アンダーラインが黄色
  • 文章の型が既に決まっているため、読みにくい文章や薄っぺらい文章になりにくい。
  • はてなブログの様に段落があるため、読みやすい。
  • 標準文字サイズ(最小,小,大,最大)の調整済み(サイズ変更可能)
  • フレームワークとしてはMaterializeを採用
段落機能と標準文字サイズの調整は、Bloggerテンプレートの中では何気にレアな機能です。naverまとめやはてなブログみたいなBloggerテンプレートを意識しています。背景も目が疲れない様に作っています。もっとこうした方が良いというコメント募集してます。


見た目はこんな感じです。
カスタマイズからバーの色とピンク色を変更できます。



オーロックスシリーズの亜種

オーレックスシリーズは、Materializeのフレームワークを使っているため、マテリアライズのウィジェットを使うこともできます。具体的には、今風なページになる『視差背景』と画像を強調するための『画像スライダー』を導入することが可能です。

視差背景を持つラクーンドッグ

オーロックスIIをベースにして、今風なページにするために視差背景を導入したラクーンドッグも作りました。視差背景とは、スクロールをするときに、背景と記事の動きに差が出る機能のことです。視差背景があると一気に今風なブログに見えます。詳細については下URLを。
https://techotecho2.blogspot.com/2019/12/raccoon-dog.html



ー記事をシェアするー
B!
タグ

コメント

コメントを投稿

Translate

人気の投稿