Bloggerの「ページ ヘッダー」ガジェット の考え方

Soho の例

<header class='centered-top-container' role='banner'>
<div class='centered-top'>
<div class='hamburger-menu-container'>
<svg class='svg-icon-24 touch-icon hamburger-menu'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</div>
<div class='search'>
<button aria-label='検索' class='search-expand touch-icon-button'>
<div class='search-expand-text'>検索</div>
<svg class='svg-icon-24 touch-icon search-expand-icon'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_search_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
<div class='section' id='search_top' name='Search (Top)'><div class='widget BlogSearch' data-version='2' id='BlogSearch1'>
<h3 class='title'>
このブログを検索
</h3>
<div class='widget-content' role='search'>
<form action='https://s-o-h-o.blogspot.com/search' target='_top'>
<div class='search-input'>
<input aria-label='このブログを検索' autocomplete='off' name='q' placeholder='このブログを検索' value=''/>
</div>
<label>
<input type='submit'/>
<svg class='svg-icon-24 touch-icon search-icon'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_search_black_24dp' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</label>
</form>
</div>
</div></div>
</div>
<div class='blog-name'>
<div class='section' id='header' name='ヘッダー'><div class='widget Header' data-version='2' id='Header1'>
<div class='header-widget'>
<div>
<h1>
SOHO
</h1>
</div>
<p>
Small Office, Home Office
</p>

新テーマには<header>があるのでそこからコピー開始しましたが

ブログのタイトル の後に ブログの説明 (あれば)が入るだけですね
(Bloggerの 設定 > 基本 > 説明 から入力して設定できるもの)

h1の後にpが入るだけ

*Bloggerの 設定 > メタタグ > 検索向け説明を有効にする を有効にしていない場合は、ブログの説明 が og:description となります

• [Blogger]all-head-content とは

「ページ ヘッダー」ガジェット で画像を使用する場合は面倒なので別に用意した方が楽かなという感じです

Love Live Yoshiko Tsushima Blogger templateではヘッダーイメージを使用する為、「ページ ヘッダー」ガジェット を採用していません