[WordPress]ブログをリニューアルいたしました。

君がこの記事を読んでいるということは、もう気づいてしまっているだろう。(AMP記事の場合はデザイン適応してないから変わってないわ。気が向いたらPCか直打ちで見て)まあ掲題通りこの「たこさんちゃんねる」のデザインリニューアルを行いました。

それ以上でもそれ以下でもありません。ここから下は記事数を増やすためであり、なんかいかにもな理由を淡々と述べるだけの記事となります。

なぜデザインリニューアルをしたのか

もうすぐ2018年も終わるし、定期的に来る「デザインリニューアルしたさ」。あとはツギハギで運用していたので一度すっきりしたかった(コード的に)。使い回しコードを極力減らし、0から制作をしました。

12月2日に嫁にTOPページデザインをPhotoshopで作成してもらい、それをベースに他ページを制作していきました。そう考えると3週間ぐらいです。一番時間かかったのはTOPのメインスライドです。

あと、ロゴができました。手書きしました。ちなみに「365日の残し方」のロゴも書いてます。

イメージカラーの変更

自分のブログの色というか自分らしさ「たこさんちゃんねる」らしさ、どういうブランディングをしていきたいのか、というのをいろいろ考えました。特になかったので気に入っているショルダーバッグがマスタード色で行こーってなった次第です。かわいいじゃん？

iPad・タブレットへの対応

弊ブログのアクセス内訳がスマホ6割、パソコン3割、タブレット1割ぐらいです。1割というとIEへの対応ぐらいエンジニアとしては渋るものですが、昨今のタブレット人気と、iPadがほしいのでiPadサイズにもブレークポイントを増やしました。

通常はPC制作→スマホへの流れでコーディングしていくんですが、今回はスマホ制作→タブレット→PCとコーディングをしていきました。この流れのほうがなにかとスマートっぽいですね。

スマホ用にも一応コーディングしてますが、AMPを導入しているので、あんまり見ることはないですかね？

表示速度系

フォント

NotoSansなどのWebフォント系は少し違った見え方になるので使いたい気持ちもありますが、速度的にも重くなるのでローカルフォントに。ヒラギノ・メイリオです。PCは17px、line-height: 2、SPは16px、line-height: 1.8にしています。最近のサイトは文字が小さい傾向があって、なんかスタイリッシュに見えますが、自分は目が悪くて小さい文字だと読みづらいのでちょいと大きめにしています。

画像

TinyPNG(Web版)→ ShortPixel Plugin

横幅は1,000pxか1,200pxにしています。1枚1MBを切るように。写真ブログなので写真が多くなってしまうのですが、なるべく削れるところは削る。

シェアボタンを追従式に

右下にシェアボタンがついてくるようにしました。結構可愛い感じになったと思うのでぜひ押してシェアしまくってくださいね。

WordPressやデザインカスタマイズの相談乗ります

こここうしたいんだけどどうやってコード書けばいい？とか、おすすめのプラグインある？とか、こういう仕組みできる？とかあったら聞いてください。LINE@やTwitterか聞きやすい方で聞いてください。

バナーも作ってもらったので、ぜひ押してお友達になってください。