Linkwithinを端末対応化！実はとても簡単なことだった

はじめに

おはようございます。かなたです。

ようやく挨拶が言えました（笑）

やっぱりはてなブログ改造記事を書いている時は挨拶よりもまず先に改造記事仕上げなくちゃって思いがあるので、なかなか挨拶しづらくてですね

そういえばマネー報道著者 (id:MoneyReport)のところで取り入れた「あわせて読みたい」機能ですが、乗り換えることにしました。

「あわせて読みたい」ウィジットを記事下に導入！直帰率がすぐに改善♪ - マネー報道 MoneyReport

閑古鳥が鳴くえぇと、土曜日にアップした記事以降、当ブログは閑古鳥が鳴く状態になっています。あんな誤解を与える様な記事を書いてしまったので自業自得なのですが・・・...

何故乗り換えることになったかというと、

• 表示までに時間がかかってしまうという
• CSSを直接ブログに書き込んでいるため全体的にもっさりしてしまっていた

という理由からです＾＾；

LinkWithinは大失敗！？

そこでLinkWithinにのりかえました。

LinkWithinはデザイン的にもスタイリッシュですし、とても表示が早いので私的にはお気に入りです。

しかし、一つ問題があったのです。

それは、モバイル端末から閲覧した際に画面からはみ出して見えちゃうんですね＾＾；

一応横にスライドさせれば見えるには見えるのですが、画面がカクカクしてなんともやるせない気持ちになるのです・・・。

LinkWithinにして大失敗かもしれない・・・。

ユーザーエージェントでの切り替え

「それならば、ユーザーエージェントで表示方法切り替えればいいんじゃ？」

そう思い、導入してみました

が・・・うまくいきません。

LinkWithinの位置を指定するコードがあるのですが、それを利用するとうまく表示されないのです。

つまりはまだカクカクということ。

位置を指定しなければうまく表示するんですけどねぇ・・・。

発想の転換

かといって、アーカイブの手前に別の記事をお勧めするLinkWithinを置くのはどうも私的に納得できませんでした。

だって、今読んでる記事に関連する情報を別の記事紹介した後に紹介する形になるんですよ

なんともやるせない気持ちになるじゃないですか

あ、私だけですかね（笑）

それでも諦めきれなかった私は、大豆程度しかない脳みそをフル活動させて考えました。

ＰＣでは大きく表示させて

モバイルでは小さく表示させる・・・

ん

ＰＣ、モバイルだけじゃなくて画面幅に合わせて表示させると発想を転換させてみたらどうだろうか

画面に合わせてスクロールが出ればいいんじゃないだろうか

・・・と

無事解決

画面に応じて表示をかえるわけですから「width」を100%にすれば自動的に幅が合いますよね。

スクロールは必要な時だけ出てくるように「auto」設定

つまりは上記の設定をしたテーブルの中にLinkWithinを突っ込んでしまえばいいのです

どうです

いいアイデアじゃないですか

実際に試してみたところすんなりうまくいきました。

あんなに苦労したのに

 ぜひみなさんも試してみてください♪

以下がコードです。

まとめ

LinkWithinを画面に合わせて表示させたいのなら上のを入れてあげると、とても幸せになれるかも

編集後記

結局はてなブログ改造に近いことを書いてしまいました（笑）

ユーザーエージェントに合わせての表示は記事内のGoogleアドセンスで使用しております。

ＰＣではバナー形式、モバイルではスクエア形式で表示されるようになっており、モバイルの横幅を崩さないようになっています。

こちらも知りたいという要望があれば今度お話ししますね。

それでは

アメブロをカスタマイズ　魅せるブログデザインを作ろう！