ライブドアブログHow Toシリーズです。

今回は「関連記事」を枠組みで表示させるカスタマイズ方法です。


関連記事をカスタマイズする

 
完成したものがこちら。

無題


記事下の関連記事が「二重線」で囲って目立つようにしています。CSSの欄に以下のコピペを行うと実装されるようになります。


<CSS>
.article-body .related-articles ul li {
background: url(https://parts.blog.livedoor.jp/img/usr/ver06_yk_suisaika_2c/icon_sidebody.png)no-repeat 6px 8px;
line-height: 1.5;
margin: 0 0 6px 0;
padding-left: 18px;
margin: 10px 10px 10px 10px;
padding: 5%;
border:double #d2d7e6;
overflow: hidden;
border-radius:2px;
}
</CSS>






関連記事の文字を中央に寄せる方法


無題


「関連記事」の文字を中央に寄せるときはh3タグの中にtext-align:center;を入れるのです。そうすることで、中央へと自然に実装されます。


.article-body .related-articles h3 {
font-size: 16px;
font-weight: bold;
margin-bottom: 6px;
text-align:center;



というわけで、少しでもお役にいただければ幸いかなと思っています。



関連記事livedoorブログのカテゴリー欄をカスタマイズしたい!
 



人気記事

[短所を克服!]長所を伸ばすためにやるべき2つの診断

[転職診断!]大魔王ポルポルの年収は620万円!

[おすすめ!]バーチャルリアリティーの世界を体験してきたよ!


プロフィール
bc697bf888b01b3cd628ebc76b7f82ada97744a8



大魔王ポルポル/ホームレス

日本一周をママチャリで達成する。その後、クズとなり、仕事もせず、ダラダラとホームレスな生活をしている。しかし、その後はアフリカに行こうとしている。ブログを通じて助けを求めたり、グチをこぼしたり、小遣いを稼いだり、とにかくクズ


トップページブログ運営 > ライブドアブログで「関連記事」を枠組みにカスタマイズする方法