LinkWithinのデザインやレイアウトをカスタマイズ!CSSでカッコ良く変更できます。Bloggerユーザー向け

おすすめ記事ピックアップ

関連記事を表示してくれるLinkWithin(http://www.linkwithin.com/)は、Bloggerで利用している人も多いでしょう。設定も簡単なので人気です。しかしデザインの変更ができなかったり、妙にスペースがあったり、色が気に入らなかったり、ぐぬぬぬとなります。

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ですので、より好みに調整できるでしょう。





いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : LinkWithinのデザインやレイアウトをカスタマイズ!CSSでカッコ良く変更できます。Bloggerユーザー向け
LinkWithinのデザインやレイアウトをカスタマイズ!CSSでカッコ良く変更できます。Bloggerユーザー向け
LinkWithinのレイアウトやデザインを変えたい!と人が多そうなので、LinkWithinのデザインを柔軟に変更できるCSSを作ってみました。BloggerのCSSエリアに下記コードを貼り付ければ反映されます。初期設定では、こんな感じのオシャレなLinkWithinになります。
http://2.bp.blogspot.com/--7_6lrXlEe8/VNoPGasmLyI/AAAAAAAAWrk/hh11rX324jM/s1600/002.png
http://2.bp.blogspot.com/--7_6lrXlEe8/VNoPGasmLyI/AAAAAAAAWrk/hh11rX324jM/s72-c/002.png
ふりむけばコウホウ
http://www.furimuke.com/2015/02/linkwithin-css-blogger.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/02/linkwithin-css-blogger.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy