ブログを初めて過去３ヶ月間、既存のテーマだったものこの度新しくデザインから作り直しました！
新しく作ることで工夫した点、ここがポイントというところを簡単に紹介していきます。
タイトルについて
テーマを新しくする前から使っている「miki's weblog」
まず他にもおしゃれな名前はあったと思いますが、無名なわたしは名前を覚えてもらわなくては！
と思いタイトルには名前を入れました。
「weblog」については「blog」は「weblog」が元であり、このブログは「web」のことに関しての記事をあげるので「weblog」としました。
ちゃんと由来があるんですよ〜！
読みやすさを重視しました
今回作るのが「ブログ」ということで、人に読んでいただくものなので
読みやすさを重視しました。
やはり個人差もあるので微調整などは必要かと思いますが、そこは日々改善していきます。
文字サイズ
ブログの文章の文字サイズは body-14px の 1.142em。つまり約16pxに設定しました。
ブログとしては14pxがよく見られ、引き締った・シャープな印象を与えますが、
今回はそういった見た目の印象よりも可読性を考え16pxにしました。
15pxと迷いましたが、14~16pxが最適なサイズと言われていて、その最大のサイズにしました。
文字色
#383838に設定しました。
白の背景にこのような色だと黒に見られがちですが、実は少し黒よりやわらかい色合いになっています。有名どころのサイトでも一部分を除きますが、
- google #545454 , #222
- アメブロ #333
- Yahoo #1d3994
のような感じに#000というのは使われていません。
文字色#000で背景色が#fffだと目に刺激を与えてしまうらしいので今回は#383838にしました。
他にも#333や#484848など、濃いグレーであれば刺激も与えずに黒に近いです。
文字間
letter-spacingを0.8ptにしました。
文字が多くなるにつれて詰まっていると読みにくいな、と個人的に感じいろいろなサイトを見ていて、見やすい！と感じたサイトがありましたので、そちらを流用させていただきました。
pxでいうと1~2pxが程よい隙間が空くようです。
行間
line-heightは1.8にしました。
単位は親要素で計算された値が継承されるらしいのでつけていません。
参考サイト
デザイン面でのポイント
次は見た目・デザインで特にわたしが工夫や気に入っている点について紹介します。
ブレイクポイント
ブレイクポイントを２つ作りました。
- 991px（タブレットサイズ）
- 767px（スマホサイズ）
参考サイト
手書きアニメーション
今回使用したのはjQueryプラグン「Lazy Line Painter」
SVGの手書きアニメーションになっています。
ページの滞在時間も増やせるのではないか、という狙いでアニメーションにしました。
著作権を気にしない背景画像
背景画像にしようと検索していると、やはり著作権を気にしなければならないので画像がだいぶ限られてきてしまい、なかなかいいものが見つからなかったり。
そこで自己紹介でも書いたように、写真を撮ることが好きなので、それを背景に使用しました。
ヘッダーの背景は手軽に変えれるようにしたので、時々変えますのでチェックしてみてください:)
コメント欄
コメント欄にはDISQUSを使用させていただきました。
管理が楽、デザインも綺麗という点と、SNSのアカウントでコメントが出来るという点で
DISQUSを使用させていただきました。
その他細かいところ
直帰率を下げたい
直帰率を下げようという狙いで下記のことをしました。
- ヘッダーの固定
- タイトル、固定ヘッダー内にHOMEリンクの設置
- TOPへのリンクの設置
- サイドにカテゴリー、アーカイブ、タグの設置
タイトルとヘッダー、二つリンクを設置した点については、
今の時代大抵のサイトがロゴタイトルでトップページに戻ることができますがタイトルだけだと、
スクロールした時にわざわざ上に戻らないとトップページにいけないことに気づきヘッダーにも設置しました。
TOPへのリンクについてはスクロールが０の時は必要ないのでスクロールした時にのみ表示するようにしています。
サイドカラムについては、最初はスクロールしても観れるように、固定サイドにしていましたが、
カテゴリーなどが増えた時のことも考え、現在は固定はしてません。
Webフォントの使用とその対策
ところどころWebフォントをしようしました。
使用したのは
- サイドのメニューの最初の部分
- プロフィールのSNSの部分
です。
WCANでのお話を聞いて画像にしていた部分をWebフォントに変更しました。
そこで問題となったのが、ページ読み込み時にレイアウト崩れがおきるようになったことです。
対策として、「ローディング画面」を表示するようにしました。
とても簡易的なものですが効果てきめんですので、作り方は今度ブログにまとめたいと思います。
使用したJS/jQuery
- jQueryプラグイン「Lazy Line Painter」
- ページ上部への遷移リンクのフェードイン・フェードアウト
- ページ間遷移をゆっくりとさせる
- タブレット・スマホ時のハンバーガーメニューのスライドダウン・スライドアップ
- サイドカラムの固定*
- ページ読み込み時のフェードイン・フェードアウト*
[*]の項目については一度つけて今は使用していませんが正常に使えるところまで実装しました。
JSで使用
animate/scroll値の取得/fadeIn/fadeOut/delay/変数
jQueryで使用
toggltClass/removeClass/hide/hasClass/slideToggle/html/if/移動先の取得/スクロールの速度/if
作り方・設置の仕方については別途記事を書きたいと思います。
あとがき
少々長くはなりましたが、ここまで読んでくださりありがとうございます。
こんな感じで初めてのテーマ作りではたくさんの工夫をしました。
周りでは「a-blog cms」で作ってる子がいなく難しいところもありましたがどうにか出来ました。
まだまだ調整点などはたくさんあります。なので、常時更新してよりいいものにしていきます。
ソースコードに更新日時も書いているのでぜひ確認してみてくださいね:)
改善点などSNSやコメントへぜひどうぞ。ブログに対するコメントもお待ちしてます！！
この記事を読んだ方におすすめ
