カスタマイズしやすいおすすめのBloggerテンプレート紹介（日本語対応）

• PageSpeed Insights（Google）

モバイル

パソコン

【日本語対応】【SEO最適化】【表示速度最適化】【レスポンシブデザイン】【 2カラムデザイン】【テーマデザイナー】【 降りたたみメニュー】【アドセンス広告貼り付け】

（詳しくはQooQオリジナルダウンロードサイトをご覧ください）

QooQオリジナルサイトはこちら

当たり前の事ですがオリジナルのQooQの良い仕様をそのままにしてあります

Blogger公式のデフォルトテンプレートを使用する代わりに、すでにカスタマイズされたテンプレートを探しました。友人から海外のテンプレートは日本語でないため使いにくいという意見を聞き、日本語のテンプレートを探すことにしました。その結果、「日本語テンプレートQooQ」を見つけ、それを使用することにしました。

QooQのテンプレートのカスタマイズ方法を知って、テンプレートをカスタマイズすることが楽しくなり、自分自身でテンプレートを作成し、それを他の人に配布することを考えました。そして、テーマを一から自作しようと思ったのですが、QooQが再配布を許可していることを知り、自分がカスタマイズしたQooQのテンプレートを配布することに決めました。

デフォルトでは黄色のマーカー風下線が文字の後ろ半分ぐらいに線が引かれて強調されるようになっています。

これは bloggerの記事投稿画面に元々ついている『下線ボタン』機能を拡張した機能になります。

使い方は、文字入力して文章を書いた後に、下線を引きたい箇所を選択して頂いてから『下線ボタン』を押す、とまあそれだけでマーカー風の色つき下線を引くことができます。

注意点は「作成ビュー」ではただの黒い下線でしか表示されないのでそこはご了承ください。ちゃんとマーカーになっているかどうかはプレビュー画面を見るか更新してページを確認して下さい。

作った本人ですがとても良いと思っているのは、なんとテーマデザイナーで自由に色を変更できる点と、使いたくない人は元々の下線のスタイルに戻すこともワンタッチでできる点です、両方同時に文字に表示させることもできます、ですので人によって好きな色やスタイルにできる所があるので楽しいし楽かなと思っています。

上記の画像を拡大して見てもらえるとわかりやすいかもですが、937行目の赤線の部分

background-image: url(' ～～～ ');の中の黄色の下線を引いてある部分のURLを変更してください。

background-image: url(' ～～～ ');の中のURLを消してもらい

background-image: url(' '); ⇦この状態にして保存したらOK

上記の画像の通りでHTMLの最後のあたりの2276行目にある表記を変更すれば設定を変更できます。

注意点：「; 」は残して変更してくださいね

例）⇩

window.tocPosition = 2; // 1: 最初の見出しのすぐ上, 2: 記事の最上部

window.tocDisplay = true; // true: 目次を表示, false: 目次を非表示

window.numbering = false; // true: 連番を表示, false: 連番を非表示

このように変更して保存ボタンを押せば大丈夫です。

blogの一番上のナビゲーションバーに「カテゴリー」が表示されるようにしました。

使い方はブログの投稿記事を書くビューの右に「投稿の設定」の下のラベルの設定の所でラベルを設定すると自動で表示されるというとっても便利な機能です。

初心者の人で良くわからない人やめんどくさがりの人や楽したい人にはとっても嬉しい機能だと思います。

この機能は bloggerに元々備わっているガジェット機能のラベルを改造して作ってあります。

テーマデザイナーで配色や影の設定等個性豊かに表現できると思いますので触ってみてください。

これはとっても限定的なのですが、いちをCSSに追加の記述をしてあるのでここに書かせていただきます、カーソルが当たると少し大きくなって前に出てくるようなカード型のコンテナBOX等の設定をしてあります。なんのこっちゃと思うかもしれませんがわかる人だけ限定の説明です；class名は「.card」になってます。

実は僕が他の記事で『ブログカードジェネレーター』という、デザインを好みに設定して作成が簡単にできるという機能で作成したリンク付きblogカードを、このテンプレートで使用すると、カーソルを当てると浮くという仕様にしてあります。