758n's RyBlog!

人のフリ見て微調整。名古屋リーマンブログ

はてなブログの、スマホのX軸方向の「数ミリの横すべり」を何とかしたい! 放っておくと、せっかくの貴方の良い記事が、、、。

横すべりをなんとかしたい!

ほんの数ミリですが、スマホのときに記事部分が、横すべりして気になっていたんですが(他のはてなブログの方も結構同じ症状ありますよ)、わたしはこちらのテケオさんという方の情報でなおりました。

 

ただ、CSSとかの知識が全くなくて、ちょっとだけ躓(つまず)いたのでシェアします!

 

www.kouritsu30.com

こんなの解決できないと勝手に思いこんでいたんですが、だから情報なんて、ないと思ってたんですがシンプルにありました。

 

 

若い方々はスゴイ!

 

嬉しかったです。良い情報をありがとうございます。最近の若い方はスゴイですね。

 おっちゃんリーマンも歯をくいしばって、他のブロガーさんに追いついていきます。

 

※テケオさんの記事は、他の情報もわかりやすく書かれていてタメになります。ナゴヤんおすすめの、はてなブロガーさんです。

 

本題

で、横すべりの件なんですが、テケオさんがおっしゃるとおり、スマホで縦スクロールするときに、操作がしずらいんですよね~。ホントに。

 

他のはてなブロガーさんも、せっかくいい記事を書いてらっしゃる方が多いのに、同じように数ミリ横すべりする方がけっこういらっしゃいます。

 

「もったいないですよ。(せっかくいい記事なのに、、。)」

 

最初はそうでもないけど、だんだんボディブローのように効いてくるイヤな感じの類いの不具合だと思われます。さっそくなおしちゃいましょう!

 

★以下、引用はテケオさん記事から★

スマホ用ページで以下のCSSを追加

<style type="css/text">



div.entry-content.section{



overflow-x:hidden;



}



</style>



記事のx軸方向のはみ出しを隠してしまいます。

 

758n's Ryblog!で実践

 

わたしの場合は、「デザイン」→「スマートフォン」→「記事」→「記事下」にCSSをまとめていた(みたいだった)ので、その一番下に追加しました。

 

躓(つまず)いた箇所

 

引用元の2行目の

div.entry-content.section{

の最初の「div.」があるとうまく動かなかったので、外してコピペしたらうまく動きました! 横すべりもホント見事になくなりました。

 

「div.」のあるなしの意味は、たぶん単純なことだと思うんだけど何故かは私のレベルでは不明。ど素人ですから。だから理由は聞かないでね!!

 

結び

 

最初は、記事下、記事上とかヘッダー、フッタとかに、適当にやってもできるやろ!って、引用元を単純に全部コピペしたりしてたんですが、うまく動きませんでした (T_T)

 

やっぱりちょっと頭をひねることが必要ですね。自分のブログは自分仕様になってますもんね。

 

知識がないなりにいろいろトライすると何とかなりますよ。

それに面倒くさがりはダメですよね。単純にうまく行かなかったときは、少しネバってみましょう。教訓になりました。

 

おしまい

 

Copyright © 2017 758n's ReBlog All rights reserved.