一番はPCとスマホのレイアウトが、かなり違うため両方に気を使ったまとめ方をしないといけないのが一番の問題でした。いろいろ調べたところ、日本のテンプレート「Vaster2」が評判が良さそうなので使ってみることにしました。レスポンシブ対応テーマなので基本的な表示構成はPC/スマホで同じです。
テンプレートはここ『トーマスイッチ』でダウンロードできます。今回はテンプレートデザイナー付きを使用してみました。設定の仕方もダウンロードのページに書かれているので、一応は安心です。
テーマ変更
では実際の手順を説明します。「テーマ」を選択して、先ず、「モバイル」の下にある歯車をクリックして 「いいえ、モバイル端末でもパソコン用のテーマを表示する。」にチェックを入れる。
次に右上の「バックアップ/復元」で必要ならバックアップをします。その後、テーマをアップロードで上記でダウンロードしたテーマファイルをアップロードします。
これで、テーマの変更の作業は終わりです。
流石に、これだけではレイアウトは崩れますが、ブログ内容が表示されていればデータ移行は成功です。
今回はテーマテンプレート付きを使っているのでBloggerの編集画面の「レイアウト」が100%ではないのですが使用できます。
さっそく、選択して使ってみましょう。シンプルテーマと違って以下のようなレイアウトになってます。
レイアウト変更
レイアウトが変わってしまっているので、テーマ変更後の画面はかなり崩れています。サイドバーに設定していたガジェットがヘッダーの直ぐ下に移動したりしています。このレイアウトの順番でPCでもスマホで表示されるので、従来と同様にガジェットを再設定します。
Vaster2で変わった項目
このブログを変更しながら確認できた内容だけですが．．．
文字飾り「見出し」「小見出し」「準見出し」は初期設定が変更
PC表示の画像レイアウトは左固定
関連記事が自動で本文の最後に挿入される
などが確認できています。基本はスマホで綺麗なレイアウトを目指している感じでPCではややイメージとは違ってましたが、それはそれで、また、味がありますからOK！
トラブルは「<DIV>で「width:80%」を設定するスマホ画面が変」になったり、ページ下に出る[Previous]...[NEXT]ボタンが崩れておかしくなる現状が発生しました。原因はサイドバーに設定しておいたバリューコマースの「JavaScript」がVaster2移行後にはレイアウト画面で、なぜかサイドバーではなくて一番下に配置されてしまい表示されてませんでした。すっかり忘れていていたのですが、この動作していなかった「ガジェット」を消去したら正常に表示されるようになりました。
今までに書いたブログ記事はVaster2に合わせてないので少しずつ変更するかそのままにしてしまうか思案中です。
