おすすめ記事ピックアップ
関連記事を表示してくれるLinkWithin（http://www.linkwithin.com/）は、Bloggerで利用している人も多いでしょう。設定も簡単なので人気です。しかしデザインの変更ができなかったり、妙にスペースがあったり、色が気に入らなかったり、ぐぬぬぬとなります。
LinkWithinのレイアウトやデザインを変えたい人が多そうなので、LinkWithinのデザインを柔軟に変更できるCSSを作ってみました。BloggerのCSSエリアに下記CSSコードを貼り付ければ、反映されます。初期設定では、こんな感じのオシャレなLinkWithinになります。
設定を変更すれば、四角にもできます。カーソルが乗れば色が変わったりもします。どうぞ入れて見てくださいませ。LinkWithinの導入や、BloggerのCSSエリアってどこ？という人はググッて探して下さい。
大元は海外の記事です。それを使いやすい（自分的に）変更してあります。レスポンシブにもなっていると思います。もちろんBlogger以外でも使えるはずです。
以下linkwithin用のCSSです。BloggerのCSSエリアに貼り付ければ動くはず。。。！
このCSSについて、補足を書きます。
1.タイトルのサイズ
2.タイトルのカラー
見出しの「こんな記事も読まれています」の部分の色やサイズを変更できます。
3.記事ごとの区切り線です。0ならなし1ならあり。お好みで。
記事と記事の間に区切り線が欲しいなら1で線を設定できます。0にすれば線が無くなります。
4.背景の色
5.マウスオーバー時の背景色
記事の後ろ側の背景の色を設定できます。マウスオーバーした時の背景の色と組み合わせて使えば、効果的な見せ方ができます。
6.画像のフチの色
7.マウスオーバー時の画像のフチの色
画像の回りの色を設定できます。マウスオーバーした時の画像のフチの色と組み合わせて使えば、効果的な見せ方ができます。
8.chrome用設定100なら丸、0なら四角
9.firefox用設定100なら丸、0なら四角
10.CSS3用設定100なら丸、0なら四角
画像を丸くしたいときは100。四角いサムネイルにしたいなら0に変更してください。
11.テキストのカラー
12.テキストのフォント設定
13.テキストのフォントサイズ
14.テキストの行間
15.テキストのセンタリングはcenter、左寄せはleft
16.テキストのマウスオーバー時のカラー
記事の引用テキスト部分の設定です。
17.記事の表示間隔を調整 微調整必要
記事と記事の表示間隔を調整できます。右側に隙間が空いてる時などに、ここを1pxづつ増やして調整してみてください。表示記事が改行されて2段で表示されてしまう場合などは、減らしてみてください。
表示幅にピッタリ合うように調整できます。
それぞれCSSですので、より好みに調整できるでしょう。
LinkWithinのレイアウトやデザインを変えたい人が多そうなので、LinkWithinのデザインを柔軟に変更できるCSSを作ってみました。BloggerのCSSエリアに下記CSSコードを貼り付ければ、反映されます。初期設定では、こんな感じのオシャレなLinkWithinになります。
設定を変更すれば、四角にもできます。カーソルが乗れば色が変わったりもします。どうぞ入れて見てくださいませ。LinkWithinの導入や、BloggerのCSSエリアってどこ？という人はググッて探して下さい。
大元は海外の記事です。それを使いやすい（自分的に）変更してあります。レスポンシブにもなっていると思います。もちろんBlogger以外でも使えるはずです。
How to customize or edit the linkwithin related post widget
http://helplogger.blogspot.jp/2014/02/customize-linkwithin-gadget-related-posts-gadget.html
以下linkwithin用のCSSです。BloggerのCSSエリアに貼り付ければ動くはず。。。！
/*------------------------------------------------------
linkwithin ふりむけばコウホウカスタム
------------------------------------------------------*/
.linkwithin_text {
font-size:18px; /* 1.タイトルのサイズ */
color:#898989; /* 2.タイトルのカラー */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none;
}
.linkwithin_posts a {
border:1 !important; /* 3.記事ごとの区切り線です。0ならなし1ならあり。お好みで。 */
background: #FFFFFF !important; /* 4.背景の色 */
}
.linkwithin_posts a:hover {
background: #EAEAEA !important; /* 5.マウスオーバー時の背景色 */
}
.linkwithin_img_0 {
background: #FFFFFF; /* 6.画像のフチの色 */
border: 2px solid #C1C1C1;
padding: 2px !important;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.linkwithin_img_0:hover {
background: #007ABE; /* 7.マウスオーバー時の画像のフチの色 */
padding: 2px !important;
opacity:.6;
filter:alpha(opacity=60)
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
-webkit-border-radius: 100px; /* 8.chrome用設定100なら丸、0なら四角 */
-moz-border-radius: 100px; /* 9.firefox用設定100なら丸、0なら四角 */
border-radius: 100px; /* 10.CSS3用設定100なら丸、0なら四角 */
}
.linkwithin_title {
color: #007ABE !important; /* 11.テキストのカラー */
font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif; /* 12.テキストのフォント設定 */
font-size: 12px !important; /* 13.テキストのフォントサイズ */
line-height: 14px !important; /* 14.テキストの行間 */
text-align:left; /* 15.テキストのセンタリングはcenter、左寄せはleft */
text-decoration: none;
}
.linkwithin_title:hover {
color: #242424 !important; /* 16.テキストのマウスオーバー時のカラー */
}
.linkwithin_inner{
width:100% !important;
}
.linkwithin_posts a{
padding: 13px !important; /* 17.記事の表示間隔を調整 微調整必要 */
}
このCSSについて、補足を書きます。
1.タイトルのサイズ
2.タイトルのカラー
見出しの「こんな記事も読まれています」の部分の色やサイズを変更できます。
3.記事ごとの区切り線です。0ならなし1ならあり。お好みで。
記事と記事の間に区切り線が欲しいなら1で線を設定できます。0にすれば線が無くなります。
4.背景の色
5.マウスオーバー時の背景色
記事の後ろ側の背景の色を設定できます。マウスオーバーした時の背景の色と組み合わせて使えば、効果的な見せ方ができます。
6.画像のフチの色
7.マウスオーバー時の画像のフチの色
画像の回りの色を設定できます。マウスオーバーした時の画像のフチの色と組み合わせて使えば、効果的な見せ方ができます。
8.chrome用設定100なら丸、0なら四角
9.firefox用設定100なら丸、0なら四角
10.CSS3用設定100なら丸、0なら四角
画像を丸くしたいときは100。四角いサムネイルにしたいなら0に変更してください。
11.テキストのカラー
12.テキストのフォント設定
13.テキストのフォントサイズ
14.テキストの行間
15.テキストのセンタリングはcenter、左寄せはleft
16.テキストのマウスオーバー時のカラー
記事の引用テキスト部分の設定です。
17.記事の表示間隔を調整 微調整必要
記事と記事の表示間隔を調整できます。右側に隙間が空いてる時などに、ここを1pxづつ増やして調整してみてください。表示記事が改行されて2段で表示されてしまう場合などは、減らしてみてください。
表示幅にピッタリ合うように調整できます。
それぞれCSSですので、より好みに調整できるでしょう。
