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

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

利用条件

ブログカード作成ブックマークレットをアップデートしました

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

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

デザインサンプル

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ...

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ...

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ...

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ...

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

導入手順

本体追加デザイン

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

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

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ...

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

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

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 16:9 のアスペクトが最もよく利用される黄金比だと言われています。 ところが例えば「音楽関連のフライヤー」「映画のポスター」「本の表紙」など。これらは概ね 縦に長い画像 です。特定ジャンルのブロガーさんで縦長にしたい場合もあるよね、ということで ( ゚Д゚)ノ...

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

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

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 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) + 左配置

トップページに縦長サムネイルを利用したい方向けカスタマイズ

トップページに縦長サムネイルを利用したい方向けカスタマイズ

web上に於いて推奨されるのは大抵の場合「横長」ですよね。2022年では 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')/

-
2022/10/17 (Mon) 09:37

管理人のみ閲覧できます

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

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