「関連記事」をオシャレにカスタマイズ！

スワローって、全体的にとってもカッコいいデザインなのですが、関連記事はタイトルのみでちとダサいんですよね……。（私的にです。すみません^^;）
せめて「あわせて読みたい」という文字にしたかったので、カスタマイズしてみました。

いやー、ちょろっとコードやデザインを学んできてよかったわ。

では、こちらをカスタマイズしていきましょう！

「関連記事」をオシャレにしよう

カスタマイズは
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けペーストしてください

/* ショートコードで関連記事を取得 */
.related_article{
	margin: 1.8em auto;
	text-align: left;
	max-width: 800px;
}
.related_article p.ttl{
	margin: 0 0 0.1em;
	font-size:1em;
	font-weight: bold;
}
.related_article .ttl::before{
	content:'あわせて読みたい';
	font-size:.6em;
	font-weight:bold;
	color:#565656;
	background:#fff;
	border: solid 1px #999;
	width: 10em;
	display:inline-block;
	padding: 0.1em 0.4em;
	position:relative;
	top:-2px;
	text-align:center;
	margin-right:0.5em;
	-webkit-border-radius:2px;
	border-radius:2px;
}
.related_article.labelnone .ttl::before{
	content:none;
}
.related_article .date{
	font-size:0.8em;
}
.related_article .thum{
	width: 22%;
	padding-right: 0.7em;
}
.related_article .thum img{
	width:100%;
	margin-bottom: 0;
}

以上です！
お役に立てるといいなぁ^^

STORK19での関連記事のカスタマイズ

ちなみにSTORK19では、以下のcssコードで変えられます。

/* ショートコードで関連記事を取得 */
.related_article .labeltext{
  font-size: 70%;
  font-weight: bold;
  border: solid 1px #888;
  background-color: #fff;
  color: #555;
  display: inline-block;
  padding: 0.1em 0.5em;
  position: relative;
  top: -2px;
  text-align: center;
  margin-right: 0.5em;
  border-radius: 2px;
}

「関連記事」の文字については、ショートコードで指定してください。
記事ナンバーは投稿画面のURL欄にある数字です。
▼記述方法

[kanren postid="記事ナンバー" labeltext="あわせて読みたい"]

すると、このように表示されます^^

あわせて読みたい「ストーク」の吹き出しをカスタマイズ！ 枠線カラーと画像の大きさを変えるcssコードを一挙大公開！！

2023.01.10

「関連記事」の部分が無事「あわせて読みたい」に変わりました！！
ご参考までに^^