わたしはそこから他の記事を読むことが結構あるので、自分のブログにもつけてみました。
関連記事を表示しよう
設定方法
参考にしたサイトはこちら。
本当はMillardを使いたかったのですが、なぜかモバイルでの表示がうまくいかなくて。
ブログの特性上画像も少なく、映えるデザインも似合わないなあと思ったので文字だけのシンプルなものにしました。
設定
タイトル：h2→pへ変更
タイトルは<h2>で指定されていて、本来であればそれで問題なかったのですが、なんと目次に表示されてしまって。
なので<p>に変更し、
<h2>と同じ書式になるようcssで加えました。
タイトルの書式を設定
cssのデザイン
#related-posts p {
font-size: 115%; }
font-size: 115%; }
赤字の部分を、本来<h2>で設定していた書式内容に変更しました。
コードの微調整
表示したい部分に張り付けたコードの最後の部分。
これは提供元へのリンクが反映されています。
すごく失礼なのですが、見えないように文字の色を「白」にさせていただきました。笑
感謝も込めて、リンクは削除していませんよ…！
（ものによってはここの削除でうまく機能しなくなることもありますので。）
<a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>
赤字の部分が色の設定です。#ffffff（白）に変更しました。
まとめ
PC、モバイルともに正常に機能していることを確認しました。
シンプルで邪魔にならないデザインでよかったです。
.png)
0 件のコメント:
コメントを投稿