読者です 読者をやめる 読者になる 読者になる

#あすみかんの上にあすみかん

#たのしいことしかかかないことをここに決意します

モバイルファストで作ったら衝撃の事実が判明した。

クリエイティブ

こんにちわんこそばななとスプライトを一緒に食べるとゲロを吐く〜!

あすみだよ〜〜〜ん!(人生)(すしすこ)

 

この前の続きでスキンを作っていくよ〜〜ん

なんだか世間はモバイルファストだからスマピョ版を完成させることとしたよ(?)

 

f:id:asumiso:20170215165527p:plain

 

 

 

けふのお品書き

  1. サイドバーを下に固定する(!important)
  2. サイドバーの中身の調整
  3. 色々可愛くする
  4. さよならグローバルヘッダ
  5. デザインcssにとりあえず貼ってみる

 

Before

上の方

f:id:asumiso:20170215154037p:plain

 

見出したち

f:id:asumiso:20170215154038p:plain

 

サイドバーたち

f:id:asumiso:20170215154040p:plain

 

モバイルを作るので

 @media only screen and (max-width: 480px) { }

のなかにかいてくにゃん!

 

サイドバーを下に固定する

これが今日のメインですね!

f:id:asumiso:20170215155209p:plain

positionをrelativeとfixedにする

f:id:asumiso:20170215155653p:plain

 

これでくっつくようになったぴょん!

f:id:asumiso:20170215155933p:plain

 

サイドバーの中身の調整

  • 横に並べていく
  • 角丸
  • 高さ合わせる
  • アスミ様(id:asumiso)消す
  • プロフィールのアイコン丸くする
  • カテゴリー横並び

.hatena-module

f:id:asumiso:20170215162838p:plain

 

.hatena-module-profile

f:id:asumiso:20170215162854p:plain

 

.hatena-urllist

f:id:asumiso:20170215162902p:plain

 

dekiagari

f:id:asumiso:20170215162933p:plain

よしゃ!

 

色々可愛くする

  • 見出したち

h3 h4 h5

f:id:asumiso:20170215163414p:plain

 

後述とかいたz-indexを9999にしたのはそれをつけないとこうなるから

f:id:asumiso:20170215163452p:plain

吹き出しが見えちゃう!!!!エッチ

 

  • 続きを読む
  • カテゴリー
  • この2つを角丸にしたヨ

 

.entry-see-more

f:id:asumiso:20170215163630p:plain

これはもともとのcssになかったのでポコポコ書く。

この時点でアスミ、ないcssはいじれないと思っていたが要素が当たっていたら自分で書けば当たるということに気づく(?)

text-decoration: none;

でリンクの下線にさよならバイバイ

 

.categories

f:id:asumiso:20170215163727p:plain

 

 

dekiagari

f:id:asumiso:20170215163920p:plain

 

f:id:asumiso:20170215163907p:plain

 

f:id:asumiso:20170215163851p:plain

 

さよならグローバルヘッダ

 

お前重なってうざいんじゃ

f:id:asumiso:20170215164100p:plain

ワレ死んどけ

f:id:asumiso:20170215164126p:plain

 

dekiagari

f:id:asumiso:20170215164218p:plain

 

デザインcssに貼り付けてみる

[デザイン]→[カスタマイズ]→[デザインcss]

ベタがきする!!!

 

しかしレスポンシブにしたのに携帯で見てもできなかった

あっるぇーーーーーーー??

岡くんに泣きつく。

しかし岡くんが後光をさしてくれる。

 

help.hatenablog.com

公式に書いてあるやないかい!!!!!!!!!!!!!!!!11

responsive:yes;

にしたらできたような気がする。

 

 

衝撃の事実

いざ、スマホで見てみるぞおおおおお!!!!!

 

 

 

 

 

 

 

 

 

 

f:id:asumiso:20170215164847j:plain

.......??????????!?!?!?!?!!?!?!?!?!?!?!?!

 

広告に阻まれ見られる範囲が極小になっていた。

ワイ、無事死亡。

pro版にすれば消えますか?

 

よーし明日からはパソコンのやつを作るぞー?^0^