【QooQの初期設定】導入後はまずはこれをやろう!

2021/10/02

PC全般

t f B! P L

GoogleのブログツールBloggerは使いやすいのですが、

デフォルトテンプレートは使い勝手がイマイチです。

そこでこのブログでは「QooQ」という無料テーマを使っています。

テーマ反映後にまずやりたい初期設定について解説します。


カスタマイズの前にページ崩れの確認

QooQテーマ反映後、ページを確認し、崩れている部分がないか確認をします。

デフォルトのテーマからの変更だと、文字や見出しがかぶっていたり、画像の位置がおかしくなっているケースが見受けられます。

まずはそれらの修正から始めましょう。

記事が多いと根気のいる作業になってしまいますね。


テーマカラーの変更方法

QooQをダウンロードした状態では、とてもポップな配色になっています。

このままだとQooQ丸出しになってしまうので、これを変えていきます。

まずは左のナビゲーションバーの「テーマ」をクリックし、カスタマイズの横にある「」をクリック。


そして、「HTMLを編集」をクリックします。


比較的上の方、66行目から色の設定ができる部分があるのでそこを変更していきます。

  • <Group description="文字の色">
  •   <Variable name="font.color" description="普通の文字色" type="color"
  •    default="#454545" value="#454545"/>
  •   <Variable name="font.link" description="リンクの色" type="color"
  •    default="#779cff" value="#779cff"/>
  •   <Variable name="font.light" description="うす文字の色" type="color"
  •    default="#999" value="#999999"/>
  • </Group>
  • <Group description="ブランドカラー">
  •   <Variable name="brand.color" description="ブランドカラー" type="color"
  •    default="#a5acc4" value="#334756"/>
  •   <Variable name="brand.font" description="ブランドカラー部分の文字色" type="color"
  •    default="#fff" value="#ffffff"/>
  •   <Variable name="brand.subcolor" description="ブランドサブカラー" type="color"
  •    default="#c4bda5" value="#c4bda5"/>
  •   <Variable name="brand.subfont" description="ブランドサブカラー部分の文字色" type="color"
  •    default="#ffffff" value="#ffffff"/>
  • </Group>
  • <Group description="背景色など">
  •   <Variable name="other.topback" description="最背景色" type="color"
  •    default="#fff" value="#ffffff"/>
  •   <Variable name="other.back" description="コンテンツの背景色" type="color"
  •    default="#fff" value="#ffffff"/>
  •   <Variable name="other.border" description="関連記事などのうすい枠線" type="color"
  •    default="#eee" value="#eeeeee"/>
  • </Group>
  • */

"ブランドカラー"はヘッダーや見出しに使われる部分です。

value="#……" この部分を変更すると反映されます。

defaultという項目もあります。こちらは反映はされませんがvalueそろえておくとよいでしょう。


色は#から始まる6桁の英数字(ウェブカラー)で指定します。

colorhunt

↑このようなサイトを参考に、お好きな色を指定して書き換えてください。

#a5acc4→#334756に変更してみました。

そして、編集画面右上にある「保存」をクリックして変更を保存します。


これで色の変更がサイトに反映されるはずです。

見てみましょう。




色が変わりましたね。

ブランドサブカラーという項目もありますが、こちらはナビゲーションバーやアイコンに使われる色です。

そのほか、文字の色も変更可能なので、お好みの見た目に変更していきましょう。


アイキャッチを丸から四角に変更する


ページ下部にある関連記事に表示されるアイキャッチ画像は、デフォルトの状態だと丸くトリミングされています。

それを四角にする方法です。

HTML編集画面のコードが書かれている部分の適当な場所を一度クリックし、ctrlキーを押しながらFキーを押すと左上に検索ウインドゥが表示されるので

.mrp-post-img{

と入力し、エンターキーを押してください。

以下のような箇所に飛ぶと思います。

  • .mrp-post-img{
  •     display: block;
  •     border-radius: 50%;
  •     width: 72px;
  •     height: 72px;
  •     object-fit: cover;
  •     margin: 0 auto 0 auto;
  • }

border-radius: 50%;という部分を0%に変更すると丸が角型に変更されます。


角型になりました。

今のデザインの流行りだと角型の方が無難でしょうね。

全体のイメージ、色とのかねあいもあるので、バランスを見ながら変更してみてください。


関連記事の表示数の変更

先ほど形を変えた関連記事

その表示数を変更することもできます。

先ほどと同じように、HTML編集画面のコードが書かれている部分の適当な場所を一度クリックし、ctrlキーを押しながらFキーを押して検索ウインドウを表示

var mrpMax=

と入力しエンターキーを押します。


  • <script type='text/javascript'>
  •             var mrpPosturl=&quot;<data:post.canonicalUrl/>&quot;;
  •             var mrpMax=6;
  •             mrp_output();
  •         </script>

QooQの初期設定では6となっています。

PCだと1列に4つ、スマホだと1列に2つが表示されます。

ちなみに、この数字ですが、カテゴリ内でランダムに取得された記事の総数ということを意味するので、その中に今メインで表示されている記事が含まれていた場合は-1となります。

6とした場合、5記事か6記事が表示されるということです。

カテゴリ内の記事数が少ないと-1の数が表示される可能性が高い、ということです。

これをどうしてもキッチリ、毎回同じ数を表示させたいという場合はこちらのサイト様を参考に変更を。

【QooQ】関連記事の表示件数を変更する方法【カスタマイズ】

いろいろいじるのが面倒な方は、8くらいにしておけばいいでしょう。


まとめ:QooQはシンプルで扱いやすいテンプレート

今回は

テーマカラーの変更方法

アイキャッチを角型に

関連記事の数の変更

といった項目に関してカスタマイズをしてみました。


次回はさらに便利にする機能

トップへ戻るボタンの設置

サイトマップの設置

目次の自動生成

を追加してきます。

ではまた。


今日はワクチン2回目の摂取翌日で高熱にうなされながらの記事投稿となりました。

いやーきつかったっす。

QooQ

TOP