下書きのまま放置していました。すみません ^^;
弊ブログ提供の ブログカード、デフォルトでは各タイトルや画像がリンクになっていますが、これを全体リンクに変更する方法です。
2020.6.3
コード内容を一部追加しました。追加項目は /* 任意 とある部位です。
はじめに
今回編集するのは CSSのみ です。ブックマークレットに手を加えたり等はしませんので、スタイルシートに集中してください。
また、本カスマイズを利用することで、みなさんの独自カスタマイズに影響が出る可能性がありますので注意してください。デフォルトスタイルのままご利用の方は問題ありません。
CSS
デフォルトのブックマークレットはa要素がいくつか入っていますので、最初から全体リンクにしておけば良かったなぁ、と思うんですが後の祭り ←
最近は私自身が スマートフォンでの操作性 をより強く意識するようになりまして、やっぱりタップするときはリンク範囲が広い方が良いですよね。
【デフォルト】
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
vanillaice000.blog.fc2.com【編集後】
SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・｀) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...
追加CSS
.blogcard {
position: relative;
}
/* 任意(できればデフォルトCSSの同ルールセット内の記述を変更) */
.blogcard-description {
margin: 1em 0 0 !important;
}
/* 任意ここまで */
.blogcard-footer {
height: calc(12px * 1.2 * 2 + 10px);
}
.blogcard-footer a {
display: flex;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 10px 10px;
line-height: 1.2;
word-break: break-all;
transition: .3s ease-in-out;/* 不要な場合は削除 */
}
.blogcard-footer a:hover {
box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}
デフォルトCSSが記載されていることが前提で、追加です。
注意点
最下部にファビコン付きでURLが記載されますが、この高さを予め 2em に固定しています。アドレスが長くて2行に渡る可能性を考慮。さすがに3行は無いと思いたい (´・ω・｀)
1行の場合はちょっと先行要素との距離が大きいかな、と思いますがそこはお任せします。1行に指定する場合は height: calc(12px * 1.2 + 10px); に変更。まぁでも2行取っておいた方が安全です。
スマホはさておき、パソコンではマウスホバーですぐにクリックできることを示唆するため、何らかのアクションが有ったほうが良いと思います。.blogcard-footer a:hover がその内容で、box-shadow に調整を入れています。不要な方は削除して頂いて構いません。
/* 不要な場合は削除 */ としてあるのは、ブログカードに限らずページ内に存在するリンクにもともと transition が指定されている場合などは不要ですから削除してください。
/* 任意(できればデフォルトCSSの同ルールセット内の記述を変更) */ の部位ですが、デフォルトCSSの方に同じルールセットがあり、marginには !important が付いています。優先最上位指定をさらに同じレベルの指定で上書きする、というのはちょっとアレなので、できればデフォルトの方を変更されると良いと思います。
別デザインの場合
弊ブログ提供ブログカードのデザイン提案【随時追加】
デザインカスタマイズについてのご相談がありましたので、いくつか準備してみました。...
こちらで紹介しているデザインを採用されている方は以下の内容をご利用ください。
画像をlargeに
追加デフォルトCSSでOKです。
余白なし
.blogcard-footer {
position: static;
}
.blogcard-footer a {
display: flex;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 20px 10px calc(30% + 20px);/* 画像が右の場合は 0 calc(30% + 20px) 10px 20px に変更 */
word-break: break-all;
transition: .3s ease-in-out;
}
.blogcard-footer a:hover {
box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}このデザインだと2行リンクは厳しいかもしれません(タイトルの長さによります)
斜め仕切り
.blogcard-footer {
position: static;
}
.blogcard-footer a {
display: flex;
align-items: flex-end;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0 20px 10px calc(40% + 10px);
word-break: break-all;
transition: .3s ease-in-out;
}
.blogcard-footer a:hover {
box-shadow: 0 10px 10px 2px rgba(0,0,0,.1);
}デニム背景
追加デフォルトCSSでOKです。
まとめ
夜中の3時ですがワタクシこれから釣りに行ってまいります。なんでだよ。行きたくない… （￣∀￣；）
There are no comments yet.