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

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

こんな感じです

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

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

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

ばなやん@声優小説家
カスタマイズは
「外観」⇒「カスタマイズ」⇒「追加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="あわせて読みたい"]

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

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

スポンサーリンク
注意
特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。