Jimdo it youself・NewUIにリニューアルしました!

2014年8月からNewUIの提供がスタートし半年立ちまして、ようやく「気合いを入れて」一気にNewUIでのレイアウトに変更しました!

細かいところが調整しきれていないですが、運営しながら徐々に直していこうと思います。

多かれ少なかれ、既にがっつり運営しているサイトのレイアウト切替は準備が必要です。段取り等々すこしご紹介してみたいと思います。

 

まず、テスト用にアカウントを1つ取得。レイアウトを試して見る。

運営中なのに作業途中を見せるわけにはいきません。まずは、Jimdo Free無料アカウントを取得。運営サイトとは別にテストサイトを用意するイメージです。

そこからこんな手順ですすめました。


1)使用していたレイアウトの配置に近いものを捜索

残念ながら全く一緒のものはなかったので、ナビ配置を中心で考えて「Havana」をチョイス。

※ただ不本意ながら、ナビ幅などHTML/CSSでかなり調整しています。後述。

 

2)ヘッダー画像を新しいレイアウトにあわせて用意。

※ぴったりのサイズを調べるのに少し格闘。

 

3)「スタイル」を使って色や文字サイズのバランスをみる。

※コンテンツの文字サイズなどは切り替えてから調整することにして、ナビや背景などベースのデザインを基本にテスト。色は現在の色をチェックし、同一色をベースに設定。


◎色の変更で、黒←→白、濃い色←→薄い色に変える際、文字が見えなくなる箇所が発生する場合があります。これは、黒背景に白文字だったのを、白背景にすると文字が消えるという状態です。対照的な色に変える場合は注意してください。


確定したら、いざ本サイトへ反映

4)本サイトでレイアウト切替、そして全体調整

ヘッダー画像設定/タイトル文字設定/背景設定/ナビ色・文字サイズ設定/見出しのサイズ・色設定などなど


5)スマホとタブレットで表示確認


結論。現サイトの色などは事前にメモしておくと安心。

レイアウト選びは、ナビゲーションの配置に注目。

運営中のサイトは、必ずテストしてから。

レイアウトを切り替えると、リンク色なども変わってしまうので、念の為メモしておくと安心だと思います。リニューアルと割り切ってしまえば、配置や色はそう気にしなくてもいいのですが、ページ数やページ名の長さなど違う配置にしたことで、イメージ通りにいかないこともあるかなと思います。

いずれにしても、JimdoFreeをテスト用に別にアカウントを取得して、テストしてから変更することをおすすめします。


■ 余談  〜突然切り替えをした訳〜
実は旧レイアウトもそれなりに気に入っていたんですが、JimdoCafe高田馬場ご参加者に「このレイアウトはもう使えないんですか?」と質問いただいて、やはり利用できるレイアウトにしておこうと重〜い腰をあげました(^_^;) 。結果、HTML/CSSを使ってしまったのでそのまま参考にならないのが本意ではないですが「NewUIに切り替えたい」を共有できるかなと思います。一番時間がかかったのはレイアウト選び。これを決めるのがポイントですね。

〜ちょっと格闘したところも紹介しておきます〜

・フォント変更(書体の変更)

かなり個性的なフォントに切り替わってしまったので「ゴシック」に変更。但し「スタイル」での変更は1箇所ではなく、サイトタイトル、見だし、コンテンツ、ブログ等々設定必要な箇所が複数。

 

・スタイルで変更できないフォント、文字設定があった

ブログの日付やフッターの文字サイズ、文字色が「スタイル」では変更できなかった。またフッターの背景色をイエローにしたら文字が白だったため見えなくなり、HTML/CSS使用。

 

・文章や画像を広くなった幅にあわせて調整

全ページをチェックするのは時間がかかるので、トップページだけ調整。

最近変わった新機能、スライドショーを早速使用してみました。

 

・サイドコンテンツの調整(左横から下へ)

左ナビ下に配置していたバナー画像等が、ページ下に縦に並んでしまったので、「カラム」など使用し、配置やり直し。

 

・このレイアウトは、水平線の変更ができなかった、残念。

元々点線を使用していましたが、色も太さも点線実線も選べませんでした。

 

・不本意ながら、HTML/CSSでかなり調整してます。

特にナビゲーション。幅はもちろん、右寄せを左寄せに、、など元のレイアウト「Havana」をかなりいじっています。当サイトではできるだけ避けたかったのですが、このパターンの配置が選べず苦渋の判断。調整内容は後日公表しようと思いますのでしばらくお待ちください。


HTML/CSSを使用したと連呼してしまいましたが、選んだレイアウトを活かせば特に必要ありません。今回は、近い配置のレイアウトがなかったこと、旧デザインをできるだけ活かしたかったことで判断しています。

調整せず使えるレイアウトを選んでトライしてみてください。

 

以上、ご参考まで!