HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
Bloggerでお問い合わせフォームのページを作る方法
旧ブログはこちらから
日記ブログ

Blogger「QooQ」*ヘッダーのカスタマイズ

2020/02/28

QooQ カスタマイズ


Bloggerの日本語テンプレート「QooQ」のヘッダー(ブログタイトル部分)をカスタマイズしてみました。

標準のままでもいいですが、自分好みにカスタマイズすると、よりブログに愛着がわきますよね。

ヘッダーの下に、おすすめ記事などのアイキャッチ画像付きリンクを表示する方法もあわせてご紹介します。

おすすめ記事だけでなく、カテゴリー別のリンクにしても見やすくていいと思いますよ。

このカスタマイズでは、テーマのHTML編集をします。

ぜひ、やってみてくださいね。

Blogger日本語テンプレート「QooQ」のヘッダー部分


これが、標準のヘッダー部分です。(ピンク色の所)↓

標準のヘッダー
*標準のヘッダー部分です

「QooQ」のブログタイトルは、標準では左端に表示されていますね。

これを、こんな風にカスタマイズしてみました。↓

「QooQ」のブログタイトルを中央寄せ
ブログタイトルが中央にきました。

わたしがおこなったカスタマイズは、次の通りです。

* ブログタイトルを中央寄せ
*ブログタイトルの文字を大きくする
*タイトル下の説明文を、太字から標準に戻す

それでは、実際にやってみます。

「QooQ」ヘッダーカスタマイズ


まず、テーマのHTML編集画面を開きます。

※HTML編集のやり方が分からない方は、こちらへ→テーマのHTML編集をする

画面をスクロールして、「ヘッダー」と書いてある次のコードを見つけてください。

ヘッダーのHTML編集
*コードの追加・書き変え・削除をします

赤枠で囲んだ部分のコードを変更します。

上から順に見ていきます。

中央寄せのコードを付け加える


1つ目の赤枠に、text-align: center;(中央寄せ)のコードを書き加えます。(コピペしてください)

これで、ブログタイトルが左端→中央に移動します。

タイトルの文字を大きくする


2つ目の赤枠の、 font-size: 110% の数字を大きくします。

わたしは130%にしてみましたが、お好みで変えてください。

プレビュー画面で確認しながら調整してみてくださいね。

太字のコードを消す(説明文)


ブログタイトルと説明文は、標準ではどちらも太字に設定されています。

3つ目の赤枠の、font-weight: bold; のコードを消すと、説明文の文字が太字から標準に戻ります。(※タイトルと説明文のコードを間違えないように注意)

お好みで変えてみてください。


これで、Blogger日本語テンプレート「QooQ」のヘッダーのカスタマイズ(中央寄せ・文字サイズ変更)は終了です。

編集の最後には「テーマの保存」をお忘れなく(*^-^*)

QooQ*ヘッダー下にアイキャッチ画像付きリンクを表示する


このブログのヘッダー下には、4つのアイキャッチ画像を表示しています。


ヘッダー下のアイキャッチ画像
パソコンでは横並びに1列

アイキャッチ画像付きリンク
スマホでは2列表示


そのうちの3つはおすすめ記事のリンクで、1つは旧ブログトップページへのリンクになっています。

こちらを参考にさせていただきました。ありがとうございます♪


参考元は、はてなブログのカスタマイズ記事ですが、Bloggerにも応用できました。

このカスタマイズで表示できるのは画像だけなので、canva などで文字入りのアイキャッチ画像を作るといいですよ。
→初心者にも簡単♪Canvaの使い方*ブログのアイキャッチ画像を作る


それでは、やってみます。

アイキャッチ画像を用意する


わたしは、canva を使って400×277pxのサイズでアイキャッチ画像を作っています。


サイズはお好みで変えてもらっていいのですが、4枚とも同じサイズで揃えた方がきれいだと思います。

どこへのリンクか分かるように、アイキャッチ画像には必ず文字を入れてくださいね。

CSSを追加する


次のコードをコピペして、「CSSの追加」をします。
*はじめての方はこちらをどうぞ♪→CSSを追加する


 /*=== article window ===*/
.article-area{
    background-color:white;/*背景色*/
}
.article-container{
    width: 90%;/*画像表示の幅*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0px auto;
    padding:0px;
    text-align:center;}
.article-box{
    box-sizing:border-box;
    border:2px solid whitesmoke;/*画像の枠色*/
    width:25%;
    padding:0px;
    margin:30px 15px;/*画像周りの空白*/
    overflow:hidden;}
.article-img img{
    width:100%;
    display:block;
    object-fit:cover;
    transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
    transform: scale(1.1);/*1.1倍に表示*/
    transition-duration: 0.5s;/*ゆっくり拡大*/}
/*=== smartphone 2列表示 ===*/
@media(max-width: 767px){
.article-container {
    width:100%;
    flex-wrap: wrap;/*折り返し表示(2列)*/
    justify-content:space-between;
    padding:8px;}
.article-box {
    width:45%;
    padding:0px;
    margin:8px;}
.article-img img{
    width:100%;
    padding:0;
    object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/

「CSSの追加」ができたら、次はテーマのHTML編集です。

テーマのHTML編集の前には、バックアップも忘れずに♪

テーマのHTMLを編集する


テーマのHTML編集画面を開きます。

*はじめての方はこちらをどうぞ♪→テーマのHTML編集をする

サーチ窓を開いて、<div expr:class='  の場所を探します。

BloggerのHTML編集画面
HTML編集画面

次のコードの赤字部分を変更して、 <div expr:class='  の直前にコピペします。

  <div class="article-area">

<div class="article-container">

<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>

</div>

</div>

画像のURLは、Bloggerの投稿画面(HTML編集モード)で画像をアップロードすると分かります。("https://~"の赤字部分です)


テーマのHTML編集画面にコードをコピペしたら、プレビュー画面で確認して、テーマを保存してくださいね。


ちなみにこのブログでは、ヘッダーとナビゲーションバーの位置(上下)を入れ替えるカスタマイズもおこなっています。

詳しくは、こちらをどうぞ♪

このエントリーをはてなブックマークに追加

このブログを検索

このブログについて


今までにわたしがしてきた、Bloggerカスタマイズ等の覚え書きです。

これから始める方の参考になればうれしいです。

Blogger初心者ですが、はてなブログ歴は3年以上です。

このブログは、Blogger日本語テンプレート「QooQ」(リスト版)を使用しています。

*Blogger日本語テンプレート「Tokyo」カスタマイズブログ
 moca*Blogger「Tokyo」

*日記ブログ(QooQ使用)
 シンプルでステキな毎日を

書いている人

書いている人
*小3と年中の男の子たちとバタバタしながら暮らしている専業主婦。

*家事と子育ての合間のお楽しみにブログを書いています。

*日記ブログ
シンプルでステキな毎日を

↓Twitterでブログ更新をお知らせ♪/

ツイッター

QooQ