読者です 読者をやめる 読者になる 読者になる

ひなかな

~陽だまりのなかで~

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

かなた ブログ-はてなブログ改造

f:id:hidamarinonakade:20140216103031j:plain

はじめに

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

 

ようやく挨拶が言えました(笑)

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

 

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

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

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

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

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

という理由からです^^;

 

 

LinkWithinは大失敗!?

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

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

 

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

 

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

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

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

 

 

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

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

そう思い、導入してみましたf:id:hidamarinonakade:20140202010454g:plain

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

 

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

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

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

 

 

発想の転換

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

 

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

なんともやるせない気持ちになるじゃないですかf:id:hidamarinonakade:20140202010631g:plain

 

あ、私だけですかね(笑)

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

 

PCでは大きく表示させて

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

 

f:id:hidamarinonakade:20140202010525g:plain

 

PC、モバイルだけじゃなくて画面幅に合わせて表示させると発想を転換させてみたらどうだろうかf:id:hidamarinonakade:20140202010524g:plain

画面に合わせてスクロールが出ればいいんじゃないだろうかf:id:hidamarinonakade:20140202010523g:plain

・・・と

 

 

無事解決

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

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

 

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

どうですf:id:hidamarinonakade:20140202010525g:plain

いいアイデアじゃないですかf:id:hidamarinonakade:20140202010526g:plain

 

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

あんなに苦労したのにf:id:hidamarinonakade:20140202010453g:plain

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

以下がコードです。

 

 

まとめ

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

 

 

編集後記

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

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

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

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

それではf:id:hidamarinonakade:20140202010735g:plain

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

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