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

いつ俺〜いつから俺ができないと錯覚していた?〜

学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。

スマホ表示でブログカードが画面からはみ出る問題を解決したよ!

Webデザイン プログラミング

みなさん、突然ですがスマホのページでブログを読んでいて、横スクロールしてうっとおしいと思ったことありませんか?

僕はめっちゃ思ったんですね。

こんなん読みずらいやろ!と。


f:id:shun_prog0929:20151215222703j:plain


しかし、そんな僕のブログでも同じ問題が起きてしまったのです。

その原因ははてなのブログカードでした。

今回ははてなのブログカードが原因で発生する、スマホページでの「横スクロールガクガク問題」の解決法をご紹介します!


横スクロールガクガク問題

まずはこちらの画面をご覧ください。


f:id:shun_prog0929:20151215210355p:plain


見てわかる通り、思いっきり画面が横スクロールしてしまっています。

これが「横スクロールガクガク問題」です。

そして今回この原因となっているのがこちら!


f:id:shun_prog0929:20151215211106p:plain:w300


そう、ブログカード!思いっきりはみ出てるやないかい!!

みんな大好きブログカード。

おしゃれだし、使いたくなりますよね!

横スクロールしちゃったら読みずらいし、使うのやめるしかないのか?

調べてみると同じことになってしまっている方もいるようです。

iphone-sumaho.beauty-box.tokyo


はみ出てしまう原因はブログタイトルが長いこと。

そのせいで、ブログカードの横幅が広がってしまっているようです。

この問題を解決するのはブログタイトルを短くすることだそうですが、ブログタイトルには愛着があるから変えたくない!!


誰も直せないなら俺が直す!


僕は決意しました。

絶対直してやると。

長い戦いでした。


そしてついに・・・


俺はやったぞー!!!


ということで直せましたので、その方法をご紹介します。

ポイントはブログタイトルの長さ。

ブログカード内のブログタイトルの長さを調整してやればよかったのです。

というわけで、そのためのコードがこちら!

<script>
  Array.prototype.forEach.call(document.getElementsByClassName("embed-blogcard"), function(ele){
    ele.parentElement.classList.add("blogcard-scroll-x");
  });

  window.onload = function(){
    var fontSize = 12;
    var windowSize = window.innerWidth;
    Array.prototype.forEach.call(document.getElementsByClassName("embed-blogcard"), function(ele){
      Array.prototype.forEach.call(ele.contentWindow.document.getElementsByClassName("blog-title"), function(e){
        var maxWidth = (windowSize - 200) / (fontSize);
        if(maxWidth < e.children[0].innerText.length) {
          e.children[0].innerText = e.children[0].innerText.substring(0, maxWidth) + "...";
        }
      });
    });
  };
</script>

<style>
.blogcard-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.entry-content {
    overflow-x: hidden;
}
</style>


こちらをスマホデザインの記事下に入れていただければ、画面サイズに合わせてブログタイトルを省略することができます。

実際の画面はこんな感じ!


f:id:shun_prog0929:20151215212628p:plain:w300


いい感じに省略されて、画面に収まってますね!

他人のブログカードはアクセス権限の問題で書き換えられないので、ブログカードのボックスだけスクロールできるようにHTMLを書き換えるようにしてあります!

まとめ

今回は、「横スクロールガクガク問題」を解決してみました。

困っていた方は、ぜひ参考にしてみてください!

以上!