プログラム最終更新日:2019/05/17ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。みてみる1年?2年くらい?とにかくかなり久しぶりですが、最近WEBサイト制作の仕事もひと段落ついたので新しいbloggerテンプレートを公開します!その名も「QooQ(クーク)」!これまでのまとめとして作りました。個人的にはスマートでカッコいいデザインに仕上がったと自画自賛したいところ!あとは表示の速さもできるかぎりこだわっています。それでは紹介していきますね。17:00追記アドセンス広告を入れた時、タイミングによって広告がはみ出してしまう&ページ幅が大きくなりすぎる不具合を修正しました。17:00に公開)以前を使っているなら再ダウンロードしてくださいね。QooQサンプルページQooQダウンロード!QooQの特徴QooQのこだわりポイント1QooQのこだわりポイント2アドセンス広告についてまとめQooQサンプルページまずはQooQのサンプルページです。1がテンプレート適用そのままのデザインで、2はテーマデザイナーでいじった後です。サンプルの文章およびタイトルは宮沢賢治さんの「銀河鉄道の夜」から。サンプル2を見る!今までのbloggerテンプレートよりもめちゃくちゃシンプル。あと軽量で表示の速いボディになっています。スマホでみた時によりキレイに表示されるように設計。今はスマホからネットする人がめちゃくちゃ増えました。トップページとかカテゴリページとかの記事一覧がリストになったリストバージョンのテンプレートはこちら。サンプル3を見る!記事を普通に一覧表示したかったので作ったやつです。写真をあんまり載せない人はこっちの方がらくでいいかも。自分でもbloggerでブログをときどきしているんですが、そこで使う用に作ってみたら思ったよりいい感じだったのでこちらのリスト版テンプレートも同じくダウンロードOK!QooQダウンロード!「そこに3匹の元気なアプリがあるじゃろ?一匹を選んで真のトレーナー、そして図鑑完成の旅に出発するんじゃ。すればbloggerテンプレート「QooQ」もおまけにつけてやろう」わたガチャみんガチャlitty...別にオーキド博士の言う通りにしなくても、アプリを選ばなくても普通に下記からbloggerテンプレート「QooQ」はダウンロードできます。さっきの3つは最近ラムネグで作ったアプリ。WP」リリース!(QooQワードプレス版も作りました【無料テーマ】)QooQの特徴QooQはとにかくシンプルで軽量、表示が速くなるように設計しました。前作のTokyoとかKyoto、そしてToypoodleと比べて削った機能もあります。いうことでまず機能一覧はこんな感じ。ついてくるサイドバー:→削除クセの強いデザイン:→シンプルにシェアボタンのアイコン:→しょぼくなった関連記事機能:OK!パンくずリスト:OK!SEO対策:OK!テーマデザイナー:OK!2カラムデザイン:OK!レスポンシブデザイン:OK!記事中アドセンスリンク:←追加!折り畳みナビゲーション:←しょぼいけど追加!ついてくるサイドバーをとっぱらったのが一番大きな変更点かなと思います。ついてくるサイドバーないの?ついてくるサイドバーはQooQにはついてません。最近スマホでネット見る人が多く、7、8割はスマホになっているようです。ブログ運営している方ならアナリティクスで身にしみて体感されていることと思います。前作のTokyoを作ったときはまだ6割くらいだったと思うのでたった数年でこんなに変わるもんなんだな~としみじみしちゃいますよね。スマホだとレスポンシブの都合、1カラムになるのでついてくるサイドバーがついてこない。ついてくるサイドバーはjavascriptという処理が遅くなるもので出来ているので、ほとんど意味ないならいっそのことなくそう!というのが理由です。これで表示が少し速くなっています。「t」になってる!ツイッターのマークとかはウェブフォントっていうのを読み込んで使ってたんですが、その分表示がおそくなるんです。「t」でもシェアしてくれる人は関係なくしてくれるので、ちょっとの見栄えより速さをとっちゃいました。ウェブフォントに限らず、jqueryなど外部から読み込むものをできるだけ削っています。数あるbloggerテンプレートの中でも速度でみればとても速い仕上がりになっているはずです。QooQのこだわりポイント1bloger日本語テンプレート「QooQ」のこだわりポイントその1!テーマデザイナーを充実させました。ナビゲーション、ヘッダー、メイン、サイドバー、フッターの5つについて、背景の色やボーダーの色、フォントの色を個別に設定出来ちゃいます。やりようによってはかなりサイケデリックな配色にもできるハズ。一度チャレンジしてみてね!あと、自由にデザインを楽しんでもらればいいんですが、ボーダーの色を消すとよりモダンなブログになります。東京の大学への進学を期に一気にあか抜けてカッコよくなる男子みたいな...。例えはアレですが、とにかくお試しあれ!(テンプレート適用時は「ボーダーが設定できる」ことを伝えたいのであえてボーダーをつけてます。)2019/3/31追記:テーマデザイナーでのボーダー色設定はv1.07からなくしました。ボーダーがはじめからない方がやっぱりキレイ!2019/4/2追記:自分で使ってみて、やっぱり設定項目多いと面倒だったので、v1.11から設定項目を大幅に減らして適当にいじるだけでダイナミックに見た目が変わるようにしました。結局細かくいじりたいこだわり派の方からすると、cssで編集していく事になるので、デザインの微調整はcssに担ってもらいました。QooQのこだわりポイント2bloger日本語テンプレート「QooQ」のこだわりポイントその2は、読みやすくなったcssです!断然いじりやすくなってます。前作とかはcssさわらなくてもチャチャっと使えるブログ、というのにしてたんですが、なんかけっこうカスタマイズについての質問メッセージをもらうので「思ったよりcss毛嫌いしないもんなんだな。わたしなんて最初見るのもヤだったのに。「signle-content」っていうのが個別記事の本文を囲むIDなんですが、そこらへんのh2とかh3とかは見出しのデザインになってます。ググればカッコ良かったり可愛かったりする見出しデザインがたくさん見つかるのでそこにコピペすればハイ、出来上がり!見出しのカスタマイズが完了しちゃいます。あとはソースコード見て「あーでもない」「こーでもない」と楽しみながらいじってみてくださいね。いらない記述はできるだけ排除しているので、勘でいじってもらっても案外うまくいくかもしれません。アドセンス広告についてbloggerってやっぱり魅力なのがアドセンス広告だったりしますよね。アメブロでブログしたら広告入るのにお金入らない、かたやbloggerだと広告入れたらなんとお金がもらえる、いい響きです。いう事で最近質問メッセージでももらったアドセンス広告を本文中に入れる、っていうのを一応対応しました。ソースコード内を「アドセンス」で検索すると2か所わかりやすく囲まれたトコロが出てくるのでそこにアドセンスのコードをそのままコピペ!これでOKです。...ただ、本文中といいましたが厳密には記事タイトルと本文の間にアドセンス広告を入れているだけですし、もっというと思ったより記事の隙間にある広告って効果ない事が多かったりする(記事を読んでる側からすると本文読みたい気持ちが強いから「邪魔だ邪魔だー」となる)ので過度な期待は禁物!です。試してみてくださいね。設定方法:(→QooQリリースノートと初期設定方法)まとめ久しぶりに作ったblogger日本語テンプレート「QooQ(クーク)」を紹介しました。ついてくるサイドバーはなくなっちゃいましたが、前作たちに比べてよりシンプルで軽量になっているので表示が速いです。カスタマイズしやすいテンプレートになっているので自分好みに育てるコトもやりやすくなっています。「そこに3匹の元気なアプリが...」ごほんっ、ガシガシ使ってみてくださいね!バグがあったら下記「Message」より報告ください。秘密のメッセージをフォロワーさんに送っちゃおう!すたーと!QooQリリースノートと初期設定方法!【ゼッタイ読んでね】laravel日本時間に時刻合わせ。反映されない時の対処法にてる記事はコレ!2カラム、固定幅+可変幅だとアドセンス広告がおかしくなる【解決済】sqlでできる!二つの絞りこみ。書き込むコメントをキャンセルメッセージは承認後に反映されます。承認には数日かかる場合があります。コメント名前>Simple10さんお使いいただきありがとうございます。言っていただけるとなによりです。フォントについてはお好きなものに変えてもらえればと思います。海外からのアクセスが減るのですか。Simplify2は海外で作られた有名なテンプレートのようなので、「Simplify2」というキーワードで外国の方からもアクセスを稼げているのかもしれません。ramunegramunegさんsimple10と申します。Blogger歴14年ですが、詳しくありません。今まで色々なテーマを使わせて頂き、満足できずに数多くのテーマをトライしてまいりました...日本版は少ないです...が、ようやく、是非、使わせて頂きたいと思うテーマQooQに出会いました。ありがとうございます。QooQの前に使わせて頂いたテーマはSimplify2で、SEO効果も含めて、私は、なかなかの優れものだと思っています。パソコン画面でブログのトップで抜粋される筈の記事が時々抜粋されずに、ほぼ全文掲載される問題があります。なんとか修正しようと試みたのですが、私には出来ず諦めて、そのまま使っておりました...それでも、スマホでは記事のタイトルだけが表示されますので、問題ありません。レイアウトが奇麗に整っているQooQに出会い、トライさせて頂きましたが、多少のカスタマイズで、PC上でもスマホ上でも過不足がありません。ZELOを購入してトライしたこともありました...無駄金になってしまいましたが。有償ではありませんので、カスタマイズの質問は控えさせて頂きますが、ご参考になるかもと思い、下記の2点を認めさせて頂きます。1)游ゴシックですが、意外と奇麗に見えない。2)海外からのアクセスが減る...これはSimplify2と比べてです。今まで試したテーマも、Simplify2に比べますと減りましたね。Simple10ありがとうございます!そのようにカスタムしておきます。紫苑>紫苑さんへpタグには段落間のスペースつけてないです。理由は...忘れました。当時なんか悩んだはずです。0;}をcssに追加していただければ。ramuneg返信ありがとうございます!すみません、なぜか文字が消えてしまっていたようです。紫苑>紫苑さんへはじめまして。ramunegはじめまして。テンプレート使わせていただいております。一点質問したいのですが、タグを本文中で使った場合、段落同士の間のスペースが全くないという状態になっています。紫苑>sayakaさん気に入って下さりありがとうございます。ramunegシンプルなデザインで大変気に入りました。「tokyo」から「QooQ」に変更しました。amazonアフィリエイトリンクを作成しますと、uBlockによりブロックされ表示されなくなります。修正方法がありましたら、教えていただきたいです。sayaka>RIKIさんガジェットをすべて消してみてください。ramuneg初めまして。QOOQをダウンロード、Bloggerのテーマにアップロードするのですが、いつも、このメッセージが出て来て、アップロードできません。テーマを保存できませんでした。テーマの形式が適切でないため、解析できません。要素が適切に閉じられているかどうか確認してください。‘<'どうすればよろしいでしょうか?当方、全くの初心者です。RIKI>PJさん検討いただきありがとうございます。カスタマイズについてはこちらではお答えできません。対話形式をbloggerで使うには記事を書く際にHTMLモードに切り替える必要がありますので、どうしてもCSSやHTMLをほんの少し勉強する必要が出てきます。ramuneg>マチルダさんお使いいただきありがとうございます。パンくずリストについては「ホーム→ラベル」といった階層のみを表示しています。それ以上の設定は現状できません。ramuneg>うらがさんカスタマイズについてはみなさんでしてもらう事にしていますのでこちらからはお答えしていません。編集ボタンについては一口にスマホ、タブレットといってもお使いのブラウザごとの差異があると思いますが、一度スマホやタブレットのPC表示をお試しいただければと思います。ramuneg>Keiさん使っていただきありがとうございます。記憶があいまいなんですがこれはQooQだけじゃなくってbloggerの仕様だったと思います。総記事数によって起こるか変わるハズなので一度ほかのテンプレートで試していただけると幸いです。ramunegはじめまして、これからBloggerでブログを始めようかと考えています。そこでテンプレートを探していてQooQが凄く気に入って使ってみたいのですが、このテンプレートで本文に対話形式の吹き出しを挿入する事は出来ないでしょうか?bloggerでの吹き出しに関しては情報がとても少なく、CSSを理解できてない私はお手上げ状態です。宜しければお教えください。PJ使いやすくてホントに気に入りました。ありがとうございます。初歩的な質問で大変申し訳無いのですが、パンくずリストの設定がよく分かりません。テンプレに入っている、とのことですが、階層化の設定はどうやってやるのでしょうか?挿入箇所などありましたら、教えていただきたいです。うらがお世話になっております。QooQを使用させていただいている者です。ラベル別に表示した場合に、「前の投稿」をクリックして表示されたページに投稿が表示されない現象が生じているのですが、解決方法がありましたらご教示いただけますと助かります。QooQをダウンロードし直し設定しましたが、やはり表示されませんでした。お忙しいなかお手数をおかけいたしますが、お手すきの際にご返信いただけますと幸いです。Kei>nyさんqooqで特に画像の制限を設けてはいません。bloggerの仕様ですのでこちらではわかりません。ny>utatenaさん無事解決されたようでなによりです。モバイルデザインだとつぶれてしまうんですね。報告いただきありがとうございます。ramunegutatenaです。お返事&サンプルページのご案内ありがとうございました。スマホで見た所、サンプルページはきちんと表示されていました。そのため、自分の設定のどこかに原因があることが分かり、少しいじってみたら正常に表示されました。具体的には、bloggerのテーマ→モバイルの歯車をクリックし、「いいえ。デバイスでもパソコン用のテーマを表示する。」という方を選択することで正常になりました。