シンプルで速い日本語bloggerテンプレート「QooQ」の紹介!

製作 プログラム

最終更新日:2019/05/17

ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる

1年?2年くらい?とにかくかなり久しぶりですが、最近WEBサイト制作の仕事もひと段落ついたので新しいbloggerテンプレートを公開します!

その名も「QooQ(クーク)」!これまでのまとめとして作りました。個人的にはスマートでカッコいいデザインに仕上がったと自画自賛したいところ!あとは表示の速さもできるかぎりこだわっています。それでは紹介していきますね。

2019/4/12 17:00追記

アドセンス広告を入れた時、タイミングによって広告がはみ出してしまう&ページ幅が大きくなりすぎる不具合を修正しました。けっこう大きめのバグなのでv1.15(2019/4/12 17:00に公開)以前を使っているなら再ダウンロードしてくださいね。

  1. QooQサンプルページ
  2. QooQダウンロード!
  3. QooQの特徴
  4. QooQのこだわりポイント①
  5. QooQのこだわりポイント②
  6. アドセンス広告について
  7. まとめ

QooQサンプルページ

まずはQooQのサンプルページです。①がテンプレート適用そのままのデザインで、②はテーマデザイナーでいじった後です。サンプルの文章およびタイトルは宮沢賢治さんの「銀河鉄道の夜」から。

今までのbloggerテンプレートよりもめちゃくちゃシンプル。あと軽量で表示の速いボディになっています。

さらに、スマホでみた時によりキレイに表示されるように設計。今はスマホからネットする人がめちゃくちゃ増えました。

トップページとかカテゴリページとかの記事一覧がリストになったリストバージョンのテンプレートはこちら。

記事を普通に一覧表示したかったので作ったやつです。写真をあんまり載せない人はこっちの方がらくでいいかも。

自分でもbloggerでブログをときどきしているんですが、そこで使う用に作ってみたら思ったよりいい感じだったのでこちらのリスト版テンプレートも同じくダウンロードOK!

QooQダウンロード!

「そこに3匹の元気なアプリがあるじゃろ?一匹を選んで真のトレーナー、そして図鑑完成の旅に出発するんじゃ。そうすればbloggerテンプレート「QooQ」もおまけにつけてやろう」

…別にオーキド博士の言う通りにしなくても、アプリを選ばなくても普通に下記からbloggerテンプレート「QooQ」はダウンロードできます。さっきの3つは最近ラムネグで作ったアプリ。QooQが気に入ったら上記アプリで遊ぶまではいかなくても「こんなおもろいヘンなアプリあるよ」ってSNSで一つぶやきお願いしますね!

QooQ更新情報はこちら!(→QooQリリースノートと初期設定方法

ワードプレス版「QooQ WP」リリース!(QooQワードプレス版も作りました【無料テーマ】

QooQの特徴

QooQはとにかくシンプルで軽量、表示が速くなるように設計しました。

なので前作のTokyoとかKyoto、そしてToypoodleと比べて削った機能もあります。ということでまず機能一覧はこんな感じ。

  1. ついてくるサイドバー:→削除
  2. クセの強いデザイン:→シンプルに
  3. シェアボタンのアイコン:→しょぼくなった
  4. 関連記事機能:OK!
  5. パンくずリスト:OK!
  6. SEO対策:OK!
  7. テーマデザイナー:OK!
  8. 2カラムデザイン:OK!
  9. レスポンシブデザイン:OK!
  10. 記事中アドセンスリンク:←追加!
  11. 折り畳みナビゲーション:←しょぼいけど追加!

ついてくるサイドバーをとっぱらったのが一番大きな変更点かなと思います。

ついてくるサイドバーないの?

ついてくるサイドバーはQooQにはついてません。

最近スマホでネット見る人が多く、7、8割はスマホになっているようです。ブログ運営している方ならアナリティクスで身にしみて体感されていることと思います。

前作のTokyoを作ったときはまだ6割くらいだったと思うのでたった数年でこんなに変わるもんなんだな~としみじみしちゃいますよね。

そしてスマホだとレスポンシブの都合、1カラムになるのでついてくるサイドバーがついてこない。

ついてくるサイドバーはjavascriptという処理が遅くなるもので出来ているので、ほとんど意味ないならいっそのことなくそう!というのが理由です。

これで表示が少し速くなっています。

がただの「t」になってる!

ツイッターのマークとかはウェブフォントっていうのを読み込んで使ってたんですが、その分表示がおそくなるんです。

でも「t」でもシェアしてくれる人は関係なくしてくれるので、ちょっとの見栄えより速さをとっちゃいました。

ウェブフォントに限らず、jqueryなど外部から読み込むものをできるだけ削っています。数あるbloggerテンプレートの中でも速度でみればとても速い仕上がりになっているはずです。

QooQのこだわりポイント①

bloger日本語テンプレート「QooQ」のこだわりポイントその1!

テーマデザイナーを充実させました。ナビゲーション、ヘッダー、メイン、サイドバー、フッターの5つについて、背景の色やボーダーの色、フォントの色を個別に設定出来ちゃいます。

やりようによってはかなりサイケデリックな配色にもできるハズ。一度チャレンジしてみてね!

あと、自由にデザインを楽しんでもらればいいんですが、ボーダーの色を消すとよりモダンなブログになります。まるで東京の大学への進学を期に一気にあか抜けてカッコよくなる男子みたいな…。例えはアレですが、とにかくお試しあれ!(テンプレート適用時は「ボーダーが設定できる」ことを伝えたいのであえてボーダーをつけてます。)

2019/3/31追記:

テーマデザイナーでのボーダー色設定はv1.07からなくしました。ボーダーがはじめからない方がやっぱりキレイ!

2019/4/2追記:

自分で使ってみて、やっぱり設定項目多いと面倒だったので、v1.11から設定項目を大幅に減らして適当にいじるだけでダイナミックに見た目が変わるようにしました。

結局細かくいじりたいこだわり派の方からすると、cssで編集していく事になるので、デザインの微調整はcssに担ってもらいました。

QooQのこだわりポイント②

bloger日本語テンプレート「QooQ」のこだわりポイントその2は、読みやすくなったcssです!断然いじりやすくなってます。

前作とかはcssさわらなくてもチャチャっと使えるブログ、というのにしてたんですが、なんかけっこうカスタマイズについての質問メッセージをもらうので「思ったよりcss毛嫌いしないもんなんだな。わたしなんて最初見るのもヤだったのに。」と思った次第です。

例えば「signle-content」っていうのが個別記事の本文を囲むIDなんですが、そこらへんのh2とかh3とかは見出しのデザインになってます。

ググればカッコ良かったり可愛かったりする見出しデザインがたくさん見つかるのでそこにコピペすればハイ、出来上がり!見出しのカスタマイズが完了しちゃいます。

あとはソースコード見て「あーでもない」「こーでもない」と楽しみながらいじってみてくださいね。いらない記述はできるだけ排除しているので、勘でいじってもらっても案外うまくいくかもしれません。

アドセンス広告について

bloggerってやっぱり魅力なのがアドセンス広告だったりしますよね。

アメブロでブログしたら広告入るのにお金入らない、かたやbloggerだと広告入れたらなんとお金がもらえる、いい響きです。

という事で最近質問メッセージでももらったアドセンス広告を本文中に入れる、っていうのを一応対応しました。

ソースコード内を「アドセンス」で検索すると2か所わかりやすく囲まれたトコロが出てくるのでそこにアドセンスのコードをそのままコピペ!これでOKです。

…ただ、本文中といいましたが厳密には記事タイトルと本文の間にアドセンス広告を入れているだけですし、もっというと思ったより記事の隙間にある広告って効果ない事が多かったりする(記事を読んでる側からすると本文読みたい気持ちが強いから「邪魔だ邪魔だー」となる)ので過度な期待は禁物!です。

でも試してみてくださいね。

設定方法:(→QooQリリースノートと初期設定方法

まとめ

久しぶりに作ったblogger日本語テンプレート「QooQ(クーク)」を紹介しました。

ついてくるサイドバーはなくなっちゃいましたが、前作たちに比べてよりシンプルで軽量になっているので表示が速いです。

また、カスタマイズしやすいテンプレートになっているので自分好みに育てるコトもやりやすくなっています。「そこに3匹の元気なアプリが…」ごほんっ、ガシガシ使ってみてくださいね!

バグがあったら下記「Message」より報告ください。

更新情報はこちら!(→QooQリリースノートと初期設定方法

【どどん!】ラムネグではただいまアプリを絶賛提供中!さあ、選べる3つの無料アプリ!あなたはどれにする?

【わたガチャ】

あなただけのガチャを作ろう♪

すたーと!

【みんガチャ】

みんなで一つのガチャを作りあげよう♪

すたーと!

【litty-リティ】

秘密のメッセージをフォロワーさんに送っちゃおう!

すたーと!