ヘアースタイリストサロン オビツHP

2015年11月12日

スマホでseesaaブログのPCサイトをきっちり表示する方法 その2 レスポンシブ

奇跡の連続エントリー!

11月のオビツ定休日
16日・17日
23日
30日


前回のエントリーがこちら
seesaaブログユーザー必見
スマホでseesaaブログのPCサイトをきっちり表示する方法 その1


seesaaブログのPCサイトをスマホで閲覧した時に
ぴったり見れる様にするデザインを

レスポンシブ
っていうらしい。

あっ


今回も関係ない人には
ま〜たくどうでもいい話ですから
スルーしてもらって構いませんよ。

簡単に言えば

大きい画面表示のときは
PCサイト全体を

小さい画面表示のときは
ブログタイトル→記事→サイドメニュー
と順番に表示させる様に指示する
プログラムを打ち込むわけです。

早速google先生に相談
色々なサイトを参考にしましたが

とある秘密ブログの更新うぇぶろぐ

ここが一番手っ取り早い(苦笑)

細かい説明は参考サイトにお任せして
ここでは手順だけを書きます。

まずは
seesaaブログの管理画面から
デザイン→PCのHTML→HTMLの追加もしくは既に書き換えたHTMLをクリック

からの中に

を貼り付けます。

次に
seesaaブログの管理画面から
デザイン→PCのデザイン設定→デザインの中から右サイドバーのデザインを選択して追加
追加したらデザイン名をクリックしてCSS設定画面を開きます。

そうしたらCSS入力画面の一番最後に

@media screen and (min-width : 0px) and (max-width : 767px){
#container{width: 100%}
#content{width: 100%}
.blog{width:100%; margin-left:auto; margin-right:auto;overflow:hidden}
#links{width: 100%}
}
を追加して終了!!!

これでスマホでPCサイトを見ても
ブログ名→記事→サイドメニューの順番で表示されます。

いや、これ結構大変だったんですよ。
posted by 若旦那 at 07:00 | 埼玉 ☔ | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック