Wikidotでスマホ対応にする

wikidot-smartphone.png

やるべきことは

  • スマホ用のアイコンを用意する
  • 文字が読みやすいようにサイズ調整する

ホーム画面に追加したときのアイコンを設定する

iOSの場合192px X 192pxサイズを用意する

文字が読みやすいようにサイズ調整する

wikidotのレイアウトとテーマをいじる必要がある。

bootstrap.png
「Which theme to extend」どのテーマから派生させるか、でBootstrap Baseを選ぶ
レイアウトをBoootstrap対応にする
iphone.png

レイアウトのサンプルコード

Standard Layoutという名前でレイアウトを作る、そして以下のコードを張り付ける。
Bootstrap versionは3.2


↑これを適用させるだけでとりあえずテキストボックスがスマホの縦横画面に沿うようにはなる。

押しやすいボタンにするには?

buttons.png
上の図のようにスマホでも押しやすい大きなボタンにするには?
何もしないと小さい文字リンクのままで押しにくいのです。
それにはCSSの編集が必要です。

smartphone

サポートサイト Wikidot.com smartphone