はてなブログの、スマホの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)

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

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

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

おしまい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です