LinkWithinの表示がiPhoneで切れるのを直す!横スクロールできるようにしちゃうぜ。

Iphone skin

直訳すると単語出版社。ども、WordPressフレッシュマンのオレっち(@yashiki55)です。

みなさん、ブログで関連記事の表示をしてますか?オレっちはWordPressプラグインを利用して「LinkWithin」←なんて読むのかわからん(;゚д゚)を使ってます。

今日はそのLinkWithinのお話。 

自動でスマートフォン用の表示にしてくれるプラグイン「WPtouch」でもデフォルトでは対応してくれない。

ブログの各記事の下には、関連記事もサムネイル付で紹介しちゃおうか。ってな思いでLinkWithinを使わせていただいておるんです。←実際には「お願いだから他の記事も見て。」ってキモチです。|д゚)チラッ

 

スクリーンショット 2012 10 19 18 15 15

 

パソコンで見てみると「こんな記事もいかがですか?」つって、4つほどご紹介しております。紹介する記事はLinkWithinさんが勝手に選んでくれております。

 

 

だがしかーし!これをWPtouchを介してiPhoneで見てみると(;゚д゚)ゴクリ…

 

IMG 7539 2

 

き、き、切れてる…( ꒪⌓꒪)

 

こんなの、何とかしたいですよね。

そこで。ググりました。ググってなんぼ。探しましたよ。

そしたらアナタ、見つけました。見つかりましたよ。

こちらのやよこぶろぐさんにお世話になりました。(*´∀`*)アザース
LinkWithinのスマートフォンビュー(WPtouch)がはみ出るので直してみました! | やよこぶろぐ

しかし、やよこぶろぐさんの記事に全身全霊でしたがって、身を粉にしつつ涙を流しながらやってみた結果、3つ目の切れてた記事が消えて、2つ表示になっただけでした。

でしたーー。(笑)

ま、そのことはやよこぶろぐさんも触れてらっしゃったので、そんなに驚きゃしなかったのですが、そこはやよこぶろぐさん、頑張っておられました。
LinkWithinがWPtouchで見るとはみ出るその後☆scroll&タイトル☆ | やよこぶろぐ

記事によると・・・なんと横スクロールで全て表示ができるとな!

もうかなりの興奮状態で鼻をフンッフンッとさせながらやってみました。

CSSをイジってスクロール指定してやったぜ。

 

一応、その方法を備忘録。

作業としてはWPtouchのstyle.cssに、横スクロールできるようにするんだよ、というコードを追記するというコトになります。

しかし、WordPressの管理画面から入って探しても、もちろんプラグインの編集を探してもWPtouchのstyle.cssファイルにはたどり着けないんです。

 

そこで、サーバーにアップしてるファイルの中から探して直接編集しちゃいます。次のように探してみてね。

サーバーの中でWordPressをインストールしてあるディレクトリ>wp-content>plugins>wptouch>themes>default>style.css

んで、見つけたstyle.cssファイルをテキストエディタで開きます。

 

そして一番下の方へ行きます。2580行目くらいですかね。なんしか一番下の方です。

そこに、「/* @group Social Share */」と記述された箇所がありますので、その中に次の赤字で記したコードを追記します。

 

/* @group Social Share */
.leftcontainerBox {
display: none !important;
}
div.linkwithin_outer {
width:237px;
overflow:hidden;
}

/* @end */

で、overflow:hidden;のところをoverflow:scroll;に変えると横スクロールが出来るようになっちゃうんです。φ(゚Д゚ )フムフム…

追記をしたらWPtouchのstyle.cssを上書き保存します。

 

検証。iPhoneで見てみませう。

(:.;゚;Д;゚;.:)ドキドキ

 

お!う、うごく。動いてるよ。

IMG 7538 1

 

IMG 7540 1

 

なんて爽快なんでしょう。ヾ(´▽`*)ゝワーイ♪

iPhoneユーザーの皆さん、ぜひ見てみてくだせぇ。やってみてくだせぇ。

 

 

やよこぶろぐさん、本当にありがとうございました。( ^ω^ )オオキニ♪

 

ちゃお。

 

この記事が気に入ったら
いいね ! しよう

Twitter で

LEAVE A REPLY

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Return Top