弊ブログ提供ブログカードのデザイン提案【随時追加】

弊ブログ提供ブログカードのデザイン提案【随時追加】

カスタマイズ
2020/04/28 14
vanillaice (Akira)
vanillaice (Akira)
Instruction CSS ブログカード

デザインカスタマイズについてのご相談がありましたので、いくつか準備してみました。

弊ブログが提供しているブログカードのみに係る内容であり、それ以外の第三者(第三サービス)製のものは適用外です。

更新履歴

2020.5.3 - デニム背景を追加しました。

2020.5.1 - blockquoteに文字色指定している場合を想定し、ブログカード中のblckquoteのcolor指定を調整しました。

2020.4.30 - 斜め仕切りのアンチエイリアスを調整しました。

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

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

注意事項

ブログカードのブックマークレット登録やCSS導入などは上に掲載したページの内容を熟読の上事前に行ってください。ちなみに上記ブログカードがデフォルトスタイルです。

今回はデザインの提案ですから、デフォルトCSSの内容を書き換える ことになりますので、ブログカード関連CSSがすぐにわかるよう予め対処しておくと良いでしょう。

今回はブックマークレットの内容の書き換えは行いません。つまり html内容に変更は入りません ので、既存デザインと共存させるためにはhtmlに手打ちでクラス名を追加するなど自己責任で処置を行ってください。

darkmode対応も入れていますが不要であれば削除してください。

darkmode用CSSは darkmode対応テンプレート用 なので、非対応テンプレートの場合は削除をおすすめします。

コメント化してある文字数制御用CSSは必要に応じてコメント解除を行ってください(一部制御必須のデザインもあります)
また、行数は2行に設定してあります。変更する場合は同ルールセット内に2の数値が 2箇所 ありますのでいずれも指定したい行数の数字に書き換えてください。制御必須のもの(コメント化されていないもの)については変更非推奨です。

行数制限はCSSで行っています。文章末尾に三点リーダー( … )が表示されるのはwebkit(Safariなど)とwebkitと互換性のあるブラウザ(chrome系など)のみで、Firefoxなどでは表示されません。

IE非対応です。画像の object-fit: cover はIEの未実装プロパティなので、画像のアスペクト比が狂います。正常に表示するためにはポリフィルなどの導入が必要になりますが、私の方では対応致しませんので個人での対策をお願いします。

画像をlargeに

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

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

/* カード全体像 */
.blogcard {
  width: 100%;
  max-width: 500px;/* ブログカード最大横幅 */
  margin: 0 0 30px;
  padding: 10px;
  border-radius: 2px;
  border: 1px solid rgb(211,211,211);
  box-shadow: 0 10px 6px -6px rgba(0,0,0,.1);
  background: white;
  color: rgb(51,51,51);
}

/* 画像 */
.blogcard-image{
  margin: 0 0 20px;
}

.blogcard-image-wrapper {
  position: relative;
  padding: 56% 0 0;
}

.blogcard-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
}

.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent; /* ブログテンプレートに背景に関する強制力の強い指定がある場合には transparent の直後に !important を付けてください */
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  margin: 1em 0 !important;
  font-size: 13px;
  line-height: 1.5 !important;
  /* 文字行数制限が必要な場合はこの一行削除 1/2
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(13px * 1.5 * 2);
  overflow: hidden;
  /* 文字行数制限が必要な場合はこの一行削除 2/2 */
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  font-size: 12px;
}

.blogcard-footer a {
  color: rgb(154,165,171);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
}

/* darkmode対応 */
@media (prefers-color-scheme: dark) {
  .blogcard {
    border: 1px solid rgb(30,30,30);
    box-shadow: 0 10px 6px -6px rgba(0,0,0,.5);
    background: rgb(51,51,51);
    color: rgb(240,240,240);
  }
  .blogcard-title a {
    color: white;
  }
}

余白なし

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

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

【左に画像】
/* カード全体像 */
.blogcard {
  position: relative;
  width: 100%;
  max-width: 500px;/* 最大横幅 */
  margin: 0 0 30px;
  border-radius: 2px;
  box-shadow: 0px 20px 40px rgba(0,0,0,.1);
  background: white;
  color: rgb(51,51,51);
}

.blogcard-content {
  display: flex;
  justify-content: space-between;
}

/* 画像 */
.blogcard-image {
  width: 30%;
}

.blogcard-image-wrapper {
  position: relative;
  padding: 100% 0 0;
}

.blogcard-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogcard-text {
  width: 70%;
  padding: 5px 10px;
}

/* タイトル */
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: calc(13px * 1.4 * 1);
  overflow: hidden;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
}

.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent; /* ブログテンプレートに背景に関する強制力の強い指定がある場合には transparent の直後に !important を付けてください */
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  margin: .5em 0 !important;
  font-size: 12px;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: calc(12px * 1.5 * 1);
  overflow: hidden;
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  position: absolute;
  right: 0;
  bottom: 3px;
  width: 70%;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.2;
}

.blogcard-footer a {
  color: rgb(154,165,171);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
}

/* has no image */
.blogcard-hasnoimage .blogcard-text {
  width: 100%;
}

.blogcard-hasnoimage .blogcard-footer {
  position: static;
  width: 100%;
  padding: 10px 20px;
}

@media screen and (min-width: 375px) {
  .blogcard-title {
    font-size: 14px;
    -webkit-line-clamp: 2;
    max-height: calc(15px * 1.4 * 2);
  }
}
@media screen and (min-width: 415px) {
  .blogcard-text {
    padding: 10px 20px;
  }
  .blogcard-title {
    font-size: 15px;
    -webkit-line-clamp: 3;
    max-height: calc(15px * 1.4 * 3);
  }
  .blogcard-description {
    margin: 1em 0 !important;
    font-size: 13px;
  }
  .blogcard-footer {
    bottom: 8px;
    padding: 0 20px;
    font-size: 12px;
  }
}

/* darkmode対応 */
@media (prefers-color-scheme: dark) {
  .blogcard {
    box-shadow: 0px 20px 40px rgba(0,0,0,.5);
    background: rgb(51,51,51);
    color: rgb(240,240,240);
  }
  .blogcard-title a {
    color: white;
  }
}
【右に画像】
/* カード全体像 */
.blogcard {
  position: relative;
  width: 100%;
  max-width: 500px;/* 最大横幅 */
  margin: 0 0 30px;
  border-radius: 2px;
  box-shadow: 0px 20px 40px rgba(0,0,0,.1);
  background: white;
  color: rgb(51,51,51);
}

.blogcard-content {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

/* 画像 */
.blogcard-image {
  width: 30%;
}

.blogcard-image-wrapper {
  position: relative;
  padding: 100% 0 0;
}

.blogcard-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogcard-text {
  width: 70%;
  padding: 5px 10px;
}

/* タイトル */
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: calc(13px * 1.4 * 1);
  overflow: hidden;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
}

.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent; /* ブログテンプレートに背景に関する強制力の強い指定がある場合には transparent の直後に !important を付けてください */
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  margin: .5em 0 !important;
  font-size: 12px;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: calc(12px * 1.5 * 1);
  overflow: hidden;
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  position: absolute;
  left: 0;
  bottom: 3px;
  width: 70%;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.2;
}

.blogcard-footer a {
  color: rgb(154,165,171);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
}

/* has no image */
.blogcard-hasnoimage .blogcard-text {
  width: 100%;
}

.blogcard-hasnoimage .blogcard-footer {
  position: static;
  width: 100%;
  padding: 10px 20px;
}

@media screen and (min-width: 375px) {
  .blogcard-title {
    font-size: 14px;
    -webkit-line-clamp: 2;
    max-height: calc(15px * 1.4 * 2);
  }
}
@media screen and (min-width: 415px) {
  .blogcard-text {
    padding: 10px 20px;
  }
  .blogcard-title {
    font-size: 15px;
    -webkit-line-clamp: 3;
    max-height: calc(15px * 1.4 * 3);
  }
  .blogcard-description {
    margin: 1em 0 !important;
    font-size: 13px;
  }
  .blogcard-footer {
    bottom: 8px;
    padding: 0 20px;
    font-size: 12px;
  }
}

/* darkmode対応 */
@media (prefers-color-scheme: dark) {
  .blogcard {
    box-shadow: 0px 20px 40px rgba(0,0,0,.5);
    background: rgb(51,51,51);
    color: rgb(240,240,240);
  }
  .blogcard-title a {
    color: white;
  }
}

斜め仕切り

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

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

* 2020.4.30 ジャギーを軽減するため若干コード修正しました

/* カード全体像 */
.blogcard {
  position: relative;
  width: 100%;
  max-width: 500px;/* 最大横幅 */
  margin: 0 0 30px;
  border-radius: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
  background: white;
  color: rgb(51,51,51);
}

.blogcard-content {
  display: flex;
  justify-content: space-between;
}

.blogcard-image {
  width: 40%;
}

/* 画像 */
.blogcard-image-wrapper {
  position: relative;
  padding: 100% 0 0;
}

.blogcard-image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blogcard-text {
  position: relative;
  width: 60%;
  padding: 5px 10px;
}

.blogcard-text::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -10%;
  width: 10%;
  height: 100%;
  background: linear-gradient(98deg,transparent 49.5%,white 50.5%);
}

/* タイトル */
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: calc(13px * 1.4 * 2);
  overflow: hidden;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
}
.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  margin: .5em 0 !important;
  font-size: 12px;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  max-height: calc(12px * 1.5 * 1);
  overflow:hidden;
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  position: absolute;
  bottom: 4px;
  right: 0;
  width: 60%;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.2;
}

.blogcard-footer a {
  color: rgb(154,165,171);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
}

/* has no image */
.blogcard-hasnoimage .blogcard-text {
  width: 100%;
}

.blogcard-hasnoimage .blogcard-text::before {
  content: none;
}

.blogcard-hasnoimage .blogcard-footer {
  position: static;
  width: 100%;
  padding: 10px 20px;
}

@media screen and (min-width:375px) {
  .blogcard-description {
    margin: 1em 0 !important;
  }
}
@media screen and (min-width:414px) {
  .blogcard-title {
    font-size: 14px;
    -webkit-line-clamp: 3;
    max-height: calc(14px * 1.5 * 3);
  }
  .blogcard-description {
    font-size: 13px;
    max-height: calc(13px * 1.5 * 1);
  }
  .blogcard-footer {
    bottom: 8px;
    font-size: 12px;
  }
}
@media screen and (min-width: 768px) {
  .blogcard-text {
    padding: 10px 20px;
  }
  .blogcard-title {
    font-size: 15px;
    max-height: calc(15px * 1.4 * 3);
  }
  .blogcard-description {
    -webkit-line-clamp: 2;
    max-height: calc(12px * 1.5 * 2);
  }
  .blogcard-footer {
    padding: 0 20px;
  }
}

/* darkmode対応 */
@media (prefers-color-scheme:dark) {
  .blogcard {
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    background: rgb(51,51,51);
    color: rgb(240,240,240);
  }
  .blogcard-text::before {
    background: linear-gradient(98deg,transparent 49.5%,rgb(51,51,51) 50.5%);
  }
  .blogcard-title a {
    color: white;
  }
}

デニム背景

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

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

/* カード全体像 */
.blogcard {
  max-width: 600px;
  margin-bottom: 30px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.1);
  border-radius: 6px;
  background: url(data:image/png;base64,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);
  color: rgb(51,51,51);
  outline: 2px dashed rgb(41,56,78);
  outline-offset: -10px;
}

/* float親要素 */
.blogcard-content {
  margin-bottom: 5px;
  overflow: hidden;
}

/* 画像 */
.blogcard-image {
  display: inline-block;
  float: right; /* 画像を左に配置したい場合は left に変更 1/2 */
  width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 1/6 */
  height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 2/6 */
  margin: 0 0 5px 5px; /* 画像を左に配置したい場合は 0 10px 5px 0 に変更 2/2 */
}

.blogcard-image-wrapper {
  display: inline-block;
  width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 3/6 */
  height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 4/6 */
}

.blogcard-image-wrapper img {
  width: 100px; /* 画像の表示サイズ変更は数値をpxで変更 5/6 */
  height: 100px; /* 画像の表示サイズ変更は数値をpxで変更 6/6 */
  object-fit: cover;
  object-position: center center;
}

/* タイトル */
.blogcard-title {
  margin: 0 !important;
  font-weight: bold;
  font-size: 15px;
  line-height: 1.4;
}

.blogcard-title a {
  color: rgb(61,63,68);
  word-break: break-all;
}

.blogcard-title a:hover {
  text-decoration: underline;
}

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent; /* ブログテンプレートに背景に関する強制力の強い指定がある場合には transparent の直後に !important を付けてください */
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

/* 記事概要 */
.blogcard-description {
  margin: 1em 0 !important;
  font-size: 13px;
  line-height: 1.5 !important;
}

/* フッター(元記事サイト名とリンク) */
.blogcard-footer {
  font-size: 12px;
}

.blogcard-footer a {
  color: rgb(100,100,100);
  text-decoration: underline;
}

.blogcard-footer a img {
  margin-right: 5px;
}

/* darkmode対応 */
@media (prefers-color-scheme:dark) {
  .blogcard {
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    background: url(data:image/png;base64,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);
    color: rgb(240,240,240);
    outline-color: rgb(162,175,185);
  }
  .blogcard-title a {
    color: white;
  }
  .blogcard-footer a {
    color: rgb(200,200,200);
  }
}

まとめ

文字行数を制限しているものもありますが、本来は 文字をdeleteで削る というのが一番良い方法です。このブログカードは DOMの操作をJSやCSSに頼らない ことが利点です。ただデザインによっては意図的な制御が必要になりますので、そのパターン紹介の意味も込めて提案を行いました。

FC2ブロガーさんで当ブログカードのデザインや動作など、色々なカスタマイズ提案をしてくださっている方もいらっしゃいます(日本語おかしいかも、ごめんなさい)ので参考にされても良いかもしれません。その際には自身のwebページのスペックなども考慮して選択されると良いですね。

第三ブログカードに効力は無い、という点だけ注意してくださいね。あくまでも私が作成したもののみです。また、FC2ブログでの使用に限定することはありませんし、カスタマイズ提案があればどうぞ紹介してください。報告や許可等も不要です(ソース公開・再配布だけはお控えください)
よろしくお願いします :)

* 記事の公開時、ソースコードにメディアクエリを含めるのを忘れました。スマホでデザインが崩れるという方は改めてコードの取得をお願いします。申し訳ございません。

 14

There are no comments yet.
-
管理人のみ閲覧できます

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

2020/04/30 (Thu) 10:18
vanillaice (Akira)
Akira
To ジャギーの件 内緒さん

こんにちは。

ご報告ありがとうございます :)
今調整しましたのでコード内容をご確認くださいね。よろしくお願いします。

2020/04/30 (Thu) 11:00
-
管理人のみ閲覧できます

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

2020/05/01 (Fri) 12:42
-
管理人のみ閲覧できます

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

2020/05/01 (Fri) 12:49
-
管理人のみ閲覧できます

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

2020/05/01 (Fri) 12:57
-
管理人のみ閲覧できます

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

2020/05/01 (Fri) 13:37
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん

こんにちは。
ひとつづつ見ていきたいと思いますので取り急ぎのお知らせです。

まずdarkmode部位のCSSは「darkmode対応テンプレート用」です。テンプレート自体が非対応の場合はブログカードだけに適用してもあまり意味が無いですし、そこだけ浮いてしまったり整合性が取れなくなりますので、できればデフォルトCSSの色調調整を行ってください。

他の件は追ってお返事しますね。よろしくお願いします。

2020/05/01 (Fri) 15:11
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん②

【blockquoteの件】
内緒さんの場合は個人カスタマイズで
blockquote
のルールセット内にカラーコードを指定されていますので、そのためにdarkmode時の変更が適用されません。
なのでブログカードCSSの
.blogcard blockquote

color: inherit;
を追加すると良いと思います。このパターンは他にも想定できますので雛形にも追加しておきますね。
もちろん今回内緒さんが取られた方法でもOKです。

で、最初にお伝えしたんですが、darkmodeに対応していないテンプレートの場合もそうですし、元々カード背景に特徴的な色がついている場合には文字色変更自体必要はありませんので、やはりデフォルトの方(darkmode部位は削除、メインCSS)の方でしっかり決めた方が良いと思います。ブログカードの背景色もdarkmode時に変える、という場合はその限りではありません。

-----
【三点リーダーの色】
リーダーの色が変更されないのは.blogcard-descriptionの色変更のために
.blogcard
に指定されていたcolor指定を取り除いて(descriptionの方へ移動させて)しまったことが原因ですので、元に戻せば適用されます。
(.blogcard-desctiption はそのままで .blogcard に追加でOKです)

よろしくお願いします ('0')/

2020/05/01 (Fri) 15:39
-
管理人のみ閲覧できます

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

2020/05/01 (Fri) 17:10
vanillaice (Akira)
Akira
To ブログカードの件(終了のご報告)内緒さん

いえいえ。blockquoteなどは考えられるケースなのでご指摘頂いて助かりました。
いつもありがとうございます :)

2020/05/01 (Fri) 22:48
-
管理人のみ閲覧できます

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

2020/05/17 (Sun) 11:26
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん

こんにちは。
* モバイル端末でのブログカードの件

> htmlを毎回手打ちして〜

文字通りの意味であれば毎回大変な苦労だったと思います。
タブレット・スマホでの使い方を追記しましたので御覧くださいね。

参考記事: ブログカードのブックマークレットを作成しました(「スマートフォン・タブレットで登録したい方へ」の章)
https://vanillaice000.blog.fc2.com/blog-entry-583.html

上記方法を取ると相手方がOGPを設定していれば画像も取得できますので、別サービスを経由させる必要もなくなります。
OGP画像は原則「直リンク」なので

> 相手側の画像のURLを直接貼っても良かったのでしょうか?〜

の問についてはYESです。
よろしくお願いします。

2020/05/17 (Sun) 18:15
-
管理人のみ閲覧できます

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

2020/05/17 (Sun) 20:44
vanillaice (Akira)
Akira
To ブログカードの件 内緒さん(終了のご報告)

こんばんは。内緒さん、ごめんなさい。私、内緒投稿なのに返信にハンドルネームを記載してしまいました (´;ェ;`)
訂正しておきました (*_ _)

カードの件、急いで書きましたので何か不備などあればご指摘くださいね。よろしくお願いします。

2020/05/18 (Mon) 22:35

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ