デバイスにおける見栄えの違い
ブログの閲覧は、デスクトップPCの他に、スマホ（モバイル）で行うケースもあります。
実はこのブログにおいては、モバイル率が圧倒的に高いんですよね。
私の『Google Site Kit』のデータです。
モバイル（スマホ）で閲覧している人が7割を占めている形になっています。
なので、少しでもモバイルで見やすくしたほうがいいことに、今更ながら気づいた次第ですｗ
その一つが表関係ですね。
例えば上記の場合。
デスクトップPCであれば、普通にパッと見れる表ですが……
スマホで見ると、上記のようにスクロールしないと全部見れないんですよね。
これはちょっと不便だと思えてきます。
これに気づいたのが去年の話でして、少しずつ記事を修正している次第です。
しかしそうなると、従来のテーブル表では厳しいかという結論になってくるんですよね。
けれど、モバイルだけ見やすければいいという話でもありませんし。
なかなか難しい感じで、試行錯誤が続きました。
……いや、もっと早く気づけよ。
というツッコミが来そうな予感しかしませんねｗ
分かっています。私も自分で自分にそうツッコんだほどですから。
そんなわけで今回は、そんなテーブル等のCSS調整について書いていくことにしました。
どうぞよろしくお願いします＜(_ _)＞
あくまで一つの結論であり、まだまだ記事における試行錯誤は続いている状態です。
ベストな見栄えを定めるのはとても難しい。
それを実感しつつ、今日も記事を書いたり修正したりしております。
テーブル等の横幅を調整する方法
記事内のテーブルを修正しています。
モバイル版プレビューでは、上記のようにコンパクトに見えますが……
デスクトップ版だと、横いっぱいに広がってしまうため、見栄え的に微妙です。
これをなんとかしていきます。
CSSの追加（コピペOK）
『高度な設定』を開き、『追加CSS』の欄に以下のCSSを入力します。
（基本的にそのままコピペすればOK）
/* 全体の最大横幅を指定 */
max-width: 600px;
/* 中央寄せ(左) */
margin-left: auto;
/* 中央寄せ(右) */
margin-right: auto;
CSSを入力すると、上記画像のようにテーブルが変化してくれます。
キャプションボックスや説明リスト等にも使えるので、試してみてください。
上記『max-width』の数値は一例です。
必要に応じて変更し、見栄えの良い記事に仕上げましょう！
まとめ
というわけで今回は、SWELLにおけるテーブルなどの横幅指定について書きました。
なんて思われた方も多いでしょうｗ
かくいう私も書いていて、どうなのかという気持ちが拭えませんでした。
裏技と言うほどでもありませんからね。
SWELLにおける基本的な機能を、ただ紹介しただけだと言われれば、返す言葉もないくらいです。
しかし今回の内容を、私が三年越しに知ったのも、また事実だったりするのです。
（自慢できることじゃないですけど……ｗ）
なので自分用のメモ書きがてら、記事として残すことにしました。
初心者向けの紹介記事は多いですし。
これもその一つと考えれば、悪くはないんじゃないかなという言い訳を、ここに記しておきます。
簡単な機能ほど知らないケース、ありますよね？
あるあるだったら良いなぁ……。
そんなふうに思えてならない今日この頃ですｗ
それでは、また(⌒ー⌒)ﾉ~~~
この記事が気に入ったら
フォローしてね！