あわせて読みたいCSSデザイン

2023/05/09 投稿

2024/05/13 更新

よく見かける「あわせて読みたい」という見出し付きのブログカードを設置したいと思います。

装飾のないオリジナルのブログカードも残しておきたい。記事作成時になるべく簡単に使いたい。この2点を優先させていくつか考えてみました。

ブログカードに追加カスタマイズ

Bloggerには純正のブログカードはないので外部のものを使っています。現在使っているのは以下の記事でご紹介したもの（The other way round/Akiraさん作）です。

同じブログカードをお使いの場合は、ベースとなっているブログカードに下記コードの追加で使えます。お好みで調整してください。

定番：あわせて読みたい

HTMLではブログカードの <figure> ～ </figure> を <div class="awasete"> </div> で丸ごと囲みます。

<div class="awasete">
  <figure class="blogcard b-cite">
       <!-- ※中省略 -->
  </figure>
</div>

/* 見出し */
.awasete .blogcard::before {
   position: absolute;
   background-color: #ffffff;
   color: #044162;
   content: '\2605\0020あわせて読みたい';
   font-size: .9em;
   font-weight: bold;
   padding: 5px 10px;
   left: 1rem;
   top: -1rem; 
}

content の「￥」が「バックスラッシュ」で表示されていますが、入力は半角の￥マークです。「￥2605￥0020あわせて読みたい」と入力します。

背景を色付きにしたりカードの中に入れ込んでしまったり、いくつか位置 top/left の調整でアレンジが効きます。

応用：+続きを読む

リンク先のURLを非表示にして、そのエリアに「続きを読む」のボタンを表示したパターン。「続きを読む」は色背景の設定を削除してテキストだけでもOKです。

スニペットのマージン/行数などによってはカード内の余白か、ボタンの大きさ/位置などの調整が必要な場合もあります。

/*続きを読む*/
.awasete .blogcard-footer {
   display: none !important;
}
.awasete .blogcard::after {
   position: absolute;
   background-color: #044162;
   border-radius: 8px;
   color: #ffffff;
   content: '続きを読む\0020\27A1';
   font-size: .7em;
   font-weight: bold;
   padding: 2px 8px;
   right: 1rem;
   bottom: 1rem;
}

応用：+見出し・続きを読む

上記2つを組み合わせて使うこともできます。ボタンデザインだけちょっと変えました。

/* 見出し+続きを読む */
.awasete .blogcard-footer {
   display: none !important;
}
.awasete .blogcard::before {
   position: absolute;
   background-color: #ffffff;
   color: #044162;
   content: '\2605\0020あわせて読みたい';
   font-size: .9em;
   font-weight: bold;
   padding: 5px 10px;
   left: 1rem;
   top: -1.2rem;
} 
.awasete .blogcard::after {
   position: absolute;
   background: #044162;
   color: #ffffff;
   content: '続きを読む\0020\27A1';
   font-size: .7em;
   font-weight: bold;
   padding: 4px 10px;
   right: -1px;
   bottom: 1rem;
}

応用：+吹き出し

こちらも、HTMLではブログカードの <figure> ～ </figure> を <div class="awasete"> </div> で丸ごと囲みます。

<div class="awasete">
  <figure class="blogcard b-cite">
       <!-- ※中省略 -->
  </figure>
</div>

/*吹き出し使用時のマージン調整*/
.awasete{
   margin-top: 5rem;
}
.awasete .blogcard::before{
   position: absolute;
   background-color: #044162;  /* 吹き出し背景色 */
   border: solid 1px #044162;
   border-radius: 8px;
   color: #ffffff;  /* 吹き出し文字色 */
   content: '\2605\0020あわせて読みたい';  /* 吹き出しの中 */
   font-size:.8em;
   font-weight:bold;
   padding: 5px 20px;
   left: -10px;
   top: -50px;
}
.awasete .blogcard::after{
   position: absolute;
   content: '';
   border-top: 10px solid #044162;  /* 吹き出し三角部分の色 */
   border-right: 10px solid transparent;
   border-left: 10px solid transparent;
   top: -15px;
   left: 15px;
  }

吹き出しの中のテキストは /*見出しテキスト*/ の部分 content: 'あわせて読みたい'; で指定しています。この中を変えれば他にも応用が効きます。

contentプロパティに全角記号を入力するとうまく表示されない

Bloggerでは、例えばテキストの前に星のマークを付けたい場合「★」と入力しても、星マークが「★」と表示されてしまいます。

★のユニコード16進に「￥」を加えた4桁の数字＝￥2605、 content: '￥2605あわせて読みたい'; とすると「★あわせて読みたい」と表示されます。

※￥マークは表示の際にバックスラッシュに自動変換されてしまうので、ここでは説明のために全角で入力していますが、実際は半角入力です。

他の記号なども含めて探しやすいサイトがあったのでご紹介しておきます。使えそうな記号類が多い箇所を選んでリンクしてありますのでご参考まで。

Unicode 2000-2FFF（ゆるゆるプログラミング＞ Unicode より）

この一覧に表示される記号・一部の絵文字は表示可能なのでちょっとは遊べますが、いろいろなアイコンフォントで飾りたい場合はFont Awesomeの導入をおすすめします。

h5 h6 などの見出しをカスタマイズして使うのは？

普段あまり使わない h5 あたりの見出しをカスタマイズすれば1番お手軽なのでは？とも考えたのですが、いくつか気になるポイントがありました。

見出しの本来の使い方として、

h1＝「主見出し」タイトル・テーマ（できれば記事内で1つ）
h2＝「見出し」目次・章（記事内でいくつでも）
h3＝「小見出し」各章のポイント（記事内でいくつでも）
h4〜h6＝「準見出し」補足情報（記事内でいくつでも）

となっており、h1～h6 まで使用する順番を守るほうがSEO的には良いようです。

ということは、記事の途中で h3 を飛ばして吹き出しを設定した h5 を急に使うことは好ましくないので、SEOを考えるなら使わないほうが無難と判断しました。

最後に

いずれも基本となるブログカードのコードに <div class="awasete"> </div> 2行だけの追記で、後は ::before ::after で表示させています。

他にも枠や見出し・ボタンのデザインはいろいろあると思いますので、お好みのブログカードに仕上げてください。

CSS

#カスタマイズ