まだイケる。

日々の雑記をスタイリッシュにまとめてます(多分)

CSSなにそれ美味しいの?レベルの私が「Brooklyn」でブログデザインにチャレンジしてみた。

あとで読む

どうも、Naonosukeです。

今回はブログデザインについて書いていくよ。

 

 

 

シャレオツなブログにしたい

 

f:id:luna_jack21:20170909153939j:plain

 

前々から思っていたことなんですが、そこそこ時間使ってブログをオシャレにしたい!!!と思っていました。

本日は朝から特に予定も無かったので数時間掛けてCSSと格闘しつつデザインを弄り始めました。

 

コンセプト

 

デザインの方向性としては

 

  • 透明性のある配色
  • シンプルなデザイン
  • 表示速度が早い

以上を意識してデザインしました。

 

 

そこそこ完成した図

PC閲覧時

f:id:luna_jack21:20170909154423p:plain

PCで見るとこんな感じに見えて

 

スマホ閲覧時


f:id:luna_jack21:20170909154519j:image

スマホで見るとこんな感じに見えます。

 

まだ細かいところをこうしたいなぁって思うところがありますが、大体のデザインとしては出来上がりました。

自分の中では結構気に入っています。

 

 

カスタムベースはBrooklynを使わせていただきました

 

はてなブログ界ではかなり有名なテーマ「Brooklyn」を使わせて頂きました。この場を借りて作者様にお礼申し上げます。

www.notitle-weblog.com

 

カスタムせずともオシャレなブログが出来上がることで有名ですね。

本当にこういう技術とセンスを持っている方は尊敬します。

 

しかし私は変わり者だった

 

f:id:luna_jack21:20170909155451j:plain

そのまま使わせてもらっても素敵なデザインではありますが、ここで私の悪いクセが発動します。

いやぁ、人と被るのはちょっとな・・・自分でカスタムするか。

 

とは言っても私はCSSなにそれ美味しいの?HTMLとかそういったものの知識なんて全く持ち合わせていません。

あ、1つだけ知ってた<S></S>の間に文字を入れたら打ち消し線になるよね!うん、そんなレベル。

 

CSSにチャレンジしてみよう

 

f:id:luna_jack21:20170909160213j:plain

 

#header...border-bottom:1px solid #666;.....absolute....display....block.....

軍事機密の暗号化何か?私はとんでもない世界に迷い込んでしまったのかもしれない。

 

ある程度のカスタムならコピペで何とかなりますが、誰も気にしていないところまで弄ろうとしたら弄り方が載っていません。

www.style-yry.com

(こちらのサイトのカスタム方法にはお世話になりました。ありがとうございます)

 

こうなると、自分で地道に手探りでCSSを弄っては確認のトライアンドエラーになります。

最初は意味不明だったCSSも弄っているうちに何となく法則性がわかってきて(ここ弄ったら何とかなるだろ・・・)と思って弄ってみたらビンゴだったりします(思わず口笛が出てしまいましたw)

わぁ、明らかに俺レベルアップしてるやん・・・!そう実感できる瞬間でした。

 

やっぱり何でも実践ですね。あれ?これ数日前も書いたな

「興味ある事」パワーってヤバい。物事の吸収が明らかに早いし成長スピード3.5倍だよ! - まだイケる。

 

逆に言えばコピペが載ってない領域までカスタムすれば、オリジナリティが高まる!!

もっと弄ろ。

 

レスポンシブデザイン

 

f:id:luna_jack21:20170909161725p:plain

これが何かというと、PCでもスマホでもタブレットでも同じページを表示させるよって機能です。

レスポンシブデザインじゃなかったらURLは同じでもPCでアクセスしたらPC用のページへ、スマホでアクセスしたらスマホ用のページへ飛ぶようになっている。

だからPC用のページとスマホ用のページの2つを作らないといけない。もしもどっちかしかなかったらPCでスマホのページを開いたらめっちゃ小さくて読みにくくなるし、スマホでPCのページを開いちゃったら大きすぎて、いちいち拡大したりしなきゃいけないからね。

 

でもレスポンシブデザインってやつを使えば、1つのページでPCもスマホも対応できるようになる。

つまりPC用のページ作って、スマホ用のページも作っていたのが、1つのページ作るだけで良いようになる。楽。

 

今まで個別に作っていたけど、今回はそのレスポンシブデザインとやらにチャレンジしてみた。テーマ「Brooklyn」もレスポンシブデザインに対応してくれていたし。

 

 

愛着が湧く

f:id:luna_jack21:20170909162948j:plain

ブログのデザインをカスタムした理由として、もちろんこのブログに来てくれた方に見やすいブログで快適に読んでもらおうというのが大きな理由の1つですが、私としてはそれよりも大きな理由があります。それは「自分のブログに愛着が湧く」ということです。

 

ブログと言うものはネット上にある自分の住処のような気がして、自分の持ち物のようにキレイで快適なものにしたいなと言う思いがあります。

ですから第一に自分が自分のブログに愛着を持てるようにデザインをカスタムしました。

CSSとかHTMLとかで苦労した分だけ愛着が湧きました。

 

あと気に入ったデザインに自分の書いた文字が載るとテンション上がる。

記事書くのが楽しくなるよ。

 

さいごに:興味があればカスタムしてみよう

 

f:id:luna_jack21:20170909163558j:plain

確かに知識のない状態からカスタムしようとしたら時間は掛かるし、中々思ったようにいかなくて嫌になったりする瞬間もありますが、上手く自分で弄ったデザインがハマってくれた時の嬉しさは格別です。

 

もちろん公式テーマやカスタムテーマをそのまま使うのもオシャレで素敵なことだと思いますが、自分のブログにひと味付けたいと思っている方はチャレンジしてみると良いかもしれませんよ!

 

「「Brooklyn」でブログデザインをカスタムしてみた」でした。

ここまで読んでいただきありがとうございました!