-->

【QooQカスタマイズ】ヘッダーを変更する(大きな写真をいれたい)

2020/06/29

Blogger QooQ

t f B! P L



テンプレートを入れるだけで高機能なブログが完成するQooQですが、やはり自分風のブログに仕上げたいところ。
ということで、まずはヘッダー(タイトル)のカスタマイズに挑戦しました。目標は
  • タイトルに大きめの写真を入れる
  • タイトルの字体を英文字風に変更
と、目線は低い・・・

初期状態は?

QooQを入れた直後はどうなっているのか?

こんな感じです。シンプル・高機能なQooQらしいヘッダーですね。これはこれで良いのですが、ちょっと写真とかドーンと入れたいとなると・・・


写真を追加


これはBloggerの機能でヘッダーに写真を指定するだけ。

「レイアウト」から「ヘッダー」を探し「編集」をクリック。

タイトル用に作った写真を選択、アップロード。簡単カンタン!
さあどうなった?と思ったら・・・

んんん?灰色になっただけ?城が見えない・・・
ヘッダーの高さを変えなきゃいけないんですね。

ヘッダーの表示をHTMLでカスタマイズ

結局、ある程度はHTMLを編集しなければいけないのか。
と言ってもHTMLの知識もないので、それっぽいテンプレートをいくつか見つけ、ヘッダーの記述をコピー・ペーストすることを繰り返す。
で、至った結論がこれ。
※ 文法上の検証は全くしていませんので、あくまでカスタマイズのご参考として。


【QooQカスタマイズ】ヘッダーを変更するHTML
669行目(とは限らない)を次の通り変更。
【QooQカスタマイズ】ヘッダーを変更するHTMLも変更後

その結果は、この通り。

大きくなりました!城が全容を現したのである。
ちょっと大きすぎたかな・・・肝心の記事が見えなくなってしまった。



このブログを検索

最新記事はこちら

【Glideで簡単アプリ作成】ノーコードでかんたんカウンターアプリを作る

 ノーコードアプリの作成は簡単、というけれど実際に作るとアプリ画面の設定やテーブルの定義、イベントの設定など案外手間がかかったりするものです。ここでは、ノーコードツールのGlideを使って、簡単なアプリを簡単に作ってみます。 一日にやってみた回数をカウントするアプリを作る ここで...

ラベル

自己紹介

数学苦手な文系が、そろそろネットで何かやってみるか、という程度。のんびり、てきとーに。