ホーム » QooQ »

[Blogger] ヘッダー下に画像付きのカード型リンクを設置しました。[QooQ]

2022年02月13日更新

2021年02月06日公開

当サイトはアフィリエイト広告を使用しています

ヘッダーの下にスマートフォンのときだけ表示されるカード型のリンクを設置しました。画像はCanvaで作成。display: grid;をつかって格子状に並べてみました。display: grid;はいろいろな書き方があるようですが、下記サイトの記法が直感的でわかりやすかったです。

Interactive CSS Grid Generator | Layoutit Grid

grid.layoutit.com

コードはレイアウトで追加したHTML/JavaScriptウィジェットのなかに書き込みました。コード

コードはこちら ※クリックすると開きます

<!-- Card type Link -->
<aside class='header__card-type-link-container'>
  <div class='link-img card-type-link__upper-left'>
    <a href='リンク先URL'>
      <img src='画像URL' alt='' width='' height='' />
    </a>
  </div>
  
  <div class='link-img card-type-link__upper-right'>
    <a href='リンク先URL'>
      <img src='画像URL' alt='' width='' height='' />
    </a>
  </div>
  
  <div class='link-img card-type-link__lower-left'>
    <a href='リンク先URL'>
      <img src='画像URL' alt='' width='' height='' />
    </a>
  </div>
  
  <div class='link-img card-type-link__lower-right'>
    <a href='リンク先URL'>
      <img src='画像URL' alt='' width='' height='' />
    </a>
  </div>
</aside>

<style>
.header__card-type-link-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  gap: 5px 5px;
  grid-template-areas:
    "card-type-link__upper-left card-type-link__upper-right"
    "card-type-link__lower-left card-type-link__lower-right";
  justify-items: center;
  padding: 5px;
  margin-top: -30px; /* 上にできる隙間の調整 */ 
}

.card-type-link__upper-left { grid-area: card-type-link__upper-left; }

.card-type-link__upper-right { grid-area: card-type-link__upper-right; }

.card-type-link__lower-left { grid-area: card-type-link__lower-left; }

.card-type-link__lower-right { grid-area: card-type-link__lower-right; }

.link-img {
  width: 100%;
}
.link-img img {
  width: 100%;
}
@media(min-width: 768px) {
.header__card-type-link-container {
  display:none;
}}
</style>

リンク先URL

画像URL

alt=' '

width=' '

height=' '

は適宜入力<div class='link-img...のところは<ul> <li>タグでグループにするのがベターかもしれませんが、テンプレート独自のCSSが適用されている可能性があるので無難に<div>タグを使用しました。テンプレートQooQでHTML/JavaScriptウィジェットを使用した場合、<ul> <li>タグに対してBloggerから配信されるcss_bundle_v2.cssとQooQ独自のCSSが適用されていました。/* ulタグ */ .widget ol, .widget ul { /* QooQ独自 */ padding: 0; } .widget ul { /* css_bundle_v2.css */ padding: 0 0 0 1.25em; margin: 0; line-height: 1.2; } /* liタグ */ .widget-content li { /* QooQ独自 */ list-style-type: none; } .widget li, .BlogArchive #ArchiveList ul.flat li { /* css_bundle_v2.css */ padding: .25em 0; margin: 0; text-indent: 0; }実際に運用しているコード記事公開時点で運用しているコードです。

記事公開時点の運用中のコードはこちら。※クリックすると開きます

<ul> <li>タグを使用、画像は無駄に？WebP（Wikipedia）にしてあります。

終了タグ</li>は条件がそろえば省略可能ということなのでなので省略してみました。

<!-- Card type Link -->
<aside class='header__card-type-link-wrapper'>
<ul class='header__card-type-link-container'>
  <li class='link-img card-type-link__upper-left'>
    <a href='https://sutasutashiki.blogspot.com/2017/10/inner-window.html'>
      <picture>
        <source srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_itxEpw5CQzt_MkA21_9g_sxt9vVQurRZeQUzd4hpq3WCPmm2ReZjU_55BQztwNnOhMeFpFF6WJedHOYN76Qxr_f7YhSSu5T9QPw71paT_ktUqDPNj7irKgRtOh-YyOf0CdQVYgGQoaNE/s0-rw/%25E9%25A4%258A%25E7%2594%259F%25E3%2583%2591%25E3%2583%258D%25E3%2583%25AB.png' type='image/webp' alt='養生パネルで二重窓をDIYリンク' width='150' height='150' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_itxEpw5CQzt_MkA21_9g_sxt9vVQurRZeQUzd4hpq3WCPmm2ReZjU_55BQztwNnOhMeFpFF6WJedHOYN76Qxr_f7YhSSu5T9QPw71paT_ktUqDPNj7irKgRtOh-YyOf0CdQVYgGQoaNE/s0/%25E9%25A4%258A%25E7%2594%259F%25E3%2583%2591%25E3%2583%258D%25E3%2583%25AB.png' alt='養生パネルで二重窓をDIYリンク' width='150' height='150' /> </source></picture>
    </a>

  <li class='link-img card-type-link__upper-right'>
    <a href='https://sutasutashiki.blogspot.com/2020/06/MintOil.html'>
      <picture>
        <source srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrhLKtMVLJBvft8WoWOgjsAi1Yegif8vXlPeINTU7qZscidERPDECZo_rb17-liJpbgrVHfGWzNWzLtuY-TYuPepKMy36q2zfCpfi7orMdqVvqUVWL555ZrJf6rlchAPAKpJ6e6zePVLIy/s0-rw/%25E3%2583%258F%25E3%2583%2583%25E3%2582%25AB%25E6%25B2%25B9%25E3%2581%25A7%25E3%2583%259E%25E3%2582%25B9%25E3%2582%25AF%25E7%2594%259F%25E6%25B4%25BB%25E3%2582%2592%25E5%25BF%25AB%25E9%2581%25A9%25E3%2581%25AB.png' ' type='image/webp ' alt='ハッカ油でマスク生活を快適にリンク' width='150' height='150'/>
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrhLKtMVLJBvft8WoWOgjsAi1Yegif8vXlPeINTU7qZscidERPDECZo_rb17-liJpbgrVHfGWzNWzLtuY-TYuPepKMy36q2zfCpfi7orMdqVvqUVWL555ZrJf6rlchAPAKpJ6e6zePVLIy/s0/%25E3%2583%258F%25E3%2583%2583%25E3%2582%25AB%25E6%25B2%25B9%25E3%2581%25A7%25E3%2583%259E%25E3%2582%25B9%25E3%2582%25AF%25E7%2594%259F%25E6%25B4%25BB%25E3%2582%2592%25E5%25BF%25AB%25E9%2581%25A9%25E3%2581%25AB.png '' alt='ハッカ油でマスク生活を快適にリンク' width='150' height='150' /> </source></picture>
    </a>

  <li class='link-img card-type-link__lower-left'>
    <a href='https://sutasutashiki.blogspot.com/2017/10/1seg-tv-tuner-lt-dt306bk.html'>
      <picture>
        <source srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhccPiSJotl7OwmxzJj-pv0uyDjMflCJh7aO8E1DtWJuVzDoL6Qad4YEGrQF_S0VhdwpceirPM7rLH3fZQsdpgXJYALed-gON1U-0S5Xi-zftJa0Ef1kOIC2DOP09pNpyLmPOXkX4XhySqm/s0-rw/Windows10+64bit+%25E3%2583%25AF%25E3%2583%25B3%25E3%2582%25BB%25E3%2582%25B0%25E3%2583%2581%25E3%2583%25A5%25E3%2583%25BC%25E3%2583%258A%25E3%2583%25BC%25E3%2581%25A7+%25E3%2583%2586%25E3%2583%25AC%25E3%2583%2593%25E8%25A6%2596%25E8%2581%25B4.png' type='image/webp' alt='windows10でワンセグチューナーでテレビ視聴リンク' width='150' height='150' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhccPiSJotl7OwmxzJj-pv0uyDjMflCJh7aO8E1DtWJuVzDoL6Qad4YEGrQF_S0VhdwpceirPM7rLH3fZQsdpgXJYALed-gON1U-0S5Xi-zftJa0Ef1kOIC2DOP09pNpyLmPOXkX4XhySqm/s0/Windows10+64bit+%25E3%2583%25AF%25E3%2583%25B3%25E3%2582%25BB%25E3%2582%25B0%25E3%2583%2581%25E3%2583%25A5%25E3%2583%25BC%25E3%2583%258A%25E3%2583%25BC%25E3%2581%25A7+%25E3%2583%2586%25E3%2583%25AC%25E3%2583%2593%25E8%25A6%2596%25E8%2581%25B4.png' alt='windows10でワンセグチューナーでテレビ視聴リンク' width='150' height='150' /> </source></picture>
    </a>

  <li class='link-img card-type-link__lower-right'>
    <a href='https://sutasutashiki.blogspot.com/2020/10/masl-pad-eyeglass-anti-fog.html'>
      <picture>
        <source srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41nMFwOORQpb_PL7WpUM3oQUsJiHR5WXfRXW_PwTow72A1mDvNWYJ46mEo1RFVnKIOQLTX8GgF1N6rVpsc9UooXP1BOPN8Z8630-vdDydSsq6x8Xh-5ph84E_NuayLUbFGV2T8rfnyIwB/s0-rw/%25E3%2583%259E%25E3%2582%25B9%25E3%2582%25AF%25E3%2581%25AE%25E3%2581%25A8%25E3%2581%258D%25E3%2581%25AE%25E3%2583%25A1%25E3%2582%25AC%25E3%2583%258D%25E3%2581%25AE%25E3%2581%258F%25E3%2582%2582%25E3%2582%258A%25E6%25AD%25A2%25E3%2582%2581.png' type='image/webp' alt='メガネのくもり止め' width='150' height='150' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh41nMFwOORQpb_PL7WpUM3oQUsJiHR5WXfRXW_PwTow72A1mDvNWYJ46mEo1RFVnKIOQLTX8GgF1N6rVpsc9UooXP1BOPN8Z8630-vdDydSsq6x8Xh-5ph84E_NuayLUbFGV2T8rfnyIwB/s0/%25E3%2583%259E%25E3%2582%25B9%25E3%2582%25AF%25E3%2581%25AE%25E3%2581%25A8%25E3%2581%258D%25E3%2581%25AE%25E3%2583%25A1%25E3%2582%25AC%25E3%2583%258D%25E3%2581%25AE%25E3%2581%258F%25E3%2582%2582%25E3%2582%258A%25E6%25AD%25A2%25E3%2582%2581.png' alt='メガネのくもり止め' width='150' height='150' /> </source></picture>
    </a>
</ul>
</aside>
<style>
#HTML6 {
  margin-top: 0; /* 上にできる隙間の調整 */
}
.header__card-type-link-wrapper {
  padding: 5px;
}
.header__card-type-link-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:    1fr 1fr;
  gap: 5px 5px;
  grid-template-areas:
    "card-type-link__upper-left card-type-link__upper-right"
    "card-type-link__lower-left card-type-link__lower-right";
	justify-items: center;
}

.card-type-link__upper-left { grid-area: card-type-link__upper-left; }

.card-type-link__upper-right { grid-area: card-type-link__upper-right; }

.card-type-link__lower-left { grid-area: card-type-link__lower-left; }

.card-type-link__lower-right { grid-area: card-type-link__lower-right; }

.link-img {
  width: 100%;
}
.link-img img {
  width: 100%;
}
@media(min-width: 768px) {
.header__card-type-link-container {
  display:none;
}}
</style>

[実験] BloggerでWebP形式の画像を使う-すたすた式

ios14、Safari14以降からiphoneやmacでWebP形式の画像が使えるようになるらしいので、BloggerでWebP形式の画像を使うにはどうしたらいいのか、いろいろ試してみました。

sutasutashiki.blogspot.com

補足など150px × 150pxで画像をつくったので拡大されると粗くなる。いずれ修正したい。表示される場所はヘッダーの下だが、Bloggerのレイアウト的には「ブログの投稿」ガジェットの上。前準備としてウィジェットを追加可能にした。画像について.link-img { /* width: 100%; */ } .link-img img { /* width: 100%; */ width: 50vw; }でもうまく枠内にフィットした。要調査。