こんにちは、じんのんです。
先ずはお詫びさせてください。
PCユーザーの皆様、スマートフォンユーザーの皆様、見辛いブログで本当に申し訳ありません。
おっちゃんのスキル不足が原因で、あっち（スマホ）を立てたらこっち（PC）が立たず、こっち（PC）を立てたらあっち（スマホ）が立たずの状態に陥っていて、どうしようもありません。
誰か～、助けてくれ～。
（嬉しそうな顔で言うとりますけど～）
あっ、ちなみにおっちゃんは、あっちでもこっちでもビンビンですよ。
ということで、今日のテーマはブログの設定がうまくいかず困っているお話です。
おっちゃんの備忘録として記事にします。
- 現在把握しているブログの問題点
- 考えられる原因
- スマートフォンのトップ背景が見切れている問題
- スマートフォンのSNSアイコン、Facebookだけ上に飛び出している問題
- スマートフォンだけ、会話形式でキャラクター消息不明問題
- スマートフォンの表がうまく扱えない問題
- 表のスクロールのやり方
- まとめ
- 関連記事
現在把握しているブログの問題点
現在、おっちゃんが把握している問題点は次の4つあります。
後ほど、一つ一つを詳しく見ていきます。
勘違いしないでくださいね、見るだけで解説ではないですからね！
なんてったって、今のおっちゃんには原因が分からないのですから、ただただ、優しく見守るだけですよ～。
「いやいや、他にももっとあるぞ！」とお気付きの方は、コメントして頂けると非常に助かります。
考えられる原因
そうです、全てはおっちゃんのスキル不足、勉強不足が原因であることは間違いありません。
スキル不足、勉強不足にもかかわらず、おっちゃんは新しいおもちゃを与えられた子供の様に大はしゃぎし、覚えたばかりの様々なテクニックを用いてブログの更新を進めていました。
ところがある日のこと、スマートフォンで自分のブログを確認すると、ブログに登場させたはずのキャラクターが消息不明になっていることに気付きました。
どこに行ったのか、じんのん君。。。
この日から、はるか遠い銀河の向こうで、はてなブログとおっちゃんとの、長く果てしない戦いが始まるのでした。
あっ、冗談です。
それでは、一つ一つの症状を、傍観者のごとく見ていきましょう。
スマートフォンのトップ背景が見切れている問題
先ずはスマートフォンのトップ画像をご覧ください。
はい、両サイドが残念なほどに見切れていますね。
この症状を回避するためにあえて、レスポンシブデザインをオフにして、スマートフォン用の画像を別途準備していました。
その画像ががこちら、
うん！とってもいい感じですね（自画自賛）
これはこれで気に入っていたのですが、見切れる原因を突き止めようともせず、先送りしていたことに変わりありません。
先ほど少しお伝えしました、ブログに登場したキャラクターの消息不明を回避するためには、レスポンシブデザインをオンにしなければならず、オンにすると「スマートフォンのトップ背景が見切れている問題」に直面するという、あっちを立てたらこっちが立たず状態に陥ってしまいました。
で、これを知りつつ黙認しているのが現状です。
読者の皆様、見て見んふりしてごめんなさい。
スマートフォンのSNSアイコン、Facebookだけ上に飛び出している問題
最初にスマートフォン画面の画像をご覧ください。
ホンマに・・・
「なんで？」
。。。もう一回聞くで～！
「なんで？」
ホンマに、どないなっとんねん！（怒）
読者の皆さんも、めっちゃモヤモヤするでしょ～。
デフォルトはこれ、
ほら、大きさがバラバラやろ～。
おっちゃんはこれがたまらなく嫌で、嫌で、それを解消するためにカスタマイズしたのに。。。
「もっとモヤモヤするわっ！」
ちなみに、公開済みのPC版では全く問題が無いのに、何故かPCのプレビューでも同様の現象が発生しています。
読者の皆様、モヤモヤさせてごめんなさい。
スマートフォンだけ、会話形式でキャラクター消息不明問題
今回の全ての問題の発端はこれです。
スマートフォン画面の画像をご覧ください。
そうです、ブログに登場させたはずのキャラクターが、仕事を放棄して逃亡しています。
もう一回、捜索願出したろか？
これもスプレッドシートで、即席で作ってん。
無駄やろ～。
時間無くて、毎日更新諦めたのに、こんなしょうもないことは時間が取れんねんで～。
不思議やろ～。
で、正しくはこちら、
はてなブログのデザイン設定にある、レスポンシブデザインをオンにすると、どうやらブログの持ち場に復帰するようです。
とりあえず、レスポンシブデザインをオンにすることで、問題を先送りにし問題を回避しています。
読者の皆様、問題を先送りにしてごめんなさい。
スマートフォンの表がうまく扱えない問題
これが一番の問題でした。
何故かというと、表がスマートフォンの画面の外にはみ出して、一切見れない状態になってしまうからです。
この問題も、レスポンシブデザインをオフにすることで、表をフリックすると全てが見れていたのですが、オンにすると固定されてしまい、表の右側が一切見えない状態になってしまいました。
この問題だけは最優先で解決する。。。
いやいや、どの問題もすぐに解決しなければいけないのですが、
表が見えんって致命的やん！
で、どないしても解決する必要があったため、グーグル先生にお願いし、解決策を見つけてもらいました。
表のスクロールのやり方
① 下記CSSコードをコピーする。
/* テーブルを横スクロールコード */
table {
width: 100%;
}/*tableをスクロールを追加*/
/*tableのセル内にある文字の折り返しを禁止する*/
.scroll {
overflow: auto;
white-space: nowrap;
}/*tableにスクロールバーを追加する*/
.scroll::-webkit-scrollbar {
height: 5px;
}/*tableにスクロールバーを追加する*/
.scroll::-webkit-scrollbar-track {
background: #F1F1F1;
}/*tableにスクロールバーを追加する*/
.scroll::-webkit-scrollbar-thumb {
background: #BCBCBC;
}
/* テーブルを横スクロールコード～ここまで */
画像赤線部
③ 設定を保存する。
④ ブログの編集モードをHTML編集にして、スクロール表示させたい表のHTMLコードの前後に、下記HTMLコードを追加する。
<div class="scroll">
（テーブルのHTMLコード）
</div>
以上で、とりあえず表にスクロールバーが出現し、スクロールできるようになるはずです。
ただ、この方法で良いのかが分かりません。
実際に下記記事は、とても大きな表を用いており、スクロール表示を適用済みですが、スマートフォンで見るとかなり見難いように感じています。
まとめ
読者の皆様、見辛いブログにもかかわらず、いつもお越し下さり本当に有難うございます。
最後に改めて、お詫びします。
たくさんの問題を放置したままにして、ごめんなさい。
いまから、少しずつスキルアップを積み重ね、今回見つかっている問題点を一つ一つ解決させられるように取り組んでいきます。
解決策につては、皆様のお役に立つような内容であれば、このブログを通じて発信していこうと考えています。
関連記事
