Linkwithin を折り返して表示する

320px で Linkwithin 関連記事を1つ余分にもらって来て4記事を2行2列表示のスマホ対応にする方法です。

Linkwithin は 320px の iPhone だと関連記事サムネイルは3つだけしか取れません。この3つをレスポンシブでは overflow: hidden にして表示幅をオーバーしないようにします。するとサムネイル2個と半分。3つ目の記事は見切れてしまいます。

iPad や パソコンなどの解像度が高いデバイスで最大5記事までの表示に比べ、320px で実質2記事ではちょっとジョボイ。

そこで 320px の iPhone でもっとたくさん関連記事を読んでもらえるように強制的に4記事を取得して、それを2行2列に折り返しすようにカスタマイズします。

Sponsored Link

Linkwithin カスタマイズの概要

このカスタマイズはレスポンシブ 320px 幅で Linkwithin 関連記事サムネイルの3つ目が見切れてしまうのが厭とか、3つだと奇数でバランスが悪いので厭という場合にオススメです。

Linkwithin のサーバは配信する記事(サムネイル)の数を決めるために表示幅を判別しているようです。その判断基準となっているのが linkwithin_div で表示幅 320px の初期値は358px。だから2記事半。

この linkwithin_div の幅をもっと広めに設定したら1つ余分に記事を送ってくれるのかなと。やってみたらサムネイル4個もらえました。そこでスタイルシートを偽装して4記事分のちょっと広めの幅を書きます。

4記事もらってきたので幅 320px で2行目に折り返して2行2列で表示できるように linkwithin_inner の幅をスタイルシートで調整します。

実はこの2個所のカスタマイズだけだと折り返してくれなかったので、Linkwithin 全体を囲むブロックを利用して、その枠内で折り返すようにします。

強制的に4記事取得して2行2列表示するためのコード

ブロック要素になるクラスを1つ追加するために 記事 HTML を編集します。このブログでは Linkwithin 導入時に relatedposts というクラスを追加しています。» あとで失敗しない Seesaa ブログに関連記事 Linkwithin を導入する方法

記事 HTML

このブロック相当のクラスを追加していないようだったら、先に記事HTML に追加しておきます。linkwithin_div を挟み込みます。

<div class="relatedposts">
<script>linkwithin_text="こんな記事も書いてます"</script>
<div class="linkwithin_div"></div>
</div>

CSS

CSS の 幅 320px が反映されるメディアクエリーを編集します。

.relatedposts{overflow: hidden;}
.linkwithin_div{width: 500px; overflow: hidden !important;}
.linkwithin_inner{width: 60% !important; overflow: hidden !important;}

※ relatedposts に相当するクラスが既設なら以降読み替えて進んでください。

4記事を取得するために linkwithin_div で表示幅は 500px だと嘘の申告をします。記事を表示している部分のタグ (Seesaa ブログだと .text, .blogbody あたり) によっては padding が大きいこともありますから4記事取れるまで 530 px など幅を広げていきます。

linkwithin_inner で折り返し幅を決めます。ちゃんと2行に折り返せば 50% でも 70% でも良いはずです。


以上で基本的なカスタマイズは完了です。
もし、上のコードを見て Linkwithin の JavaScript はどこに書いてある?と疑問に思った方はこちらの Linkwithin 設置方法を先に確認しておいてください。

Chrome のデベロッパーツール (F12キー)で確認した結果が以下です。

iPhone 4 〜 iPhone 5 (幅320px):4記事 2行2列
iPhone 6 (幅375px):3記事 1行3列
iPhone 6 plus (幅414px):3記事 1行3列
iPad 3/4 タテ (幅768px):5記事 1行5列
Google Nexus 7 タテ (幅604px):4記事 1行4列

360px の Sony Xperia だと3記事(1行3列)でもう1つ欲しいのですが、調整が面倒なのでやめます。いずれにしても1行で表示するか、偶数記事を2行にするか。奇数だとちょっと変な感じです。

その意味では linkwithin_div をもっと広くして5個記事をもらってきても、表示が奇数だとバランスが悪いのでボクは偶数推し。逆に関連記事の数を優先したいのであれば限界まで広げるのも方法です。

2行2列でセンタリングしたい

見出しも一緒にセンタリングのLinkwithinLinkwithin を4記事2行2列にできたんですが、幅 320px だとサムネイルが左に寄ってて厭なのでセンタリングしてみました。

ただコレ、ちょっとハマってしまいます。センタリングすると関連記事の見出しテキスト、このブログだと「こんな記事もかいてます」、これが一緒に中央に寄ってくる。他が左寄せなのに、この関連記事の見出しだけバランス悪く中央に寄ってるわけです。

仕方ないので、もれなく付いて来る関連記事(おおもとの初期値は You may also like:)の見出しを非表示にして、中央寄せの影響が及ばない位置に手入力しました。

#linkwithin_text_0{display:none;}

これを CSS のメディアクエリーじゃないところに追記してどの場面でも見出しは表示しないようにします。

.linkwithin_inner{width: 60% !important; margin:0 6% !important; overflow: hidden !important;}

左右のマージンを6%取ったら 320px でほぼ中央に寄りました(個々に要調整)。最初に追記したメディアクエリーの該当部分を修正します。

それから記事 HTML に見出しを手打ちします。

<div class="relatedposts">
<strong>こんな記事も書いてます</strong>
<div class="linkwithin_div"></div>
</div>

ボクは strong でピッタリでしたが、他の見出しに使っているクラスを使って文字サイズ、位置などで見た目を個々に調整してください。

これで4記事のサムネイルは中央に寄り、見出しは左寄せのままです。

Linkwithin をもっとカスタマイズ

Linkwithin の構造が分れば hover の色(初期値紫色)を変更したり、テキストリンクの文字サイズを変更したりサムネイルに被せたりと、複眼RSSっぽく結構いろいろなカスタマイズができます。

参考:
»【Linkwithin:カスタマイズ】見出しや幅を変更したりスマホ表示に合わせて2段化したりしてみよう♪
» スマホで320pxのAdsenseとlinkwithinがはみ出る問題の対処決定版(2014/8版)
» How to customize or edit the linkwithin related post widget

ボクはクッキー系のアフィリエイトリンクを複眼RSS で配信しています。以前、複眼RSS が今ほどカスタマイズに自由度がなかったので Linkwithin 側を変更して複眼RSS のデザインに寄せていました。そうするとそこそこ面白い結果が出ます。

サムネイルのサイズを変更したくて linkwithin_img_0 img あたりで拡縮できるかとやってみたけど、コードにサイズがベタ打ちされている部分があってできない。

.linkwithin_div, #lws_0, .linkwithin_outer, #linkwithin_inner, .linkwithin_inner, .linkwithin_text, #linkwithin_text_0, .linkwithin_posts, #linkwithin_posts_0, linkwithin_link_0 .... この辺までは解析したんですが。

もしサムネイルのサイズ変更をしているひとがいたら是非やり方を教えてください。


Wordpress は関連記事プラグインがたくさんあるので Linkwithin は使いませんが Seesaa や FC2, Google Blogger などの無料ブログは Linkwithin がカンタン便利。

表示される記事が古かったり、あまり関連していなかったり、サムネイルが更新されていなかったりと不満があるかもしれませんが、Linkwithin のサイトから定期的に更新依頼をするとちゃんとアップデートされます。タイトルに関連付けさせたいキーワードを入れておくとバッチリ思い通りの関連記事を引っ張ってきますし。
» Linkwithin に表示される記事が更新されないときの対応

スマホ対応 Linkwithin カスタマイズ 次のお題

linkwithin_div で表示幅を偽装すればスマホでも5記事分のサムネイルが取得できる。overflow:scroll にすればスマホでも横スクロールで5記事まで表示できるということです。

この場合 Wordperss プラグインや jQuery にあるスライダーで見るように関連記事サムネイルの下に Image Pick を付けておくか自動スライドさせないと、見切れているのか横スライドできるのか判らないですね。

次は Image Pick 付きで5記事を横スクロールするスマホ版 Linkwithin カスタマイズに挑戦です。

Sponsored Link

この記事へのコメント

0件
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link