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

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

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

4さいがブログのスキンをつくるにゃん!

けふのおしながき

  1. 環境をつくる
  2. Boilerplate.cssを理解する
  3. ためしにサイドバー(PC)を色々いじってみる
  4. サイドバーでちょびっと泣いたこと
  5. 画面ちいさくしたときのサイドバー
  6. できなくて泣いたこと

 

たったー!あすみだよー!あんねー!いまねー、ほいくえんのねー4さいなの!なんかねー、しゅうかつがねー、なんかねー、あるからねー、わすれかけてるcssをおもーだそうとしてるんだよ〜〜〜〜!!ほいくえんのねー、ねんれいだからねー、ちょうかんたんなとこでつまずくしちょうかんたんなことができてたっせいかんがたくさんでちゃうの〜〜!でもね〜〜いいの〜〜〜〜!にんげんはせいちょうするんだもんねっ^^さあ、cssのきおくをふっかつさせるの〜〜〜〜〜!われのふっかつをのぞんだか〜〜〜っ!

 

(要約:自分の限りなく少ないcssの知識を成長させたい)

(要約:本当に簡単なところから始めてるけど笑わないでほしい)

 

f:id:asumiso:20170208205148p:plain

 

 

環境を作る

ブログのスキンを作ると言っても最初からゴリゴリかくわけではありません。

公式のテンプレートがあるのでそれをダウンロードしてブログを作るというわけですね。

help.hatenablog.com

 

  1. ブログスキン作成用のブログを作る
  2. GitHubでBoilerplateテーマのソースコードを見るからBoilerplate.cssをダウンロード
  3. ブログスキン作成用のtopを[別名で保存]する
  4. 3で保存したhtmlファイルのcssをBoilerplate.cssに変える

f:id:asumiso:20170208210839p:plain

 

これでBoilerplate.cssをいじればいいわけね...わかったわよ...

 

Boilerplate.cssを理解する

f:id:asumiso:20170208212918p:plain

 

ほいくえんじなので、ここまでしかりかいできなかったの〜!

たくさんのうみそつかったぽyp〜〜!

 

ためしにサイドバー(PC)を色々いじってみる

chromeで開いて右クリック→検証でいろいろ出てくるのを使ってサイドバーをいじるぞ〜〜〜〜!

f:id:asumiso:20170208213952p:plain

 

 

hatena-module-titleっていうクラスらしいので、cssの中から発見する。

パソコン版をいじるのでimport valiableの中から発見するぞ。

f:id:asumiso:20170208213759p:plain

 

わ〜〜〜い!あった〜〜!

角がまるい黒四角背景で、白文字にして、なんか、よくあるやつにした〜い!

しかも真ん中寄せに文字を文字した〜〜い!

background-color:black;

color:white;

border-radius:10px;

text-arign:center;

あと何いじったかわすれた

f:id:asumiso:20170208214225p:plain

 

 

そしてできあがったのがこちら〜〜!!

えらーいっぱい見えてるのは気にしないで〜〜>ω<

いやんサイドバーかわいくなったぴy〜〜!!

f:id:asumiso:20170208214334p:plain 

 

サイドバーでちょびっと泣いたこと

あれ.....?ちょっとまってwhiteにしたのにさあ、なんで下2つ灰色なの?

f:id:asumiso:20170208214740p:plain

 

 

hatena-module-titleやんけ!!!!!!!

うそ...つら...泣いてる....(20分くらい泣いた)

f:id:asumiso:20170208214751p:plain

 

でも簡単なことだったにょん!

その中に a があったにょん!hatena-module-titleのaを変えなきゃなのか〜〜!

あれ?しかも普通にコードにもあったにょん!

なんで気づかないの〜〜!でもほいくえんじだからしょうがないね〜〜!

f:id:asumiso:20170208214855p:plain

 

f:id:asumiso:20170208215045p:plain

 

 

おまえもcolor:white; にしてやる!!!!!

f:id:asumiso:20170208215218p:plain

えへへ(*^0^*)

 

画面小さくしたときのサイドバー

 

import media queriesのtabletのところを違う色にしてみるか...

さっきのところから必要なところをコピッペするぞ〜〜〜〜〜!

コピッペでちた! 

f:id:asumiso:20170208220512p:plain

 

 

いえ〜〜〜〜〜い!小さくした時ピンクになたよ〜〜〜!^^

すごいたくさんかいたなあ〜〜〜〜!!

はあ!!!!!!!!!!!!!!!!!!!!!はあ

エラーはみないで〜〜〜!!はずかぽい〜〜〜〜!

f:id:asumiso:20170208215541p:plain

 

できなくて泣いたこと

メイン部分をposition:relative、サイドバーをposition:fixedすると

画面小さくした時にサイドバーが消えちゃう〜〜〜!

泣いた〜〜〜〜〜!泣いた〜〜〜〜〜!

しかも大きいときもサイドバーの下部分がちぎれちゃう〜〜〜!

泣いた〜〜〜〜〜!だれかおちえて〜〜〜〜〜〜!