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

製作 プログラム

2019/03/16(土)

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

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

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

QOoQサンプルページ

まずはサンプルページです。①がテンプレート適用そのままのデザインで、②はテーマデザイナーでいじった後です。

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

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

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

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

自分で使う用に作ってみたら思ったよりいい感じだったので、こちらのリスト版も同じくダウンロードOK!

QooQダウンロード!

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

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

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」でもシェアしてくれる人は関係なくしてくれるので、ちょっとの見栄えより速さをとっちゃました。

QooQのこだわりポイント①

QooQのこだわりポイントその1!

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

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

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

QooQのこだわりポイント②

QooQのこだわりポイントその2は、読みやすくなったcssです!断然いじりやすくなってます。

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

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

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

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

アドセンス広告について

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

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

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

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

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

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

まとめ

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

ついてくるサイドバーはなくなっちゃいましたが、前作たちに比べてよりシンプルで軽量になっていたり、カスタマイズしやすいテンプレートになっています。「そこに3匹の元気なアプリが…」ごほんっ、ガシガシ使ってみてくださいね!

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

【わたガチャ】

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

すたーと!

【みんガチャ】

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

すたーと!

【litty-リティ】

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

すたーと!