ブログデザインを変更しました

そろそろデザインを変更したいなと思いまして、一念発起で一気に変更しました。まだ、微調整が必要なところもある気がするのですが、取り敢えず完成です。

トップに飾る画像を前々から作りたかったこともあって、どう作ろうかと悩んだ結果 SVG で数学のように座標を計算して描きあげ(?)ました。パステルカラーでお気に入りです。

q-Az

SVG
<svg id="logo" viewBox="0 0 540 240" xmlns="http://www.w3.org/2000/svg">
    <title>q-Az</title>
    <polygon points="80,0 80,10 10,80 0,80" fill="#EF9A9A">
    <polygon points="80,0 80,10 150,80 160,80" fill="#F8BBD0">
    <polygon points="80,150 80,160 160,80 150,80" fill="#CE93D8">
    <polygon points="0,80 10,80 80,150 80,160" fill="#DCE775">
    <polygon points="160,80 150,90 150,240 160,240" fill="#9FA8DA">
    <polygon points="180,120 180,130 260,130 260,120" fill="#64B5F6">
    <polygon points="280,120 290,130 290,240 280,240" fill="#FFE082">
    <polygon points="280,120 290,130 430,130 440,120" fill="#80DEEA">
    <polygon points="440,240 430,240 430,130 440,120" fill="#FFAB91">
    <polygon points="280,120 290,120 360,10 360,0" fill="#C5E1A5">
    <polygon points="440,120 430,120 360,10 360,0" fill="#80CBC4">
    <polygon points="460,160 460,170 520,170 530,160" fill="#F48FB1">
    <polygon points="470,240 480,230 540,230 540,240" fill="#80CBC4">
    <polygon points="530,160 540,160 470,240 460,240" fill="#FFCC80">
</svg>

まだ圧縮が効きそうな SVG ソースです。おいおい容量を減らしていきます。

前回のデザインよりも h2 や h3 の見出しは見やすくなったと思いますし、行間も magin 値の倍率に規則性を持たせて見やすくなったのではないかと思っています。

前回のデザイン

思い出として前までのデザインのスクショを貼っておきます。

前回のブログデザイン1

前回のデザイン2

だいぶパステルなすっきりしたデザインに出来ました。

色々なブラウザで確認はしているのですが、デザイン崩れ等ありましたら遠慮なくメンションくださればありがたいです。

Top