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

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

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

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

f:id:shun_prog0929:20151215222703j:plain

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

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

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

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

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

f:id:shun_prog0929:20151215210355p:plain

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

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

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

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

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

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

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

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

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

http://iphone-sumaho.beauty-box.tokyo/entry/2015/04/17/193000iphone-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>