Blogger にオススメ記事を表示するLinkWithinを導入して、さらにレイアウトまでもカスタマイズする。

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

関連記事を表示するウィジェット LinkWithin(http://www.linkwithin.com/)は、ブログ記事の関連記事を自動で表示してくれます。登録も不要で、簡単にコードを生成してくれます。Bloggerのウィジェットは連動しており、スムーズに設置できます。

一見英語で難しそうなLinkWithinの導入方法を説明します。LinkWithinの一番残念な点は、CSSやレイアウトの変更ができないことです。LinkWithinはCSSなど変更できないので、微妙に隙間があったり、スッキリ並ばなかったりします。

とてもモヤモヤします。でも力技で変更できてしまうのです。本邦初公開です。デザインやレイアウトを重視している人にオススメの情報です。



LinkWithinは一見、ユーザー登録が必要に見えますが、簡易登録で利用できます。サイトにアクセスして右側の項目を入力します。

メールやサイトURLを入力します。Bloggerの場合はBloggerを選んでください。Widthは、オススメ記事の表示数です。1~5で設定できます。背景の色が黒い場合はチェックを入れてください。白い場合はチェックなしで。

登録が終わると、説明画面が出てきます。一見難しそうですが、何も考えずにインストールウィジェットを押しましょう。

導入したいブログを選び、ウィジェットの追加をします。

ウィジェットを追加するとレイアウト画面に移動します。ブログの投稿したにでも移動しましょう。

編集を押してみてください。このままだと英語の見出しが表示されます。

下記のように、これを追加します。日本語の見出しが使えます。IDの下に追加しましょう。

var linkwithin_text='ここに見出しを入れる';


実際に表示させて見ましょう。無事関連記事が表示されました。しかし右側のスペースが発生しています。596ピクセルで幅が固定されています。微妙にレイアウトが気持ち悪いです。

ソースの見てみます。下記の2つのCSSに注目します。innerが幅を決定しています。個別の画像のスペースは、postsのさらに、それぞれaリンクごとに設定されています。このCSS自体は、LinkWithin側にあるために、コードで変更することができません。

変更すれば良いCSSが分かったので、強制的に変更するimportantを使いながら、レイアウトをカスタマイズします。CSSにこの追記をしましょう。簡単に説明するとwidthを100%にして横幅を広げて、ポストのa部分にそれぞれ隙間を設定しました。

このブログの場合は、13pxで、ちょうど良かったので13にしています。上下左右など、
ご利用の環境にあわせて自由に変更すると良いです。

/*------------------------------------------------------
linkwithin kasutamu kodo
------------------------------------------------------*/

.linkwithin_inner{
width:100% !important;
}
  
.linkwithin_posts a{
padding: 13px !important;
}


プレビューしてみます。大成功!!!レイアウトがキレイになりました。

みなさんも是非LinkWithinを導入してみてください。何かメディアっぽくなった気分になりますねー。

LinkWithin
http://www.linkwithin.com/


追記:2015年2月

デザインのカスタマイズについて追記記事かきました。
http://www.furimuke.com/2015/02/linkwithin-css-blogger.html














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


名前

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
ふりむけばコウホウ : Blogger にオススメ記事を表示するLinkWithinを導入して、さらにレイアウトまでもカスタマイズする。
Blogger にオススメ記事を表示するLinkWithinを導入して、さらにレイアウトまでもカスタマイズする。
http://4.bp.blogspot.com/-4uoEG177-eY/UXLGYR9jqrI/AAAAAAAAJGE/YVvEzK1hOFw/s640/lik0009.jpg
http://4.bp.blogspot.com/-4uoEG177-eY/UXLGYR9jqrI/AAAAAAAAJGE/YVvEzK1hOFw/s72-c/lik0009.jpg
ふりむけばコウホウ
http://www.furimuke.com/2013/04/blogger-linkwithin.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/04/blogger-linkwithin.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