ヘアースタイリストサロン オビツ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) | 日記 | このブログの読者になる | 更新情報をチェックする

2015年11月11日

seesaaブログユーザー必見 スマホでseesaaブログのPCサイトをきっちり表示する方法 その1

もう11月も十日過ぎてしまった...orz

早すぎますよ、時が経つのが。

11月のオビツ定休日

16日17日
23日
30日


今回のエントリーは関係ない人には
ま〜たく関係ないエントリーなので
スルーしてもらって構いませんよ。


当ブログはアメブロでもなく、livedoorでもなく
なぜかseesaaというブログサービスを使っています。

ブログをはじめる時にネットで調べたら
「seesaa」ってのがいいよって書いてあったのに
素直に乗っかっただけ。

2006年の7月から始めた当ブログ
月に1本2本しかエントリーしない惨憺たる結果になっておりますが
PCメインから携帯電話
携帯からタブレット・スマホへと
表示される端末が変わっていった為

ブログの表示方法も実は随分変わっています。

今PCでこのブログ読んでる人いなんじゃないかな?
(元々読者いるのか?)

元々PCで見られることを前提に作られているで
携帯用・スマホ用と変換できるように
デザインが用意されて自動的に切り替わるように
なっているのですが
seesaaブログはスマホ用ページのデザインが数少ない
しかも広告が多数表示されると言うことで
ちょっとウザイ...。

なんか方法は無いもんか。

google先生に聞く

あるじゃないですか。

使える無料ソフト&無料サービス

この方法でやればseesaaブログをスマホで開いても
すんなりPCサイトを開く事が出来ます。

しかしこのままだとスマホでただPCサイトを見ているだけに...。
見にくい。

見る人にとってスマホの画面にぴったり合わせた方がいいに決まってる。
そんなサイトを人はレスポンシブというらしい...。

次回はseesaaブログのPCサイトをレスポンシブに
設定を変更します。

つづく
posted by 若旦那 at 22:21 | 埼玉 ☔ | Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする