おすすめ記事ピックアップ
関連記事を表示してくれる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ですので、より好みに調整できるでしょう。