レスポンシブWebデザイン対応サイトに変更してみた

当サイトで利用しているJimdoのテンプレート「Helsinki」が、ようやくレスポンシブ・ウェブデザイン対応のレイアウトになりました！

管理人はサイドバーをスマホにも表示、かつモバイルフレンドリーなサイトにしたいと常々思っておりましたので、「遂にその夢が叶う！」的な喜びがあります。

そこで早速、レスポンシブWebデザイン対応で「新バージョンのHelsinki」への変更に、恐る恐るですが挑戦してみました。

試しに今、PCブラウザの端をドラッグして任意に動かしてしてみて下さい。

ブラウザーのサイズによって、当サイトがフレキシブルにグニャグニャと美しく？表示されるので、見ていて面白いですよね♪

これが、レスポンシブ・デザインです。

さて、肝心のレスポンシブレイアウトへの変更手順です。

「管理画面」の「レイアウト」（※）をクリックすると、すでに旧バージョンのHelsinkiを選んでいる場合は「新しいバージョンが有効になりました」と表示されますので、そのまま「適用する」→「保存」をクリックします。

たったこれだけ。これだけで現在のデザインをほぼ変えることなく、チェンジできます。

実際に変更してみて気づいた事ですが、新バージョンは、旧バージョンよりもグローバルナビゲーションの横幅がやや狭くなっています。

なので、状況によってはナビタイトルの文字サイズ・親ページ数などを見直して再調整する必要がでてきます。

ちなみに当サイトでは、「お問い合わせ」ナビを子ページに格下げしました^^;。

また、レイアウトの変更直後は、コンテンツからはみ出て表示さている画像がありましたので、その場合は画像の「縮小」、「ページに合わせる」ボタンを交互に押して保存すれば直ります。

そしてもうひとつ、新バージョンのヘッダー画像サイズの最大値が、やや小さくなっていることです。

具体的には画像最大値が「横幅1030px・縦幅200px」から「横幅973px・縦幅189px」へと変更されています。

以上より、新ヘルシンキではテンプレートの横幅がやや縮小されたことになります。

といいますか、全体がスリムで引き締まったことで、かえって見栄えが綺麗になったという印象です。なので、細かい変更等は気にせず、これはこれで良し！としましょう。

■ 2016年6月2日 追記：現在はレイアウトの横幅がなぜか元の広さに戻ったみたいです。

なので、子ページを再び親ページへと格上げしています。

ここで、せっかくなので、今回のレスポンシブ対応レイアウト「新Helsinki」への変更で使い始めた、カスタマイズ用CSSを公開します。よろしければご利用ください。

これを適用すると、当Webサイトで今使っている基本デザインと同じになりますよ♪

当サイトのヘッダー画像下にあるページタイトルは、編集画面から削除してスッキリとした表示にしています。

（ページタイトル枠は削除しても元に戻せますのでご安心を。これは他のレイアウトでも同様にして使える裏技・小技です。）

では、ログインしましたら、管理メニュー画面の「基本設定」→「ヘッダー編集」にて、下記CSSをコピペしてお使いください。

※最後に「保存」ボタンを押したら、必ずプレビューをクリックして確認しましょう。

<style type="text/css">

.cc-content-parent { margin-top: 0 !important; margin-bottom: 0 !important; }

.jtpl-header { border-top: solid 3px #0079c2 !important; }

#contentfooter { padding: 15px !important; }

.jtpl-content h1 {

 border-radius: 5px;

 border-left: 5px solid #0079c2;

 background: #a0d8ef;

 padding: 15px 10px 10px;

 margin-bottom: 10px;

 }

.jtpl-content h2 {

 border-top: 1px dashed #0079c2;

 border-bottom: 2px solid #0079c2;

 padding: 15px 10px 10px;

 margin-bottom: 10px;

 }

.jtpl-sidebar h1 {

 background: #707070;

 padding: 10px;

 }

.jtpl-sidebar h2 {

 border: 1px solid #888888;

 background: #e8ece9;

 padding: 8px 10px 8px;

 }

table { border-collapse: collapse !important; }

th { background: #e8ece9 !important; }

a:hover img { opacity: 0.9; }

body a:hover { text-decoration: none; }

</style>

上記CSSの最終二行に、下記2種類のスタイルを追加しました。 

a:hover img { opacity: 0.9; }

リンク画像にマウスオンすると画像が半透明になります。よく見かける「あのエフェクト」です。

【画像リンクの参考】メモサイト どんなもんじゃろい様：

Jimdoの画像リンクに簡単にエフェクトをつける方法（透明度変更CSS）

body a:hover { text-decoration: none; }

リンクテキストにマウスオンすることにより、アンダーラインが消える効果を体感できます。

上記のCSSや当サイトで使っている背景色についての補足説明をします。

なお、CSSの基本的な記述方法を知りたい方には、HTMLクイックリファレンスというサイトが参考になります。

コンテンツ部分にあたるクラス名のうちの1つです。ここでは、コンテナ上端とテンプレート上端・下端の外余白を同時に指定しています。

文字どおり、ヘッダーエリアを表すクラス名です。Headerの上部に水平線をつけています。

いわゆるフッターエリアです。この部分はスタイルから背景色を指定すると、デフォルトでは概要・ログインなどの文字位置の見栄えが悪くなるため、あえて内余白を付けています。

メインコンテンツ領域内にだけ表示できる見出し大(H1)と見出し中(H2)です。

ここでは先頭に「.jtpl-content 」を付けることにより、サイドバー見出しと同じデザインにならないようにしています。

他の標準レイアウトでもほとんどが利用できますが、代わりに「#content_area」を付けないと反映しないものもあります。

※見出しの文字色・大きさは、基本編集機能の「スタイル」から指定できます。 

サイドバー領域内にだけ表示できる大見出しと中見出しです。

メインコンテンツ部分の見出しとは違った装飾が可能になりますので、これでウェブデザインの自由度が高まるかと思います。

※見出しのフォントカラーとフォントサイズは、基本編集機能の「スタイル」から指定できます。

Jimdoで使用する「表（テーブル、表組み）」で隣り合うセルの罫線同士を重ねることにより、シンプルでスマートなテーブルを表示しています。このCSSは、Helsinki以外の他のレイアウトでも使用できます。

Jimdoでは、表の編集において「表のプロパティ」と「セルのプロパティ」で罫線のサイズをそれぞれ「１」に指定しても、実際に表示されるのは「2pxのやや太い罫線」になってしまいます。

そのため、人によっては「もう少し細い罫線の表がいい」という方もいらっしゃるかと思います。

前述のテーブルで、見出しにあたる部分の背景色を指定しています。このCSSは他のレイアウトでも利用できます。

但し、ご使用になる場合は、「その他コンテンツ」→「表」→「追加オプション」→「HTMLを編集」と進み、<td>見出しにする語句</td>を、<th>見出しにする語句</th>に書き換えておく必要があります（Jimdoでは表の見出しにあたるHTMLの「th」がデフォルトで記述されていないため）。

なお、レイアウトによっては基本編集で表の背景色が指定できないものがありましたので、末尾に「!important」を付け加えています。

【三田線ブルー Mita Line Blue】 #0079c2、rgb(0,121,194)

「スタイル」から任意の背景色を指定したい場合は、rgb(,,)に半角で数値を入力します。

【スカイブルー sky blue】 #a0d8ef、rgb(160,216,239)

【三田線ブルー Mita Line Blue】 #0079c2、rgb(0,121,194)

関連ページHelsinki ＆ カスタマイズも併せてお読み頂ければ幸いです。

当サイトが、旧・Helsinki時代に使用していたデザインです。

【ご注意】

下記のCSSは、レイアウト変更前の旧バージョンにだけ利用できます。

新バージョンには使えませんので、予めご了承ください。

<style type="text/css">

.content { width: 720px !important; }

#sidebar { width: 280px !important; }

#contentfooter { padding: 15px !important; }

#wrap { padding-bottom: 10px !important; }

#content_area h1 {

 border-radius: 5px;

 border-left: 5px solid #0079c2;

 background: #a0d8ef;

 padding: 15px 10px 10px;

 margin-bottom: 10px;

 }

#content_area h2 {

 border-top: 1px solid #0079c2;

 border-bottom: 2px dashed #0079c2;

 padding: 15px 10px 10px;

 margin-bottom: 10px;

 }

#sidebar h1 {

 background: #707070;

 padding: 10px;

 }

#sidebar h2 {

 border: 1px solid #888888;

 background: #e8ece9;

 padding: 8px 10px 8px;

 }

table { border-collapse: collapse !important; }

th { background: #e8ece9 !important; }

</style>