空歌童心

リンクカードも設定してみた。
こんなの↓


これを 表示させるには……。
デザインからCSSを弄る。一番下に↓これ追加

/*-----リンクカード----*/
.link-box { border:1px solid #e1e1e1;
padding:10px;
display:flex;
margin:10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.link-box:hover {
background-color:#f3f3f3;
-webkit-transition:background-color .35s;
transition:background-color .35s;
}
.img-box {
width:35%;
float:left;
}
.img-box div {
min-height:150px;
background-size:cover;
background-position:center center;
}
.text-box {
width:65%;
float:left;
padding-left:20px;
line-height:1.7;
margin:0;
}
.text-box .title {
font-size:18px;
font-weight:600;
color:#428bca;
padding:0;
margin:0;
}
.text-box .description {
font-size:15px;
color:#777777;
padding:0;
margin:0;
}

@media only screen and (max-width:767px) {
.img-box div {
min-height:80px;
}
.text-box {
margin-left:2px;
line-height:1.5;
}
.text-box .title {
font-size:11px;
margin:0;
}
.text-box .description {
font-size:9px;
margin-top:5px;
}
}

影付きボックスです。影の色は
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
↑この辺りで変更可能です。私は(255, 215, 0, 0.75);にしています。
他にも背景色とかタイトルの色を変えてます。
どこかから拝借したデザインだと思うけれど、どこからなのか忘れてしまった……。
調べたら、他のデザインも出てくるかも。


これを付け加えた後に、上記のリンク先にリンクしたいURLを入れる。
出てきた、HTMLをブログ記事に張り付けで完成。
……この手順を忘れそうになる。




おまけ。
このブログのリンクカード。