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

いやー、ちょろっとコードやデザインを学んできてよかったわ。
では、こちらをカスタマイズしていきましょう!
「関連記事」をオシャレにしよう


/* ショートコードで関連記事を取得 */ .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」
と移動し、以下のコードを貼り付けしてください