1. HOME
  2. その他
  3. 4度目のデザイン変更!ブログが新しくなりました!

4度目のデザイン変更!ブログが新しくなりました!

その他

目次

なんとこれで4度目のデザイン変更です。(記事として3度目のものはありませんが、実はちょっと前までのデザインが大々的に行ってはないものの3度目でした) 何回変更するんだという感じもしなくはないですが、個人的には今までの中で一番好きですしこれで落ち着きそうです。

デザインのこと

フォントについて

以前までは【游ゴシック体】を使用していましたが、最近は【I-OTF-UDゴ表示Pro L】を使用しています。初のFONT PLUSです。細めのもので文字がはっきりしたものを探していたので、一番のお気に入りです。 時間の表記(timeタグで囲われている部分)は、【Osaka?等幅】を使用しています。

見出しについて

前回と変わりませんが、こんな感じです。



メインカラーについて


カラーは【#A2D6F2】を使用しています。 ポートフォリオとの統一感を出すためにこの色にしてます。この色自体は個人的にハマっている色です。

一覧のデザインについて

カードタイプのデザインにしました。 以前までは一覧で見える記事の内容分が200文字などで固定でしたが、タイトルが長いと高さがそれぞれ違って不便だったので、、、、 今回からはタイトルの長さによって2行になったり3行になったりするようにしています。

カードタイプにしたわけは3回目のデザインが区切りがわかりにくく、押すという感じが全くなかったことから、押せる感を少しでもだしたいと思いカードタイプにしました。

マークアップ面のこと

SEO

SEOとして【schema org】を導入しました。 まだできてない部分もありますが、のちのち記事にまとめようかと思います。

アクセシビリティ

まだまだこれから勉強をしていくところでもありますが、とりあえずメインなタグ(headerとかfooterとかmain,asideとか)にはrole属性をつけてみました。

a-blog cms

本当にちょっとした部分ですが、【setRendered】を初めて使ってみました。エントリー詳細ページの【関連エントリー】の部分に使用しています。 便利だよ〜というお話しは聞くのですが、includeに慣れすぎてなかなか【setTemplate】を使えていないので反省しつつ、関連エントリーのENTRY_BODYの中に入れたかったので【setRendered】はとてもありがたかったです。

あとがき

ざっとこんな感じでこのテーマ(デザイン)を作りました。まだまだプロフィールも表示したいなとかカレンダーのスタイルきれいにしたいなとか、schema orgについてももうちょっと勉強していろいろやってみたいので、これからまだまだ変わります!!!


ブログデザイン

この記事を読んだ方におすすめ