ブログカードを「合わせて読みたい」リンクに

カスタマイズ

2022/10/05

2022/10/05 1

vanillaice (Akira)

ブログカード

最近よく見かける『合わせて読みたい』カード。やってることは要するにリッチリンクなので、弊ブログで提供しているブログカードを流用する方法です。

利用条件

上記記事のブログカードを導入していることが条件です。個人カスタマイズは考慮せずデフォルト内容からのデザイン追加を行います。「合わせて読みたい」リンクは概ね「自分が書いた記事」になるでしょうから、今回「引用ブログカード」は対象外とします。

目次へ戻る↑

デザインサンプル

正直デザイン自体はワンパターンよね (∵`)

目次へ戻る↑

導入手順

本体追加デザイン

まずはブログカード本体のデザインを選んでください。『サムネイル正方形 + 右配置』はデフォルトですがいくつかのCSS追加が必要です。CSSをスタイルシートのブログカードデフォルトCSSよりも後に記載します。デフォルト内容を上書きしますので、必ず後に記します。

サムネイル正方形 + 右配置 (デフォルトと同じ)

ソースコードを見る

/* 正方形 右 */
.rec {
  position: relative;
  margin: 50px 0 30px;
  padding: 30px 10px 10px;
}

サムネイル正方形 + 左配置

ソースコードを見る

/* 正方形 左 */
.rec {
  position: relative;
  margin: 50px 0 30px;
  padding: 30px 10px 10px;
}
.rec .blogcard-image {
  float: left;
  margin: 0 12px 5px 0;
}

サムネイル長方形 (16:9) + 右配置

ソースコードを見る

/* 長方形 右 */
.rec {
  position: relative;
  margin: 50px 0 30px;
  padding: 30px 10px 10px;
}
.rec .blogcard-image {
  float: none;
  display: block;
  width: 178px;
  margin: 0 auto 12px;
}
.rec .blogcard-image-wrapper,
.rec .blogcard-image-wrapper img {
  width: 100%;
  height: 100%;
}
.rec .blogcard-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 13px * 1.5 * 2);
  overflow: hidden;
}
@media screen and (min-width: 600px) {
  .rec .blogcard-image {
    float: right;
    margin: 0 0 5px 15px;
  }
}

サムネイル長方形 (16:9) + 左配置

ソースコードを見る

/* 長方形 左 */
.rec {
  position: relative;
  margin: 50px 0 30px;
  padding: 30px 10px 10px;
}
.rec .blogcard-image {
  float: none;
  display: block;
  width: 178px;
  margin: 0 auto 12px;
}
.rec .blogcard-image-wrapper,
.rec .blogcard-image-wrapper img {
  width: 100%;
  height: 100%;
}
.rec .blogcard-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: 13px * 1.5 * 2);
  overflow: hidden;
}
@media screen and (min-width: 600px) {
  .rec .blogcard-image {
    float: left;
    margin: 0 15px 5px 0;
  }
}

「合わせて読む」追加デザイン

続いて「合わせて読む」のデザイン部分を選択してください。こちらもスタイルシートのブログカードデフォルトCSSよりも後に記載します (本体追加デザインの次でOKです)

背景ベタ塗り

ソースコードを見る

/* ベタ塗り */
.rec::before {
  content: "合わせて読みたい";/* 文章変更はココ */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -21px;
  left: 16px;
  width: 160px;
  height: 42px;
  font-size: 1.2rem;
  white-space: nowrap;
}
.rec::before {
  border-radius: 25px;
  background: rgb(255,185,42);/* 背景色 */
  color: rgb(51,51,51);/* 文字色 */
}

背景グラデーション

ソースコードを見る

/* グラデーション */
.rec::before {
  content: "合わせて読みたい";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -21px;
  left: 16px;
  width: 160px;
  height: 42px;
  font-size: 1.2rem;
  white-space: nowrap;
}
.rec::before {
  border-radius: 25px;
  background: linear-gradient(to right, rgb(101,78,163), rgb(234,175,200));/* グラデーション左から右 */
  color: white;/* 文字色 */
}

マスキングテープ水玉

ソースコードを見る

/* 水玉 */
.rec::before {
  content: "合わせて読みたい";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -21px;
  left: 16px;
  width: 160px;
  height: 42px;
  font-size: 1.2rem;
  white-space: nowrap;
}
.rec::before {
  border-radius: 2px;
  background-color: rgb(221,218,238);/* 背景色 */
  background-image: radial-gradient(white 20%, transparent 0), radial-gradient(white 20%, transparent 0);/* 水玉の色(white) */
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;;
  color: black;/* 文字色 */
  transform: rotate(-2deg);/* 傾き(不要ならこの一行削除) */
}

マスキングテープチェック

ソースコードを見る

/* チェック */
.rec::before {
  content: "合わせて読みたい";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -21px;
  left: 16px;
  width: 160px;
  height: 42px;
  font-size: 1.2rem;
  white-space: nowrap;
}
.rec::before {
  background-color: white;/* 背景色 */
  background-image: linear-gradient(-90deg, rgba(198,243,255,.6) 50%, transparent 50%),/* チェック縦 rgba(198,243,255,.6) */
                    linear-gradient(rgba(198,243,255,.6) 50%, transparent 50%);/* チェック横 rgba(198,243,255,.6) */
  background-size: 10px 10px;
  color: rgb(51,51,51);/* 文字色 */
  transform: rotate(-2deg);/* 傾き(不要ならこの一行削除) */
  transform: none;
}
/* 中央
@media screen and (max-width: 599px) {
  left: 50%;
  transform: translateX(-50%);
}
*/

マスキングテープストライプ

ソースコードを見る

/* ストライプ */
.rec::before {
  content: "合わせて読みたい";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -21px;
  left: 16px;
  width: 160px;
  height: 42px;
  font-size: 1.2rem;
  white-space: nowrap;
}
.rec::before {
  background: repeating-linear-gradient(135deg, rgb(196,248,162), rgb(196,248,162) 10px, white 8px, white 16px);/* ストライプ */
  color: rgb(51,51,51);/* 文字色 */
  transform: rotate(-2deg);/* 傾き(不要ならこの一行削除) */
}

タグ風

ソースコードを見る

/* タグ風 */
.rec::before {
  content: "合わせて読みたい";
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -21px;
  left: 16px;
  width: 160px;
  height: 42px;
  font-size: 1.2rem;
  white-space: nowrap;
}
.rec::before {
  border-radius: 2px;
  outline: 1px dashed white;/* ボーダー色 white */
  outline-offset: -4px;
  background: rgb(41,59,80);/* 背景色 */
  color: white;/* 文字色 */
}

目次へ戻る↑

html

通常通りブログカードをブックマークレットで取得し、記事作成画面(HTML編集)にペーストしたら、親要素に rec というクラスを追加します。html書き出しが

<figure class="blogcard rec">

になります。これは毎回手入力してください。既存クラス名 blogcard の右側に半角スペースを入力してから rec です。

目次へ戻る↑

まとめ

サンプルコードは複数デザイン導入には配慮していません。複数入れる場合は自己責任でクラス名の操作を行ってください。ブログカードのhtmlにいろいろ付け足すのは手間なので、「合わせて読みたい」の文章をCSSの疑似要素で表記する方法にしました。ただし通常のブログカードとの区別としてクラス名の付与だけは行ってください。

要は文章表記の仕方だけわかれば応用が効くはずですから、デザインは自主的に調べればいろいろ出てくるかと思います ('0')/

Comments 1

2022/10/17 (Mon) 09:37

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントに関する注意事項

テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
FC2共有テンプレート一覧ご質問の前に
専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)

管理者にだけ表示を許可する

利用条件

デザインサンプル

導入手順

本体追加デザイン

サムネイル正方形 + 右配置 (デフォルトと同じ)

サムネイル正方形 + 左配置

サムネイル長方形 (16:9) + 右配置

サムネイル長方形 (16:9) + 左配置

「合わせて読む」追加デザイン

背景ベタ塗り

背景グラデーション

マスキングテープ 水玉

マスキングテープ チェック

マスキングテープ ストライプ

タグ風

html

まとめ

Comments 1

マスキングテープ水玉

マスキングテープチェック

マスキングテープストライプ