Blogger ブログカード引用デザインをオシャレに

2022年12月30日 2023年03月11日

高速！内容重視！と言えども、、やっぱり、見栄えよくなきゃねぇ。

いつのまにか、「ブログカード」なるオシャレなリンクが主流となっていた？！

「ブログカード」とは

どうやら、そもそもは、、はてなブログにて始まったようですが、、

クリックしてそのページに行かないと内容が不明確な、テキストタイプのリンクではなく、

リンク先の情報（タイトル、画像、詳細、ホームページアドレスetc）を明示して、

カード形式に編集して埋め込むというもの。

ブログサービスによっては、簡単に利用できる機能が備わってきているようです。

が、、bloggerにはそんな機能はない、今後もなさそう？巨匠たちに学ぶしかない。

ここは、デザイン重視でしょ！

色々と調査の結果、こんな素敵なカードを使用させて頂くことにした。。🙏

「QooQ(v1.30)」のブログにて使用しているカードタイプは、こちら。

【通常タイプのブログカード】（自作の投稿へのリンクに使用）

【引用タイプのブログカード】（自作以外の投稿へのリンクに使用）

CSSですが、そのままだと、引用符「”」が、若干、でっかいかなぁ？？

微調整しようとしたが、効かなかった。

「QooQ」に対応させる方法（CSSメンテ）

調べてみると、そもそも「QooQ(v1.30)」には、でっかい引用符が定義されてあった。

#single-content blockquote{
	margin: 1.8rem;
	padding-left: 1.8rem;
	position: relative;
}
#single-content blockquote:before{
	content:'\201D';
	font-size: 400%;
	position: absolute;
	top: -1.8rem;
	left: -1.8rem;
	line-height: 1;
}

先のページよりコピーさせて頂いたCSSの引用符は、、

＜Before＞

/* 引用 */
.blogcard blockquote {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

ん、「QooQ」では「#single-content .」が要るんじゃない？ということで付けまくる。

そして、「blogcard blockquote::before」は、現在下記のように定義してある。

＜After＞

/* 引用 */
#single-content .blogcard blockquote {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
}

#single-content .blogcard blockquote::before{
    display: inline-block;
    position: absolute;
    top: -30px;
    left: -15px;
    content: "\201D";
    font-family: sans-serif;
    color: #454545;
    font-size: 40px;
    line-height: 1;
    z-index: 2;
}
#single-content .blogcard blockquote::after {
  content: none;
}

※上記以外にも、微調整しておりますが、ここでは割愛させて頂きます。

「QooQ(v1.30)」のブログにて使用している引用デザイン

こちら、色んな「引用デザイン」を掲載して下さってる。№10を使用させて頂くことにした。。🙏

こんな感じ。。

すると、CSSを記載する場所によって、なんだか引用符が迷走し始めたのである。

試行錯誤の結果、、「#single-content .」を付けて、、

当初の「QooQ(v1.30)」の「引用」を、こちらに置き換えました。

#single-content blockquote {
    position: relative;
    padding: 10px 10px 10px 32px;
    box-sizing: border-box;
    color: #464646;
    background: #fff2d9;
}

#single-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: -0px;
    left: -0px;
    content: "\201D";
    font-family: sans-serif;
    color: #aa4202;
    font-size: 50px;
    line-height: 1;
    z-index: 2;
}

#single-content blockquote:after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    border-width: 0 0 40px 40px;
    border-style: solid;
    border-color: transparent #fffaf0;
}

#single-content blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

#single-content blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

「JetTheme」当ブログにて使用しているタイプは、こちら。

【通常タイプのブログカード】（自作の投稿へのリンクに使用）

　　ダークモード（ブログ右上の🌜マークをクリック）は、、

【引用タイプのブログカード】（自作以外の投稿へのリンクに使用）

　　ダークモード（ブログ右上の🌜マークをクリック）は、、

CSSですが、そのままだと、引用符「”」表示されず、見分けがつかない。

ダークモード（ブログ右上の🌜マークをクリック）が、効かなかったんですが、、

「JetTheme」に対応させる方法（CSSメンテ）

①引用符を表示させるために行った調整

　「position: static;」を、「position: relative;」に変更。

＜Before＞

.blogcard blockquote {
  position: static;

＜After＞

.blogcard blockquote {
  position: relative;

　「blogcard blockquote::before」は、現在下記のように定義してある。

＜Before＞

.blogcard blockquote::before,
.blogcard blockquote::after {
  content: none;
}

＜After＞

.blogcard blockquote::before{
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 0px;
    content: "\201D";
    font-family: sans-serif;
    font-size: 40px;
    line-height: 1;
    z-index: 2;
}
.blogcard blockquote::after {
  content: none;
}

②ダークモードを効かせるために行った調整

ダークモードのコーディング方法が違う？？

「@media (prefers-color-scheme:dark) 」を外して「.dark-mode」を付けまくる。

＜Before＞

@media (prefers-color-scheme:dark) {
  .blogcard {
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    background: url(data:image;　…中略…
    outline-color: rgb(162,175,185);
  }
  .blogcard > a {
    color: rgb(240,240,240);
  }
  .blogcard:hover,
  .blogcard:hover > a {
    color: rgb(240,240,240);
  }
}

＜After＞

.dark-mode .blogcard {
    box-shadow: 0 20px 40px rgba(0,0,0,.5);
    background: url(data:image　…中略…
    outline-color: rgb(162,175,185);
  }
  .dark-mode .blogcard > a {
    color: rgb(240,240,240);
  }
 .dark-mode .blogcard:hover,
 .dark-mode .blogcard:hover > a {
    color: rgb(240,240,240);
}