機能テストヘッダーのロゴ及び画像について

Hidekichi

2023年5月28日

2023年6月9日

ヘッダー部分の説明

元々はHeader Widgetというのが入っていたんですが、画像とか好きにイジれる方が良いだろうということでhtml widgetを忍ばせました。

html widgetは、タイトルとcontentsという2つを表示するしか無いんですが、入力されたコンテンツに何が含まれているかが判別できるということがわかったのでそれらを利用して以下のようなタイプができると言うのを紹介します。
アイデア次第では、imageにimageを重ねるというのもできるでしょうし色々できそうですが、デフォルトではトップページだけスペースが広くて、他はスペースが小さくなるのでcssで変更するか、それに合うように画像の方を何とかするかになるかと思います。

ロゴの種類

入力なし

何もwidgetに入力しなかった場合は、本来のブログタイトルとディスクリプションが表示されます。

SVG

SVGは何で作るかでまた変わることもあるかと思いますが、オープンソースのInkscapeで作った場合で説明すると、

ロゴをデザインする
plane svgでファイルを出力する
SVGOMGなどのサイトで作ったsvgファイルを開く
Remove xmlns以外をONにして不要な情報を削除する
SVGOMGであれば上部にMARKUPというタブがあるのでそこのsvgをコピーする
html widgetを開いてcontentにペースト
保存

このような流れてSVGをヘッダに貼ることができます。サイズや位置調整があるかと思うので別途cssでsvgを囲む.logo-wraper.svgに対してサイズとか位置をスタイルすると言う感じになります。

Imageファイル

imageファイルは、bloggerで扱える画像ファイルということで、.jpg、.gif、.png、.webp等々他にもあるかもしれませんがこれらのファイルを指定します。

例えば、https://abcd.com/と言うサイトがあるとして、そこの画像ファイルxyz.jpgを使う場合、サンプルの仮のアドレスですが、https://abcd.com/img/xyz.jpgというのをhtml widgetのcontnetに入力してwidgetを更新・保存という感じです。

html直接入力

元々がhtml widgetなのでhtmlは入力できるようになっています。

デフォルトでは、.page-titleがブログタイトルにcssで入っていて、.page-title .sub-titleと言う構造にすると縦並びにタイトルとディスクリプションが並ぶようになっています。これらを無視して好きなhtmlで好きな内容を書いてスタイルすることができます。

<h1 class='page-title'>ブログの名称</h1>
<span class='sub-title'>何かしらのディスクリプション</span>

このような感じです。必ずh1はどこかに忍ばせて下さい。

SVG + Imageファイル

合せ技ですが、SVGは前述したようにロゴとして表示しておき、headerはそのすぐ直下に.viewerと言うブロックで囲ってあります。
このviewerに対して画像を入れることができます。直接imgタグで画像を入れる場合はテンプレートをイジる必要がありますが、cssのbackground-imageなどを使ってロゴとは別枠で画像を入れることができます。
画像のGoogleロゴは外部から読み込んだものです。

.index header .viewer {
  background-image: url(画像アドレス);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

こういう感じになるかと思います。cssの先頭の.indexはbodyタグに付きます。現在のページのタイプによってここが、.index.searchとか.archiveになったりします。