FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。
- ブックマークレットソースコード内の短縮URLが機能しない件を修正(pure JSへ書き換え)
FC2ブログユーザーの場合は当該ブログカード記載ページで「タグをリンクにする」機能は利用できませんのでご注意ください。
メリットとデメリットについて
まず初導入の方へ向けて注意点や特徴を再掲しておきます。
ブログカードの有名どころ「はてなブログカード」「Embedly」と大きく違う点は APIやJSを利用していない です。
メリット
- 記事内でスクリプトを利用しないため描画が速い
- html内容が出て来るので概要文字数の調整が容易
- デザインのカスタマイズが容易
デメリット
- htmlが出て来るので編集画面が煩雑になる
- 毎回アクセスするわけではないので出典元の修正や変更に対応できない
APIを使うとページを開く度に情報を取得しますので、元記事に変更などがあった場合それが反映されます。その代わり描画が遅くなりがち。ですから一長一短というところでしょうか。
変更理由
大スマートフォン時代の到来 ということで、旧来の内容ですとどちらかと言うとパソコンの親和性を重視しています。具体的には リンク にあたる部位ですね。通常は該当するテキストがリンクになる、というのが一般的です。例えば以下のような形。
詳細は こちら からご覧頂けます。
「こちら」の部位がリンクになっています(サンプルなので見た目だけを模した空リンクです)
なので旧来のブログカード内には
- 記事タイトル
- ファビコン横サイト名
- サムネイル画像
と、カード内に3つのリンクを内包しています。遷移先は全て引用元の記事なんですが3箇所に分離させてある、ということですね。ところがスマートフォンというのはとにかく タップ範囲が複雑すぎないこと が大事で、大雑把に言えば カード全体がひとつのリンクになっていれば良い という感覚です。その方が押しやすいですし、細々複雑なことをしなくて済みます。
そういった背景がありますので、この機会に カード全体をリンクとする再形成 を行いました。
旧ブログカードのスタイルが崩れてはいけませんので、CSSと大まかなhtmlについては旧作をできるだけ踏襲しています。ただし CSSの若干の追加 のみ必要となります。そしてもちろん ブックマークレット再登録 ですね。この2手順が必須です。
新しいものに切り替えたら既存カードのレイアウトが崩れた、ということにならないよう配慮していますが、実際ご利用頂いて不備があればお知らせください。よろしくお願いします。
変更概要
- アウトラインを div から figure に変更
- 画像の遅延読み込み loading="lazy" の追加
- 画像にwidth height 属性を追加
- サムネイル画像の alt 属性に記事タイトルを指定
- a要素に aria-label を追加
- フッター部位ブログタイトルを他フォントと同色に
意味論的にはこういった変更を入れてあります。リンクは別タブで開かれます。その際の rel="noopener noreferrer" についてはもうほとんど不要なんですが念の為入れておきます。フッターブログタイトルについて旧来は少し色を落としていましたが、全体リンクなので「個別に押せそうな印象の色分け」は取り除きました。もちろん必要であれば個人カスタマイズを入れてください。
手順① ブックマークレット再登録
既存のブックマークレットを削除し、改めて以下の内容を登録してください。不安のある方は既存内容の名称を変更しておくなどして共存も可能です。以下のテキスト部位をマウスドラッグし、ブラウザのブックマークバーへドロップします(ドラッグ&ドロップ)
手順② CSSの追加
旧ブログカード登録済の方
既にブログカードをご利用中でテンプレートのスタイルシート内に既存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に
余白なし
斜め仕切り
デニム背景
まとめと注意点
p要素の中にブログカードを入れて(入れ子して)しまわないよう注意してくださいね。親要素がdivであれば良いんですが、pは構文エラーです。また、引用ブログカードは文章部位がblockquoteになっていますので、さらにblockquoteで挟んでしまわないよう注意。
旧ブログカードを継続利用しても何ら問題はありませんので、無理に変更する必要はありません。特にGoogle lighthouse対策など、自身でカスタマイズを加えている方は却って管理が複雑になる恐れもありますので、ご自身の環境と照らして選択を行ってください。
最後に、旧仕様ブログカードの記事リンクを貼っておきますので比較などにされても良いかと思います(以下は参考として新ブログカードで掲載しています)
ブログカードのブックマークレットを作成しました
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
There are no comments yet.