おすすめ記事ピックアップ
関連記事を表示するウィジェット LinkWithin(http://www.linkwithin.com/)は、ブログ記事の関連記事を自動で表示してくれます。登録も不要で、簡単にコードを生成してくれます。Bloggerのウィジェットは連動しており、スムーズに設置できます。
一見英語で難しそうなLinkWithinの導入方法を説明します。LinkWithinの一番残念な点は、CSSやレイアウトの変更ができないことです。LinkWithinはCSSなど変更できないので、微妙に隙間があったり、スッキリ並ばなかったりします。
とてもモヤモヤします。でも力技で変更できてしまうのです。本邦初公開です。デザインやレイアウトを重視している人にオススメの情報です。
LinkWithinは一見、ユーザー登録が必要に見えますが、簡易登録で利用できます。サイトにアクセスして右側の項目を入力します。
メールやサイトURLを入力します。Bloggerの場合はBloggerを選んでください。Widthは、オススメ記事の表示数です。1~5で設定できます。背景の色が黒い場合はチェックを入れてください。白い場合はチェックなしで。
登録が終わると、説明画面が出てきます。一見難しそうですが、何も考えずにインストールウィジェットを押しましょう。
導入したいブログを選び、ウィジェットの追加をします。
ウィジェットを追加するとレイアウト画面に移動します。ブログの投稿したにでも移動しましょう。
編集を押してみてください。このままだと英語の見出しが表示されます。
下記のように、これを追加します。日本語の見出しが使えます。IDの下に追加しましょう。
実際に表示させて見ましょう。無事関連記事が表示されました。しかし右側のスペースが発生しています。596ピクセルで幅が固定されています。微妙にレイアウトが気持ち悪いです。
ソースの見てみます。下記の2つのCSSに注目します。innerが幅を決定しています。個別の画像のスペースは、postsのさらに、それぞれaリンクごとに設定されています。このCSS自体は、LinkWithin側にあるために、コードで変更することができません。
変更すれば良いCSSが分かったので、強制的に変更するimportantを使いながら、レイアウトをカスタマイズします。CSSにこの追記をしましょう。簡単に説明するとwidthを100%にして横幅を広げて、ポストのa部分にそれぞれ隙間を設定しました。
このブログの場合は、13pxで、ちょうど良かったので13にしています。上下左右など、
ご利用の環境にあわせて自由に変更すると良いです。
プレビューしてみます。大成功!!!レイアウトがキレイになりました。
みなさんも是非LinkWithinを導入してみてください。何かメディアっぽくなった気分になりますねー。
LinkWithin
http://www.linkwithin.com/
http://www.furimuke.com/2015/02/linkwithin-css-blogger.html
一見英語で難しそうな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