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

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

webツール
2021/07/09
47
vanillaice (Akira)
vanillaice (Akira)
BookmarkletTipsOGP中級者向けブログカード

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

2023.6.19
スマートフォン・タブレットでのブックマークレット登録の仕方を追記しました(旧記事からの移植)

最終更新 2022.11.20
  • ブックマークレットソースコード内の短縮URLが機能しない件を修正(pure JSへ書き換え)

FC2ブログユーザーの場合は当該ブログカード記載ページで「タグをリンクにする」機能は利用できませんのでご注意ください。

メリットとデメリットについて

まず初導入の方へ向けて注意点や特徴を再掲しておきます。

ブログカードの有名どころ「はてなブログカード」「Embedly」と大きく違う点は APIやJSを利用していない です。

メリット

  • 記事内でスクリプトを利用しないため描画が速い
  • html内容が出て来るので概要文字数の調整が容易
  • デザインのカスタマイズが容易

デメリット

  • htmlが出て来るので編集画面が煩雑になる
  • 毎回アクセスするわけではないので出典元の修正や変更に対応できない

APIを使うとページを開く度に情報を取得しますので、元記事に変更などがあった場合それが反映されます。その代わり描画が遅くなりがち。ですから一長一短というところでしょうか。

変更理由

大スマートフォン時代の到来 ということで、旧来の内容ですとどちらかと言うとパソコンの親和性を重視しています。具体的には リンク にあたる部位ですね。通常は該当するテキストがリンクになる、というのが一般的です。例えば以下のような形。

詳細は こちら からご覧頂けます。

「こちら」の部位がリンクになっています(サンプルなので見た目だけを模した空リンクです)
なので旧来のブログカード内には

  • 記事タイトル
  • ファビコン横サイト名
  • サムネイル画像

と、カード内に3つのリンクを内包しています。遷移先は全て引用元の記事なんですが3箇所に分離させてある、ということですね。ところがスマートフォンというのはとにかく タップ範囲が複雑すぎないこと が大事で、大雑把に言えば カード全体がひとつのリンクになっていれば良い という感覚です。その方が押しやすいですし、細々複雑なことをしなくて済みます。

そういった背景がありますので、この機会に カード全体をリンクとする再形成 を行いました。

旧ブログカードのスタイルが崩れてはいけませんので、CSSと大まかなhtmlについては旧作をできるだけ踏襲しています。ただし CSSの若干の追加 のみ必要となります。そしてもちろん ブックマークレット再登録 ですね。この2手順が必須です。

新しいものに切り替えたら既存カードのレイアウトが崩れた、ということにならないよう配慮していますが、実際ご利用頂いて不備があればお知らせください。よろしくお願いします。

変更概要

  • アウトラインを div から figure に変更
  • 画像の遅延読み込み loading="lazy" の追加
  • 画像にwidth height 属性を追加
  • サムネイル画像の alt 属性に記事タイトルを指定
  • フッター部位ブログタイトルを他フォントと同色に

意味論的にはこういった変更を入れてあります。リンクは別タブで開かれます。その際の rel="noopener noreferrer" についてはもうほとんど不要なんですが念の為入れておきます。フッターブログタイトルについて旧来は少し色を落としていましたが、全体リンクなので「個別に押せそうな印象の色分け」は取り除きました。もちろん必要であれば個人カスタマイズを入れてください。

手順① ブックマークレット再登録

既存のブックマークレットを削除し、改めて以下の内容を登録してください。不安のある方は既存内容の名称を変更しておくなどして共存も可能です。以下のテキスト部位をマウスドラッグし、ブラウザのブックマークバーへドロップします(ドラッグ&ドロップ)

ブログカード

引用ブログカード

手順② CSSの追加

デフォルト light
デフォルト dark

旧ブログカード登録済の方

既にブログカードをご利用中でテンプレートのスタイルシート内に既存CSSがある場合はその内容よりも 後(下) に以下の内容を追加してください。

figure.blogcard {
  transition: .2s ease-in-out;
}

.blogcard > a {
  color: rgb(51,51,51);
}

.blogcard-footer img {
  margin-right: 5px;
  vertical-align: middle;
}

/* カードマウスホバー */
figure.blogcard:hover {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}

figure.blogcard:hover > a {
  color: rgb(51,51,51);
  text-decoration: none !important;
}

/* OSダークモード対応(テンプレートがダークモード未対応の場合は不要) */
@media (prefers-color-scheme: dark) {
  .blogcard {
    box-shadow: 0px 20px 40px rgba(0,0,0,.5);
    border-color: rgb(60,60,60);
    background: rgb(51,51,51);
  }
  .blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240) !important;
  }
}

/* 全体リンク化を利用している方のみ必要 */
figure.blogcard .blogcard-footer {
  height: auto;
}

figure.blogcard .blogcard-description {
  margin: 1em 0 !important;
}

ブログカード新規登録の方

初導入の方は以下の内容をテンプレートスタイルシート末尾に追加してください。

/* カード全体像 */
.blogcard {
  max-width: 100%;
  margin-bottom: 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;
  transition: .2s ease-in-out;
}

.blogcard > a {
  color: rgb(51,51,51);
}

/* 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 blockquote {
  position: static;
  margin: 0;
  padding: 0;
  box-shadow: none;
  border: 0;
  background: transparent; /* ブログテンプレートに背景に関する強制力の強い指定がある場合には transparent の直後に !important を付けてください */
}

.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 img {
  margin-right: 5px;
  vertical-align: middle;
}

/* カードマウスホバー */
.blogcard:hover {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}

.blogcard:hover > a {
  color: rgb(51,51,51);
  text-decoration: none !important;
}

/* OSダークモード対応(テンプレートがダークモード未対応の場合は不要) */
@media (prefers-color-scheme: dark) {
  .blogcard {
    box-shadow: 0px 20px 40px rgba(0,0,0,.5);
    border-color: rgb(60,60,60);
    background: rgb(51,51,51);
  }
  .blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }
}

念の為ダークモード対応のスタイルも入れておきます。マウスホバーの際、ブログ背景(記事背景)が明色の場合はフワっと浮かび上がるようなエフェクト、暗色の場合は逆に凹むようなエフェクトになります。このあたりお好きに改変して頂いて構いません。また、このダークモード対応スタイルはブログカードリリース後に追加した内容なので、カードご利用中の方で必要な場合は追加してください。

リンクに対しテンプレートが何らかのスタイルを当ててくる場合がありますので、ホバー時の内容もやはり念の為追加しました。スタイルがうまく反映されない、という場合はテンプレートとの競合の可能性がありますので、反映されない指定に !important をつけるなどして対応をお願いします。
例) color: rgb(240,240,240) !important;

提供スタイルへの対応

提案としていくつかのデザインを記していますので、そちらの対応です。こちらは既存スタイルの 差し替え で対応してください。

画像をlargeに

large light
large dark
/* カード全体像 */
.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;
  transition: .2s ease-in-out;
}

.blogcard > a {
  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 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 img {
  margin-right: 5px;
  vertical-align: middle;
}

/* カードマウスホバー */
.blogcard:hover {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}

.blogcard:hover > a {
  color: rgb(51,51,51);
  text-decoration: none !important;
}

/* OSダークモード対応 */
@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);
  }
  .blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }
}

余白なし

余白なし light
余白なし dark
/* カード全体像 */
.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;
  transition: .2s ease-in-out;
}

.blogcard > a {
  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 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 img {
  margin-right: 5px;
  vertical-align: middle;
}

/* 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;
  }
}

/* カードマウスホバー */
.blogcard:hover {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}

.blogcard:hover > a {
  color: rgb(51,51,51);
  text-decoration: none !important;
}

/* OSダークモード対応 */
@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);
  }
  .blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }
}

斜め仕切り

斜め仕切り light
斜め仕切り dark
/* カード全体像 */
.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;
  transition: .2s ease-in-out;
}

.blogcard > a {
  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 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 img {
  margin-right: 5px;
  vertical-align: middle;
}

/* 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;
  }
}

/* カードマウスホバー */
.blogcard:hover {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}

.blogcard:hover a {
  color: rgb(51,51,51);
  text-decoration: none !important;
}

/* OSダークモード対応 */
@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);
  }
  .blogcard > a,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }
  .blogcard-text::before {
    background: linear-gradient(98deg,transparent 49.5%,rgb(51,51,51) 50.5%);
  }
}

デニム背景

デニム背景 light
デニム背景 dark
/* カード全体像 */
.blogcard {
  display: block;
  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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);
  outline: 2px dashed rgb(41,56,78);
  outline-offset: -10px;
  transition: .2s ease-in-out;
}

.blogcard > a {
  color: rgb(51,51,51);
}

/* 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 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:hover {
  box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}

.blogcard:hover a {
  color: rgb(51,51,51);
  text-decoration: none !important;
}

/* 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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);
    outline-color: rgb(162,175,185);
  }
  .blogcard > a {
    color: rgb(240,240,240);
  }
  .blogcard:hover,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }
}

まとめと注意点

p要素の中にブログカードを入れて(入れ子して)しまわないよう注意してくださいね。親要素がdivであれば良いんですが、pは構文エラーです。また、引用ブログカードは文章部位がblockquoteになっていますので、さらにblockquoteで挟んでしまわないよう注意。

旧ブログカードを継続利用しても何ら問題はありませんので、無理に変更する必要はありません。特にGoogle lighthouse対策など、自身でカスタマイズを加えている方は却って管理が複雑になる恐れもありますので、ご自身の環境と照らして選択を行ってください。

最後に、旧仕様ブログカードの記事リンクを貼っておきますので比較などにされても良いかと思います(以下は参考として新ブログカードで掲載しています)

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

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

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

スマートフォン・タブレットで登録したい方へ

以下の内容をコピーし、ブックマークとして登録してください。各端末やブラウザによって方法が異なりますが、iPhone Safariをサンプルにした説明が以下の通りです。

仮ブックマーク登録

あくまで仮の登録です。このページ(今見ているこのページ)で行うと円滑に進むと思います。

Safariの場合ブックマーク登録時には名称しか変更できません。名称は「ぶくま」「ブログカード」など自身がすぐにわかる名付けをしてください。

ブックマークレットのJSをコピー

以下のボタンをクリックするとクリップボードに内容が記憶されます。

ブックマークURL編集

先程クリップボードにコピーした内容をURLとして置き換えます。

カードを取得したいページでブックマークをクリック

ページが遷移してしまうようなことはありません。逆に遷移するようなことがあれば手順にミスがあります。

ポップアップの中身はちゃんとコピーしてくださいね。出ただけでクリップボードにコピーされることはありません。

Related post

Comments  47

-
2021/07/09 (Fri) 08:22

管理人のみ閲覧できます

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

bon
2021/07/10 (Sat) 12:14

ブログカードのCSSとブックマークレットを更新しました。
ブックマークレットはサクサク動いて使いやすくて本当に助かります。AkiraさんのおかげでFC2ブログユーザーがブログガードを使えていることに感謝しながら使わせてもらっています。いつもありがとうございます。

vanillaice (Akira)
vanillaice (Akira)
2021/07/10 (Sat) 23:28

To ブログカードの件 内緒さん

こんばんは ('0')/

> これはchromeのloading属性を〜

はい。そうです。現在では正規属性になっていますので追加しています。ただし未実装ブラウザ(Safariなど)では動作しません。近いうちに実装されるだろうと思います :)

> セキュリティ〜

そうだったんですね。全然知りませんでした ^^;

-----
私、Law & order(svu)をシーズン1からかかさず見てるんですが、最近シーズン1の1話目から全部見直したくなっちゃって。来週から頑張る(笑)
ただし1話だけ二度と見たくないエピソードが。あれだけはもう見られない。辛すぎる (;ωq`)
(ちなみに、いじめられっ子タイプの男の子が成人として裁かれるエピソードです)
内緒さんはsvu(special victims unit)見たことありますかね。あるとして ←
検事のBarba(俳優名わかりません)がdownton abbeyのMatthewにクリソツだと常々思ってる。マジでくっそ似てると思うんだけど(笑)

vanillaice (Akira)
vanillaice (Akira)
2021/07/10 (Sat) 23:30

To bonさん

こんばんは ('0')/
こちらこそいつもありがとうございます :)

更新して頂いたんですね。お疲れ様です。
何か不備・不都合などお気づきでしたら教えてくださいね。よろしくお願いします :)

-
2021/09/06 (Mon) 08:01

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/09/06 (Mon) 15:35

To ブックマークレット内部リンクの件 内緒さん

こんにちは ('0')/

内部リンクの場合は「付けなくとも良い」とされていて「付けてはいけない」という意味ではありませんので、どのページでもrel="noopener noreferrer"を付ける仕様です。
特に問題にはならないはずですが、特殊な事情があってどうしても外したい場合は
・ドメインの見分け
・処理の分岐
に関するJS内容を追加する必要が生じます。あるいは手動で削除するか。

一応 noopener と noreferrer の説明をすると、

【noopener】
・ window.openerを防ぐ(新規タブから元タブの操作をすることを防ぐ)
・ 新規タブで重たい処理が走っても元タブに影響しないようにする(逆も然り)

【noreferrer】
・ 元リンクの情報を渡さない(パスワード, ユーザーアカウント情報など)

なので「特殊な理由」「特別な処理」のある場合には内部リンクのrel="noopener noreferrer"を外さないといけませんが、通常はそのままで良いと思います。

-
2021/09/07 (Tue) 11:00

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/09/07 (Tue) 23:17

To ブックマークレットの件 内緒さん

こんばんは ('0')/
こちらこそいつもありがとうございます :)

べえ
2021/09/25 (Sat) 11:10

ありがとうございます

 お久しぶりです。二つのサイトで記事が行き来することが多いので、とっても重宝しています。新しいPCで記事を書くようになったので、リンクをいただきに来たら、更新されていたので使わせていただきます。

 これからもよろしくお願いします。

vanillaice (Akira)
vanillaice (Akira)
2021/09/25 (Sat) 15:16

To べえさん

こんにちは ('0')/
お手数おかけしました。こちらこそよろしくお願いします :)

-
2021/10/08 (Fri) 12:38

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2021/10/08 (Fri) 15:56

To ブログカード左側に空間 内緒さん

こんにちは。

.blogcard-image の方は良いんですけども、.blogcard-content のルールセットが2つ存在していて、先に記してある方に
margin-left: 170px;
というのがあるため左に余白ができています。このルールセットについては個人カスタマイズだと思いますので、用途を整理して不要と判断できるようでしたらmargin-leftを削除してください(というか削除しない限り余白は消えないけれど)
よろしくお願いします :)

---- アドバイス
カスタマイズ用 .blogcard-content のルールセットにある
max-height と min-height は文章量の制限のためだと思いますが、この内容では文章が長い場合に下が途切れて不格好なので、ここで制限するのではなく

.blogcard-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/* 指定したい最大行数 */
max-height: calc(13px * 1.5 * 3);/* font-size 掛ける line-height 掛ける 行数 */
overflow: hidden;
}

とした方が良いですよ。この方法を取る場合はカスタマイズ用 .blogcard-content のルールセットは不要です。

-
2021/10/08 (Fri) 18:09

管理人のみ閲覧できます

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

-
2022/10/18 (Tue) 06:06

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/18 (Tue) 14:26

To ブログカードの件 内緒さん

こんにちは ('0')/

> マウスホバー周りだけがどうしても死んでしまって〜ぴくりとも動かず色も変更されない状態〜

ちょっとこの意味がよくわからないのですが、色の変更というのは具体的にどの部位のことでしょうか。ブログカード内の色彩がマウスホバーで変更されるような仕組みにはなっていませんので、例えば背景色を変化させたいなどのご要望がある場合は個人カスタマイズで行って頂く形になります。

-----
内緒さんがご利用中のテンプレートは黒背景なので、CSSを一部変更してください。でないと文字が読めません。
修正点を以下の通り記しますので変更してくださいね。


.blogcard のルールセット内
background: dark;

darkというカラーネームはありませんので、正しいカラーネームあるいはカラーコードに書き換えてください。テンプレートの背景色と同じにするならば #222 または rgb(34,34,34) です。


.blogcard > a のルールセット内
color: rgb(51,51,51);

太字部位のカラーコードを明色(例: white)に変更


スタイルシート最終に

.blogcard > a:hover {
color: カラーコード;
}

を追加。ここでのカラーコードは②と同じく明色の指定をしてください。同じ色でも構いません。テンプレートの指定でテキストが茶色のような視認性の良くない色になってしまいますので必須指定です。

-----
当ブログでの技術的な記事は全てHTML5以降、living standard準拠になっています。内緒さんがご利用中のテンプレートは現在のweb技術水準を満たしていない古い技術のものなので、最新技術を用いたテンプレートへの変更をおすすめします。
でないと今後、今回のようなブログカードなど新しい技術を取り入れるのが非常に困難になります。一度ご検討ください。

テンプレート変更の基準は共有テンプレートであれば2015年以降にリリースされたものですが、テンプレートは作者によるアップデートが入ると公開日の日付が変わってしまいますので、目安として共有テンプレートの12ページ目よりも前にあるものを選択されればほぼhtml5以上の技術だと思います(2022年10月18日現在, 絶対ではありません)

-
2022/10/19 (Wed) 04:21

管理人のみ閲覧できます

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

vanillaice (Akira)
vanillaice (Akira)
2022/10/19 (Wed) 16:23

To ブログカードの件 内緒さん

こんにちは ('0')/

> ②~③、修正を行いました〜

えっと、修正されていないと思います。内緒さんはダークモードをご利用ということですが、訪問される方が必ずしもダークモードにしているとは限りません。なのでダークモード以外の対応もしておく必要があります。
内緒さんのブログ背景が黒なのはダークモードがONになっているからではなく元々が黒背景なので、通常のモードの方を全て色反転させなければダメですよ。

> マウスホバーを行った際にカードを浮き上がらせる等、異なるアニメーションをこちらのブログカードに組み込んで使用することは可能なのでしょうか?〜

元々浮き上がるようなデザインになっています。内緒さんの場合は黒背景ですから黒に黒のシャドウでは相当強く(暗く)シャドウを入れないと浮き上がるようには見えません。黒シャドウの色を強くするか、背景色の黒の方を一段明るくするか、シャドウの色を白系統に変更するか、です。
記事内で言及している通り、デフォルトでは
通常(白背景を想定) --- 浮き上がる
ダークモードON --- 沈む
というエフェクトを付けてあります。浮いて見えない原因は
・ダークモード状態で見ている
・黒同士なので気づいていない
のいずれかです。

-----
rgb(white)
というカラーコードはありません。whiteはカラーネームですから
color: white;
ならOKです。rgb値を使う場合は
color: rgb(255,255,255)
が白です。

-----
「スタイルシートの最終」というのは @media (prefers-color-scheme: dark) のルールセットの中に入れるという意味ではありません。全ての内容の一番後ろに入れるという意味です。

×
/* OSダークモード対応 */
@media (prefers-color-scheme: dark) {
.blogcard {
border: 1px solid rgb(68,68,68) !important;
box-shadow: 0 10px 6px -6px rgba(0,0,0,.7) !important;
background: rgb(51,51,51) !important;
}
.blogcard > a,
.blogcard:hover > a {
color: rgb(240,240,240) !important;
}
}


/* OSダークモード対応 */
@media (prefers-color-scheme: dark) {
.blogcard {
border: 1px solid rgb(68,68,68);
box-shadow: 0 10px 6px -6px rgba(0,0,0,.7);
background: rgb(51,51,51);
}
}


.blogcard > a,
.blogcard:hover > a {
color: rgb(240,240,240);
}

一度デフォルトのCSS内容に戻してから作業されてはいかがでしょうか。

-----
内緒さんがすべき作業

1. ダークモードの内容を取り除く(元が黒なので対応する意味が無いため)
2. デフォルトの色指定を全て反転させる(黒系から白系へ)
3. 指南通りに追加内容を正しい位置に正しく記載する

-----
テンプレートの件ですが、内緒さんのテンプレートは固定幅です。なのでスマートフォンでは全く別の、こちらは白背景のテンプレートで表示されています。
PC, スマホ各テンプレート両者間に互換性はありませんので、スマートフォン版テンプレートでも作業を行う必要があります
現時点でスマホではデザイン適用されていません。

テンプレートの再選択をおすすめしましたが、昨今ではほとんどのテンプレートがレスポンシブウェブデザインでPC, タブレット, スマホ など全デバイス適用設計されています。内緒さんのPCテンプレートはスマホ非対応です。
レスポンシブを採用されれば今回のような作業の一度で済みます。現状を維持されるのであればスマホテンプレートでもう一度作業が必須です(こちらは白背景で設定, ダークモード非対応なので取り除く)

また、現状で50あまりのJSエラーが存在してるためページの表示も重たいです。私からのアドバイスはこれで最後にしますので、諸々お考え併せの上ご自身でお決めくださいね。

-
2022/10/19 (Wed) 22:29

管理人のみ閲覧できます

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

ittsuie
2022/11/16 (Wed) 06:22

ブックマーク登録したブログカードと引用ブログカードが機能してくれません

おはようございます
いつもお世話になりっぱなしのittsuieです

今日記事を書いていて、いつものようにブログカードを貼り付けようとしたところ、コピーする画面も出ずで、再度Akiraさんのページから登録し直しましたがやはり機能してくれません

Chrome・Edge・Firefoxで試しましたがどれもダメでした

体調優れない中申し訳ありません
Akiraさんの環境では問題無いでしょうか?

ぼっちん
2022/11/16 (Wed) 11:30

おや?

何やら、ブログカードのHTMLを取得するブックマークレットの動作途中の経路が変になっている気がしますねぇ。

*追記
どうやら、途中経路の j.mp の短縮ドメインが Response Code 500 のサーバーエラーを発しています。
一時的であって、復旧すれば良いんですが…… ちょっと心配  (^^;; アセ

ittsuie
2022/11/16 (Wed) 21:52

To ぼっちんさん

ぼっちんさんこんばんは!
僕の環境だけでは無い事が解ってホッとしました

回復するまでは、古い記事のブログカードをコピペして、内容をそのページに変更して対処します
ぼっちんさん有難うございます!!

ぼっちん
2022/11/17 (Thu) 09:24

続報

う~ん、だいぶ重大な方向になっている気がします。
ブックマークレット経路の短縮URL j.mp/1bPoAXq が404Errorです。
Akiraさんの調査を持つしかないようです。

vanillaice (Akira)
vanillaice (Akira)
2022/11/20 (Sun) 17:18

To ittsuieさん, ぼっちんさん

こんばんは ('0')/
まとめての返信ですみません。

わー、マジですか。間の悪い時にコメント拝見してしまった ^^;
食事の支度など諸々終わったらすぐ修正にかかりますね。
短縮URLのサービスが軒並み終了傾向にあるのでjQuery外します。ご迷惑おかけします。しばしお待ちくださいね。7時ごろまでにはできるかな。たぶん ^^;

vanillaice (Akira)
vanillaice (Akira)
2022/11/20 (Sun) 17:19

To vanillaice (Akira)さん

あーしかもブログ内返信してもーた。お返事管理画面に届かないですよね。重ね重ね申し訳ない。

ぼっちん
2022/11/20 (Sun) 20:48

To Akiraさん

ブックマークレットの修正、おつかれさまでした~ ^^
jQueryも外してくださって、d(-_^) Nice!です(笑)
お返事ご無用ですからね~ ^^

vanillaice (Akira)
vanillaice (Akira)
2022/11/20 (Sun) 23:44

To ぼっちんさん

記事でお知らせ頂いてたんですね。ご協力ありがとうございますー :)

で、検索結果に関する記事も拝見しました。私もおかしいと思っていて、きっかけはテンプレートユーザーさんからのコメント内容なんですが、特に深く検証することもなくお返事してしまったんですね。
ところがその後、あれ?と思ったのは、google fonts で検索するとトップが出てこないんです。aboutか何かのページが検索最上位になっちゃってる。
パーソナライズド検索(何度も検索したり閲覧するサイトが個人環境でのみ上位になる「なんちゃって検索上位」)の影響とも言えないんですよね。だってaboutのページなんて開いたことないし(笑)
逆に海外のサイトですが良く閲覧していて上位だったはずのサイトが全然出てこなくなっちゃってて。ブクマしろって話なんですが (∵`)

なんかよくわかりませんが、「あれー?」とは思いました。深く追求しようとは思わないのでアレだけど(笑)
コアアップデートは例年通りなら3回あると思うので、今年はたぶん9月が2回目だったかな?だから12月とかにまたあるかも。また変動があるかもしれませんね (´・ω・`)

vanillaice (Akira)
vanillaice (Akira)
2022/11/20 (Sun) 23:55

To ittsuieさん

お返事遅くなりました。修正しましたのでお手数ですがブックマークレットの再登録をお願いします :)

参考記事: ブロクカードのブックマークレットを修正しました
https://vanillaice000.blog.fc2.com/blog-entry-1127.html

ぼっちん
2022/11/21 (Mon) 08:39

To Akiraさん

お返事ありがとうございます。
弊ブログ記事「FC2ブログ全体のGoogle検索結果が最近異常ですよ」を読んでくださったんですね。
Akiraちゃんにもその異様さを認知して戴けて良かったです(笑)
まぁ、仰るように、この件は次回のコアアップデートを待つしかないですよね、私もそんな認識でおります。
個別記事にはBOTもキチンと毎記事クロールに来ておりますから、ほんとは心配はしてないんです (•‾⌣‾•)にこ♪

お返事ご無用ですからね~ ^^

ittsuie
2022/11/21 (Mon) 09:33

To vanillaice (Akira)さん

体調優れない中申し訳ありませんでした
速く完治する事を願っております

saito
2022/12/15 (Thu) 17:38

サムネ画像について

ブログカード化機能を大変便利に使わせて頂いております。ありがとうございます。
1点、うまく作動しない点のご相談です。
以前はブログ毎に設定してあるサムネ画像を自動で引用してカード化してくれたのですが、現在はどのブログ・ページをカード化しても同じサムネ(サイト全体の画像として設定しているもの)しかカードに表示されません。内容を見てみると、img srcのURLがすべて同じものしか引っ張れなくなっているようです。
改善点などはありますでしょうか?

ぼっちん
2022/12/16 (Fri) 13:53

To saitoさん

saitoさん、はじめまして

最終更新 2022.11.20 に 「手順① ブックマークレット再登録」 に於いて、ブログカードのHTML取得の為のブックマークレットの仕様が変更になっておりますが、旧ブックマークレットの削除と、新しいブックマークレットの「再登録」は済ませましたでしょうか?
まだでしたら、その作業をなさってみてください。

saito
2022/12/16 (Fri) 22:58

To ぼっちんさん

ありがとうございます。
削除と再登録は済ませております。
新バージョンに変わってからサムネの取得ができなくなっている模様です。

ぼっちん
2022/12/17 (Sat) 08:51

To saitoさん

saitoさんのブログURLが提示されておりませんが、質問時のAkiraさんの希望として「ブログアドレスの記載なし という方へはお答えのしようがありません」となっております。
つまりは、直接その不具合の様子が視認出来ないと「推測でしか返答できない」ので、最終的な答えに辿り着くのに余分な手間暇が掛かって、結局遠回りとなってしまう為です。

saitoさんが言われます「ブックマークレットが新バージョンになってから発生した」と言うその症状は、デフォルトでは私も周りのお友達にも現状では見られない症状です。
ブックマークレットは何らかのカスタマイズをされましたか?
もし、カスタマイズなさっておられるのでしたら「デフォルト」のままでお試しください。

デフォルトのままでその不具合が発生しているのでしたら、どうぞそのブログカードの表示状態を見られるようにしてみてください。

第三者(saitoさんのブログ以外)のブログの「トップページと記事ページ」を「引用ブログカード」にてHTML取得して、それらを直接見られるようになさってみてください。

よろしくお願い致します。

Mimizk
2023/01/04 (Wed) 01:32

アンダーバー表示を変更したい

お久しぶりです、こんばんは。
明けましておめでとうございます。

さて、昨年はブログをたくさんさぼりました。
正月休みにまとめて書こうとして、ブログカードが生成できないことに気づきました。
こちらを発見して、スタイルシートの更新などしてみたところです。
ブックマークレットも新しいものを登録しました。

新しいスタイルシート記述は、文字色だけ変更しました。
通常の文字色と、マウスホバー時の文字色、両方とも変更しました。

さて、今回の新しいブログカードは、スマートフォンの事情を鑑みて、リンクが1つに統一されるよう変更なさったとのこと。
さっそく新しいブログカードを生成して表示させてみたのですが、特に、引用本文にアンダーバーが表示されていて読みにくさを感じました。

1) マウスホバーしていない状態の時、記事タイトル・引用本文・ブログURL の全てにアンダーバーが表示される
2) マウスホバーすると、アンダーバーが全て消える

これが現在の状況です。一応、テスト用のページを投稿しておきました >https://bit.ly/3jOTC1j
私としては、アンダーバーがついた状態ではあまりにも引用本文が読みにくいため、アンダーバー表示が現れる条件と消える条件を逆転させたいところです(マウスホバーしていない状態 → アンダーバー無し・マウスホバー時 → アンダーバー表示)。
変更することはできるでしょうか?

Mimizk
2023/01/04 (Wed) 12:20

No title

すみません、一晩寝て頭スッキリさせたら自分でできました!
本年もよろしくお願いします。

Mimizk
2023/01/05 (Thu) 23:31

ブログカードの文章をタイル表示に読ませない方法はありますか?

こんばんは。
先日はお騒がせしました。

私は、ブログの頭ページにタイル表示させるデザインを使わせてもらっています。
この時、投稿する記事の最初にブログカードを載せてしまうと、タイル表示に掲載される “冒頭文” が、その記事のものではなく、過去の記事のものになってしまいます。これを避ける方法はないでしょうか?

これまでは、できるだけ何かしらの文章を書いてからブログカードを使うといった単純な対策でごまかしてきたのですが、それは実のところちょっと回りくどい書き方であり、本当はいきなりブログカードを載せたいと思う場面が多いです。
そういう html 的な方法は何かないでしょうか?

vanillaice (Akira)
vanillaice (Akira)
2023/01/07 (Sat) 15:09

To saitoさん, ぼっちんさん

お返事大変遅くなりごめんなさい。

ぼっちんさんが代弁してくださった通り、現段階で「原因はこれです」と特定することはできません。
何故ならsaitoさんがご利用のブログサービスも不明ですし、症状を確認できるページも不明なので検証材料がありません。
ブログサービスの仕様の問題かもしれませんし、ブログ設定の問題かもしれませんし、正規URLで取得していないのかもしれませんし、などいくらでも考えられます。
URLの無いご質問は繰り返しの多いやり取りになってしまうためURL記載必須をお願いしています。よろしくお願いします。

ぼっちんさんご協力ありがとうございます :)

vanillaice (Akira)
vanillaice (Akira)
2023/01/07 (Sat) 15:27

To Mimizkさん

お返事遅くなりました。

> 本当はいきなりブログカードを載せたいと思う場面が多い〜

これなんですが、「ブログカードの仕様」云々ではなく「記事の書き方に関する方針」と「FC2ブログの仕様」に係る問題なので説明します。

まず、ブログカードというのはOGPというのを取得して表示させます。OGPは例えばMimizkさんの記事が第三者にtwitterなどのSNSで紹介されたとしますよね。その際その紹介された記事の代表となるのがOGPです。
代表タイトル(記事タイトル)があり、代表画像があり、代表文がある、という形です。
その紹介される記事の代表文が「引用文」であることが正しいのかどうか、です。

FC2ブログの現状では記事ごとにOGPを指定するという機能はありませんので、「『本文』に記載された内容の最大200文字までがOGPになる」という明確な規定があります。過去の記事あるいは第三者の書いた内容をこの「本文200文字以内」に記してしまえばそれがOGPになり、また記事の概要文としてトップページに記載されることになる、というのが仕様です。
ここでも同じく過去の内容や引用文が記事の代表となって良いのか、という点に留意してください。

OGPへの選出やトップへの文章掲載を避け、かつ、どうしてもブログカードを一番最初に掲載したい、という場合は『本文』には何も書かずに『追記』へ記載することになります。この場合はOGP文が無くなると同時にトップの概要文も失われます。
ブログカードはあくまでもOGPと結びつけるというのが本来の有り方ですから、FC2の仕様やOGPに関する理解も併せてユーザーがコントロールするしかありません。

aki
2023/01/08 (Sun) 00:27

いきなりブログカードを載せる件について

Akiraさんのコメントの後で恐縮なのですが、私の備忘としてテストした方法が有るのでご参考まで。
邪道かもしれませんが、display:flex で要素の上下を逆に変えるという方法です。
記事を書く際に(HTML編集)で

<div style="display:flex;flex-direction:column;">
<div style="order:2;">2番目に表示したいもの。記事の文章とか。descriptionに載ります。</div>
<div style="order:1;">1番目に表示したいもの。ご質問の件ではブログカード。</div>
</div>

このようにすると表示は逆になりますが、description は2番目に表示したい文章の文頭になります。
SEO的にどうなのかは分かりません。m(__)m

vanillaice (Akira)
vanillaice (Akira)
2023/01/08 (Sun) 01:27

To akiさん, Mimizkさん

こんばんは ('0')/

アイデアをありがとうございます。
SEO的には問題無いと思います。2番目表示内容の文章200文字以上に留意して書けるのであれば、また、メンテナンス面で注意が必要、という条件ですがこれなら表示上はうまくいくのではないでしょうか。
どうしても、という場合には試しても良いかもしれません。

まずはその前にOGPの役割をしっかり把握して頂いた上で ^^;
akiさんご意見ありがとうございます。Mimizkさん、いかがでしょうか。

----- 追記 同日

今akiさんの提案してくださった内容も含め記事にしましたので、akiさんの方で何か問題ありましたら(ご自身で記事を書く予定がある 等)内容を修正しますのでご連絡ください。
Mimizkさんがhtml作成など面倒でなければakiさんの提案が一番良いかもしれませんよね。記事内容に目を通して頂いて、OGPを理解した上で結論を出されると良いと思います :)

参考記事: FC2ブログでブログカードを掲載する際の注意点
https://vanillaice000.blog.fc2.com/blog-entry-1132.html

aki
2023/01/08 (Sun) 13:18

To vanillaice (Akira)さん

こんにちは。
表示順の変更について記事内に紹介して頂き大変光栄です。(^-^)
私も「こんな感じに表示するにはどうしたら良いだろう?」と考えて(ブログカードでは無いですが)現在の記事で利用してみました。
こちらの記事で詳しく書かれてますので自身のブログに方法を掲載する事は無いと思いますが、もし書く事が有ったらリンクさせて頂きますね。^^;
改めまして、記事での紹介 有難うございました。今後とも宜しくお願い致します。m(__)m

Mimizk
2023/01/08 (Sun) 13:56

To vanillaice (Akira)さん

aki さんもありがとうございました。

実のところ私が期待したのは aki さんが示してくださったものが近いです。教えてくださった方法を試してみたいと思っています。
一方、Akira さんがお示しになった3種の方法のうち、① iframe のブログカードを使う こそが、目的だけみれば最適です。目的だけなら・・・。デザインを変えることができないという点に目をつむることができませんが・・・。

「そんな書き方するのがまずだな」というお叱りも尤もだとは思うんですが、期間をあけて、4本とか5本にまたがって書いているような記事では、どうしても “前回の内容” を最初にぽんと置いておきたい動機があります。
それというのは、実は1回1回の記事で内容が全く完結していないものが一定数あります。
例えば物作りの記事であれば、前回までに下処理を済ませ、今回で色を塗って、次回仕上げで完結、とかになります。
全体がどういうものであるかは初回とか最終回に書かれるべきもので、毎回記載するのは、少なくとも私の主観では逆におかしいです。
そうなると「前回から引き続きやっていきます~」みたいなかたちに落ち着く・・・ 人は・・・ 多いんじゃないかなと私は思います。そこに、「前回はこれです」「こういう内容まで進みました」とブログカードをぽんと置いておくと、これ以上なくシンプルなんです。
それは 洗練されたブログ文化の書き方 に沿うものでないのだ、というのはその通りだろうと思いますし、「どうであれお前いま FC2 で書いてるんだから FC2 で最適化した方法を選択しろよ」という意見にも同意するほかありません。誠にご迷惑おかけします・・・。

vanillaice (Akira)
vanillaice (Akira)
2023/01/10 (Tue) 19:42

To Mimizk

こんばんは ('0')/
お返事遅れがちですみません。

仕組みや法則、webでの一般論(SEOを含めた観点)を理解した上で、それでも必要だという場合は個人の結論・決断ですから第三者がどうこういうことではないですし、強制あるいは矯正されるべきことでもありません。
「知っているけどそれでも必要」という場合は良いですが、「全然知らなかった」ではいけませんので、そのための説明です。

iframeのものをご利用になれば煩雑なhtmlに悩まされることもないですし、一番楽ではないかな、と思います。htmlどんと来いの場合はflexでの順序入れ替えが理にかなっていますね。掲載順序を含め見た目上の操作を行うというのはごく当たり前に行われていることですし、SEO的になんら問題の生じない方法です。

あとはご自身でお決めくださいね :)

vanillaice (Akira)
vanillaice (Akira)
2023/01/10 (Tue) 19:44

To akiさん

ご協力ありがとうございます :)
極論を言ってしまえば「FC2が定型文システムを提供をしてくれるのが一番良い」ってことですよね。リクエストにもあがっていたような?はてなブログにあったような?違ったっけ ^^;

海辺
2023/06/19 (Mon) 13:28

iPhoneで使うとコードが1000文字で切れる

iPhoneのSafariにブックマークして使ってますが1000文字で切れてしまいますね。機能するページとしないページがあります。

vanillaice (Akira)
vanillaice (Akira)
2023/06/19 (Mon) 16:29

To 渡辺さん

こんにちは ('0')/

> iPhoneのSafariにブックマークして使ってますが1000文字で切れてしまいますね〜

safariでのブックマークレット登録の仕方を追記しましたのでご覧ください。

> 機能するページとしないページがあります。〜

機能するページ = OGP設定されているページ
機能しないページ = OGP設定されていないページ

OGP設定するかしないかは管理人の意志であり、閲覧者が自由に扱えるものではありません。

あみきん
2023/08/29 (Tue) 08:35

Akiraさん
リンクを入れる窓が表示できました~💓
ありがとうございます(o*。_。)oペコッ

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