この記事では画像やブログカードのサムネイルがリンク切れしてしまった時のデザインをコピペでOK簡単なCSSコードで自由自在にスタイリングする方法をご紹介します
「画像のリンク切れ」とは
画像は、画像ファイルへのパス（ネット上の住所のようなもの）をリンクさせることで表示させているが、そこに画像ファイルを探しに行ったけれど無かった場合、画像を表示することができず「リンク切れ」となる
ブログカードのサムネイル画像がリンク切れとなってしまっている例
画像が表示されるべき場所の左上に「山と雲？」のアイコンが表示されている。普通に画像を埋め込んでいるうちはなかなか出会わないかもしれないが、上のようにサムネイル画像を自動取得するブログカード内で度々発生する
「リンク切れ画像」をスタイリッシュに
今回やるのは上の状態を下のようにしようということ
※スタイルの適応はブラウザや環境によります。このスタイルが適応されるのは主にDesktopやAndroid環境下のChromeやFirefoxであり、SafariやiOS環境下においては適応されません
cdnjs - The #1 free and open source CDN built to make life easier for developers
Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5...
cdnjs.com
実際の「サムネリンク切れ」ブログカード
実際の「リンク切れ」画像
ユーザビリティを意識して「画像が見つかりませんでしたよ」というメッセージを添える。という意味もあるが、まずは見た目。この「山と雲？」アイコンで多くの人は察するかもしれない。しかし同時に「ガッカリ」もする（少なくとも自分は萎えてしまう）画像はデザインの一部。観てて気持ちがいい。これも立派なユーザビリティではないだろうか
【コピペでOK】リンク切れ画像対策CSSコード
単色塗りつぶし
完成イメージ
img:before {
content: "";
display: block;
height: 100%;
background: brown;
}
上のコードをCSSにコピペするだけで、まずはスッキリさせることができる。下段のbackgroundはお好みで変えてもらって大丈夫。画像もいけるかな。今回はなるべく負荷かけたくないので単色（上ではブラウン）
尚、今回はブログカードを例にしていますが、上のコードを追加すると全画像のリンク切れに対応するはずです。もし「ブログカードのみ」など細かく対応をわけたい場合は、ご自身のサイトのブログカードに付与されているクラス名などで絞り込んで指定してください
メッセージつき
完成イメージ
img:before {
content: "No Image\AWas Found";
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background: #212121;
padding: 0.7em 1em;
color: #fff;
font-size: 0.7em;
font-weight: 400;
line-height: 1.8;
text-align: center;
border-radius: 5px;
white-space: pre;
}
上のコードをお好みで書きかえてご利用ください
「リンク切れ画像」ビフォーアフター
【上：ビフォー】→【下：アフター】
コメント