はてなProに登録したから、プログラミング未経験の僕が、まじめにブログをカスタムしてみた（スマホ用）
こんにちは、もりぞーです。
最近はてなProに登録しました。なんだかプロになって最大限の力を発揮できてないと思うんですよね。
まじでいつも通り、記事を更新しているだけ。
なんてもったいないことなのか。
とりあえず今回は少しずつ順を追って、ブログのカスタムをしていきたいと思います。
はじめに、私はブログ初心者なので、その辺は悪しからず。だから初心者の方も同じ目線に立って読んでいけたらうれしいな。
デザイン
今の現状
今のデザインの現状がこれ。
死ぬほど味気ない！そんでもって何も読む気が起きない！笑
こんな感じでとりあえず公式テーマの、Navy Blueってやつを使ってました。
とにかく味気ないし、なんのおもしろみもないデザインは脱したい！でも、HTMLとかCSSってなに？状態のぼく。
とりあえずググって、いろんなサイト見てパクって（勉強して）いこうと思います。
とりあえずググってみる
HTMLもCSSもちんぷんかんぷんな僕がまず、最初にしなきゃいけないのは、テーマ決め。
なんにもわからない人が最初にするのは、決められたものから、少しずついじっていくことだって、どこかの偉い人が言ってるかも。
とりあえずググってみると、なにやらレスポンシブデザイン対応のテーマがいいらしい。
なんか小難しい説明は、僕にできないので、簡単に説明すると、パソコン上でのデザイン表示とスマホ、タブレットでのデザインを同一にできる。
みたいですね。通常はてなブログだと、パソコンの表示とスマホの表示をそれぞれ、個別で設定しないと反映されないみたいですが、
レスポンシブデザインを使うとそれをいちいち、スマホのデザインと区別してカスタムしなくて良くなるってことですね。
じゃあもうレスポンシブデザイン対応以外ありえねーって感じになりました。
テーマが決まりそう。レスポンシブデザイン？
またググってると、上の方に出てきた方の記事で、Minimalismってテーマが良さそう。
参考にした方のリンク。作成者のホームページですね。
てかまあ、このリンク読んでちょっと真似して見ます。
ただ、このサイトの真似をするとなると、レスポンシブデザインはだめです！！
レスポンシブデザインはパソコンと同じ表示になってしまうので、
パソコン用のCSS、HTMLが統一されてしまい、スマホ用の表示がうまくいきません。
FontAwesome
このテーマに限らず、ブログをガチガチにカスタムする上で、ほぼ必須になってくるのがこのFontAwesome。
FontAwesomeにアクセスして、メールを登録します。
そのあと、メールが送られてくるので、パスワード設定、名前、とかを登録すると、
<script src="https://kit.fontawesome.com/○○○○.js"></script>
○○○の部分が、それぞれ登録した人ごとに、アドレスが変わります。
これを、設定→詳細設定→head要素に追加
て感じで、コピペしたらおっけーです。
上の参考サイトのまま、カスタムしたい場合は、
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
このIDを入れてください。
これで準備完了です。
あとはコピペしてみる
上記の参考サイト様から、手順を追ってコピペしてみると、スマホ用の
サイトがかなりいい感じに仕上がりました。
こんな感じに。
あとはメニューとか、タブを変更していけば、成功です。
まとめ
参考サイト様を結構見て、パクった（真似した）結果いい感じにサイトは仕上がりました。
昨今、アクセスの大半は、スマホからであり、カスタムはひとまず、スマホのみにしました。
現状はこれでいこうかなって思います。
また、細かいところの修正入れていきます。
結論として、
- HTML、CSS未経験でもググれば、既存のカスタムくらいならできる。
- ここからは、センス次第になってくる。色味とか、見やすさとか。
- 結構戸惑うが、達成感は半端ない。
って感じですね。
これからまた、更新していきます。
