【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! --/--

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

3591349
ホーム \| 日記 \| プロフィール	【フォローする】【ログイン】

ショップハンター

< 新しい記事

新着記事一覧(全439件)

過去の記事 >

2014.06.05

[やってみよう] トップ自由欄のレイアウトをレスポンシブ仕様にアレンジ

テーマ：楽天ブログいろいろ(1491)

カテゴリ：当ブログオリジナル

　楽天ブログのトップ自由欄の使いみちにお困りの方や、見栄えにこだわってみたい方のために、当ブログのトップ自由欄のレイアウトのソースコードを配布することにいたしました。

ショップハンターのトップ自由欄はどのように動作しているのか

　当ブログのブログテンプレートは、ページ幅によってパーツの幅が伸縮したり、移動したりするように構成されています。
　一般的にはリキッドレイアウトと呼ばれる構成方法ですが、若干レスポンシブな要素も備えておりますので、画面解像度の異なるブラウザで閲覧してもレイアウトが極端に崩れることはありません。

　赤で囲んだ部分の動きにご注目ください。

【1680 x 1050 ピクセルの解像度で全画面表示させた場合】

（クリックで原寸）

　ご覧のように、パーツがぎっしり横方向に並べられているのを確認できますね。
　それでは解像度はこのままで、少しずつページ幅を縮めてみます。

【第一段階：上中央、右のパーツが下に動く】

（クリックで原寸）

　中央、右のパーツが下に動いていますね。
　それではさらに縮めてみましょう。

【第二段階：上右のパーツがさらに下に動く】

（クリックで原寸）

　上部中央、右のパーツが下の段に動いていますね。
　それでは中央部のパーツの動きも見てみましょう。

【全画面のとき】

（クリックで原寸）

　1680 x 1050 ピクセルの解像度で全画面表示させたとき、ページ中央部のパーツはこのように左右に並んで表示されます。

　それでは縮めてみましょう。

【右のパーツが下に移動する】

（クリックで原寸）

　表示幅が極端に縮まると、右のパーツが下に移動します。

トップ自由欄用のテンプレート配布

　このようなテンプレートに興味がおありの方は、以下のページにお進みいただき、トップ自由欄に貼りつけて効果をお試しください。

自由欄テンプレート[ショップハンター仕様]
自由欄テンプレート[モノトーン仕様]
自由欄テンプレート[モノシンプル仕様] ← アフィリエイト画像を貼りたい方向け

備考と注意点：
1. 編集失敗に備え、事前に既存の自由欄のコードをテキストファイルに保存しておいてください。
2. トップ自由欄の編集モードは、「自動改行なし（<BR>タグで指定）」を選択してください。

（クリックで原寸）
3. 現在、旧広場型で動作するように最適化しておりますが、他のテンプレートでも多少幅を調整すれば動作します。
4. 初心者の方は、★で囲まれた部分のテキストを編集してください。
5. ご利用にあたっては、当方への連絡は一切不要です。カスタマイズもご自由にどうぞ。
6. こんなレイアウトはイヤだ！という方も多かろうと思いますので、今後は時間を見ながら色彩パターン、体裁の異なるテンプレートも増やしてみたいと思います。

　必要に応じてお試しいただけると幸いです。