第三弾!少しずつブログの見た目が変わってきた!
今回やった事
見出しデザインの設定
悩みに悩んだ見出しデザイン。ついに決定!h2とh3しか設定してないけどとりあえずこんな感じにしました。黒系と悩んだけど最初は水色でいきやす。参考にしたのはみなさんご存知サルワカさん! 設定場所は「デザイン/カスタママイズ/デザインCSS」
サイドバーのデザイン設定
これは上のサイトとこちらを参考にして設定いたしました。
remotosa.com「h1」の部分を「.hatena-module-title」に変えればサイドバーのデザインが変わります。設定場所は上と同じく「デザイン/カスタママイズ/デザインCSS」いつもの場所です。
アイキャッチ画像の設定
なんか見切れてるなー別にいっか。と放置してたアイキャッチ画像。でもこの記事を書いてからはそうはいかなくなった。初めて少し手を加えて作った?加工したアイキャッチ画像が見切れてしまったからだ。
こんなんになってた。
そもそも最初は左のように完成したものじゃなく、余白もなく画面いっぱいの犬バイクのドアップ画像だった。参考記事がどこだったか見失ってしまったのだけど、画像は見切れるの上等で作るものらしい。(そんな書き方はしていなかった)
はてなブログのアイキャッチ画像は真ん中の方に寄って拡大表示されるらしいので最初の画面いっぱいドアップだと右のようになってしまう。だから中央の方にキュッとタイトルや画像をやっておけば周りが見切れても問題ないのだ。
「これで大丈夫かな?」
確認方法は簡単!今回もお力をお借りしますサルワカさん。
完璧!
はい!ダメー!
この辺は今の所いいかなぁ、むしろこの程度ならこれでいいかなぁと私は思っているのでこの辺もちゃんとやりたい人はもっと勉強して画像作ってやり方教えてください。
ヘッダー画像の作成、登録
今回の最難関!もう!疲れた。最初はスマホで作成した画像をPCに転送して設定してみた。超簡単じゃん!と思っていた。スマホから見てみると文字が見切れてる!そして小さい。そこでヘッダー画像の上下左右の余白をなくすタグを仕込んだり、スマホでも綺麗に見えるタグを仕込んだけどなんかイマイチ。画像をヘッダー画像のサイズ「1000×200」にリサイズしてから再設定してみたら画像が荒い。そりゃそうだ。引き延ばしすぎ。大きなサイズの画像はPCで作るっきゃない。フォトショ?Illustrator?どちらもサクッと作れる感じでもなさそうだし、有料だし、1から覚えるのだるい。スマホで画像を作る所からここまでで1時間以上経過していて新たに調べるのは心が限界だった。
そこで出会ったのが「Canva」
無料!簡単!
会員登録をしてから「デザインを作成/カスタムサイズ」で好きなサイズの画像が作れます。「推奨」からはいろんな物に適したテンプレートが選べます。
詳しく調べなくても感覚でいける手軽さ。操作が本当に簡単。
そしてヘッダー画像とアイキャッチ画像を作ってみました。
はてなブログのヘッダー画像のサイズは「1000×200」
設定して確認。スマホからでもよし!でも結局左右に余白あるんだよな。もう疲れたからとりあえずはこれでよし。
ファビコンの作成、登録
これもcanvaを使って制作。
このはてなマークから黄色いトイレみたいなやつにしました。サイズは「64×64」の正方形。canvaの無料素材のみで作れます。有料にする必要は私にはまだなさそう。無料で十分!「設定/基本設定/ブログアイコン」で作った画像を登録すればOK。反映されるまでちょっと時間がかかりました。ファビコンのサイズについてはここを参考にしました。
デザインに満足するにはまだ時間がかかりそう
こうしてとりあえずデザイン関係をいじってみた。これ全部やるだけで1日くらいかかってしまった。少しブログに愛着がわいた。シェアボタンの変更もしたい!記事更新の日付表示させたい!それらをするには「 Font Awesome」のお勉強が必要みたい。まだまだだなぁ。
そして!
今回で!
10記事達成したのだ!前回言った通りグーグルアドセンスに申請を挑もうと思う。対策を練らねば。情報が多くて大変だけど最弱ブログがグーグルアドセンスに受かったらまた新しい情報として世に放たれるわけだ。どうなるかな♩楽しみだな♩