ブログデザインを変えてみたぞ―CSSきほんのき
広告
こんにちは。ねこぜまるですよ。
当初からブログデザインについては気になっていましたが、HTMLとかCSSに関してはほとんど無知だったので敬遠していたのですが、今回思い切ってやってみました。
（ついでにブログ名も短く変更しました！）
というわけで、その過程と参考になったサイトなどをご紹介。
※スマホの方は変更が反映されてないと思いますが、最後にキャプチャ画像を載せておきますね
ブログテーマを変えたぞ
まず大きなところから変えました。
以前のテーマははてな公式のReportをつかっていました。こんな感じ。
公式テーマの中ではこれが気に入ってました。
字の大きさとか、ゴシックっぽいフォントがちょうどよかったので。
でもいまいちシンプルすぎるというか、「はじめてブログ作りましたあ！」って感じがぬぐえなかった。
そこで公式ではなくテーマストアからインストールしたものを使うことに。
現在使っているのはInnocentというテーマです。人気のやつ。
やはりシンプルでいい感じ！
見出しを工夫したぞ
見てくださいよこの見出し！！かわいくないですか！？？
適当でいいからなんか描こうと思ったら必要以上にかわいらしくなっちゃいました。
さて、やり方ですがこちらの記事を参考にしました。
ブログテーマを変更したのもこちらの記事から影響を受けています。
”見出しに画像をつける方法”という部分に基づいて変えてみました。
また、見出しの上下のラインも加えたのですが、それはこちらが参考になりました。はてなブログでのCSSのコピペするべき場所から教えて下さってます。
なんとなくここまで来て僕はCSSのことを理解し始めました。
コピペしてるだけなんですが、いろいろカスタマイズしてるうちに自分はプログラマなんじゃないかと錯覚してしまいますね。
ヘッダ画像も変えたぞ
以前のものよりサイズを大きくして、インパクトのあるものが作れた気がします。
ちなみに前のやつはこれ。
新しく作ったのはこれ。
で、でけえ…。
ちなみにフォントは「やさしさゴシック手書き」を使用しています。
フリーフォントを探すときはこのサイトが便利。
ちなみに画像編集はGIMPで行っています。無料なので。
あまりそういうフォトショみたいな感じの本格的なお絵かきソフトは使ったことはなかったのですが、LINEスタンプを作り始めてからだんだん慣れてきました。実戦で成長するタイプ。
僕の LINEスタンプについてはこちら。↓（宣伝ではありません。孤独を埋めているのです。）
プロフィール画像も変えたぞ
プロフィール画像についてはこちら。
デフォルトのサイズでは小さく、いまいちアイコンを覚えてもらえないだろうなと思い大きく変更しました！
不満が解消されてめっちゃすっきりした。
あと、この記事にあるように、Chromeなどをであれば”要素の検証”といって閲覧しているサイトのHTMLや、ヘッダ画像や記事の幅などのサイズ（px）が確認できます。
僕は確認した値に合わせてヘッダ画像を作りました。
おわりに
今回変更した点は以上になります。
初めはコピペするところがどこなのかすらわかってませんでしたが、やってみると意外となんとかなるものですね。また気が向いたらちょこちょこいじってみたいと思います。とくにスマホ版の表示は変更できてないと思うので、頑張りたいです。
はてなブログをいじってく過程でホームページ作成に関する知識が得られればいいなー。あ、いつも見たまま編集でやってる方は自分が編集してる記事をHTML編集で表示すると面白いですよ。勉強になりそう。
最後に改めて変化を確認！
これが
こうなった！
見出しはこう！
めっちゃ変わった！うれしい！
それではまた！！
