ブログカードを全体リンクにする【CSSのみ】

ブログカードを全体リンクにする【CSSのみ】

カスタマイズ
2020/06/03 17
vanillaice (Akira)
vanillaice (Akira)
Instruction CSS ブログカード

下書きのまま放置していました。すみません ^^;
弊ブログ提供の ブログカード、デフォルトでは各タイトルや画像がリンクになっていますが、これを全体リンクに変更する方法です。

2020.6.3
コード内容を一部追加しました。追加項目は /* 任意 とある部位です。

はじめに

今回編集するのは CSSのみ です。ブックマークレットに手を加えたり等はしませんので、スタイルシートに集中してください。

また、本カスマイズを利用することで、みなさんの独自カスタマイズに影響が出る可能性がありますので注意してください。デフォルトスタイルのままご利用の方は問題ありません。

CSS

デフォルトのブックマークレットはa要素がいくつか入っていますので、最初から全体リンクにしておけば良かったなぁ、と思うんですが後の祭り ←
最近は私自身が スマートフォンでの操作性 をより強く意識するようになりまして、やっぱりタップするときはリンク範囲が広い方が良いですよね。

【デフォルト】

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

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

【編集後】

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

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時ですがワタクシこれから釣りに行ってまいります。なんでだよ。行きたくない… ( ̄∀ ̄;)

 17

There are no comments yet.
こん
お魚、釣れましたか?

Akiraさん、こんにちは~。
いつも有益な情報提供をありがとうございます。
早速修正いたしました。

>さすがに3行は無いと思いたい

すみません。
アドレスは大丈夫でしたが、記事タイトルが3行になると(爆、
レスポンシブの幅によっては重なってしまうところが出るようです。
アドバイス頂けたら幸いです。急ぎません。

blockquote~(特にcite属性)の件も
早く使ってみたくてうずうずしてます(笑。
過去記事ならありそうだと昨日探してみましたが、なかなか見つかりません(爆。

Akiraさんが釣りに行かれると聞き、
釣り好きなフォイルの姿(牧歌的な風景)を思い出してしまいました。ではでは。

2020/06/03 (Wed) 07:28
vanillaice (Akira)
Akira
To こんさん

おはようございます ('0')/

釣れません(笑)
でも楽しかったです。次男が釣りにはまってて巻き込まれた ( ̄∀ ̄;)

-----
CSSの方ですが、もしかするとサイドメニューに掲載されているカードのことですかね。今回の内容は「画像とテキストの左右入れ替え」「色調変更」以外に少しでもカスタマイズしているとそのまま使うことができません。
この内容での論理上、リンク自体が3行以上にならない限り重なりは起こらないはずなので、デフォルトCSS内容の方をカスタマイズしている、という推測になります。

今ちょっと眠たくてコード見られないので後ほど検証しますね。ごめんなさい ( ̄∀ ̄;)
取り急ぎのお返事です。

2020/06/03 (Wed) 10:04
ススム
使わせていただきます

おはようございます。
Akiraさんが書かれているように、スマホではカード全体の方が便利だと思います。
PCでのホバーアクションもいい感じですね、こちらも参考にさせていただきます。

2020/06/03 (Wed) 10:37
bon
私も使わせていただきます

Akiraさんこんにちは。
記事最後の「まとめ」がまとめじゃなくて笑ってしまいました(^^)

私も早速使わせていただきます。ブログカードはデフォルトスタイルで完璧なので私は特になにもしていませんでしたが、どこでもタッチできるのは利便性がアップするので嬉しいです。いつもありがとうございます。

transition ですが、Mystyleテンプレート内に8つほど発見できます。ガイダンスに従い削除しても良いですか?すみません、不安なので確認してからにします。

2020/06/03 (Wed) 13:00
こん
解決できました(多分

Akiraさん、釣りを楽しまれたとのこと何よりです。
暑くなってきましたものね~羨ましい(笑。

で、お察しの通り
「サイドメニューに掲載されているカードのこと」です。
いつも言葉足らずですみませんですm(__)m。

>デフォルトCSS内容の方をカスタマイズしている

つもりはさらさらなかったのですが(そもそも技がない・爆)、
また無意識のうちに?何かやらかしたかもしれないと思い、
ご案内いただいているデフォルトのCSSから再確認してみました。

案の定、いったいどこからコピーしたんだか、
大分あちこち違っていました(汗。
文頭は「position: relative;」から始まり、
/* float親要素 */もなかった(・・?

というわけで、
再度デフォルトからコピーさせていただき、
無事解決にいたりました~多分(苦笑。

大変お騒がせいたしましたm(__)m。
でもAkiraさんとお話しできて嬉しかったです(^_-)。

2020/06/03 (Wed) 14:40
vanillaice (Akira)
Akira
To ススムさん

ススムさん、こんにちは ('0')/

お役に立てたなら幸いです :)
コード内容を一部していますのでご確認をお願いします。

2020/06/03 (Wed) 15:33
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/

弊テンプレート利用者の方は削除してOKです。
あと、余白調整のために一部追記しましたのでご覧くださいね。

2020/06/03 (Wed) 15:35
vanillaice (Akira)
Akira
To こんさん

こんにちは ('0')/

修正できているのを確認できました。お疲れ様でした :)
横が狭い時はやっぱり余白が気になるなぁ、と感じたので、今内容を一部追加しました。ご確認をお願いします。

2020/06/03 (Wed) 15:36
ススム
To Akiraさん

お世話になります。
.blogcard-descriptionの部分ですね。
追記しました、ありがとうございます。

2020/06/03 (Wed) 16:16
こん
To Akiraさん

Akiraさん、早速ありがとうございました!
/* 任意~の部分を追加させていただきました。

またしてもおっちょこちょいを露呈してしまいましたが(汗、
この機に間違いを見つけていただいて修正できてよかったです^^。
いつも本当にありがとうございます。

2020/06/03 (Wed) 16:39
bon
To Akiraさん

こんばんは。

ご指導ありがとうございます。transition の行を削除しました。
また、追記を拝見しました。

margin: 1em 0 0 !important;

これをデフォルトCSSへ書き換えました。合ってますでしょうか(・・;)

あと、Mystyleテンプレートで質問させていただいたblockquoteのp要素marginの件、なんだかお返事を強要するようで書くのも申し訳ないのですが、念のための確認です。Akiraさんから完了と頂いていないのにどうしようと思っていましたが、その後の経緯でおそらく完了でOKと勝手に判断し(本来は私が判断すべきではないのですが)、テスト用の記事を下書きにひっこめさせていただきますね。
お返事の催促ではありませんので(^^)/

2020/06/03 (Wed) 22:50
-
管理人のみ閲覧できます

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

2020/06/04 (Thu) 02:45
ぼっちん
なるほどぉ♪

Akiraさん、おはようございます ^^

「カード全体」にリンクを張るって、私はjQueryで実現させておりましたが、この方法ってまったく思いも付きませんでした、鮮やかですね ^^

ただ、私がカスタマイズとして楽しませて戴いております「グラディエーション背景色」には無理がありますが、それはそれで1つの楽しみ方です(笑)

やっぱり「Akira風ブログカード」には楽しみ方が無尽蔵に隠れていて、自由度いっぱいで楽しいです ^^
皆さんも、もっともっとご自分なりの様々なカスタマイズを楽しんで戴きたいものですね ^^

2020/06/04 (Thu) 08:27
vanillaice (Akira)
Akira
To 連絡の件内緒さん

大変失礼しました。今送信しましたのでご確認をお願いします。

2020/06/04 (Thu) 11:46
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/

はい。追加でなく書き換えならばOKです。
blockquoteの件、なんでしたっけ? ^^;
見落としてるかもなのでのちほどチェックします。ごめんなさい!

----- 追記
blockquote内p要素のCSSが正しく書けているかどうか、ということですかね。
ちゃんと書けているので大丈夫だと思います (o'ω')ノ

2020/06/04 (Thu) 13:39
vanillaice (Akira)
Akira
To ぼっちんさん

ぼっちんさん、こんにちは ('0')/

この方法だと予めheightを作っておかないといけないので、その点が難ですよね。
グラデーションについては共存できると思いますが、a要素でwrapする、というのが一番簡単でわかりやすいものではあります。ただsyntax的にはエラーです(笑)
とは言ってもJSで後付した内容ですからvalidatorで指摘されることはありません。

細かいルールなんやかんやよりも利便が勝ることは多々ありますので、個人的にはオッケーだと思います (o'ω')ノ

2020/06/04 (Thu) 13:42
bon
To Akiraさん

こんばんは。
はい、それ(blockquote内p要素のCSSが正しく書けているかどうか)です。お忙しい中ご確認ありがとうございました^_^

2020/06/04 (Thu) 20:15

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

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

カスタマイズ