2014-renewal

以前のブログからガラッとフルリニューアルしました。
デザインだけでなく、構成や要素も変えています。

今回は色々と挑戦してみたので、項目ごとにまとめてみました。
サイトはもちろん、引き続きWordPressを使っています。

デザイン

一番頑張りました。それはもう、一番です。

今記事を書いている時点ではまだ自己紹介的なコンテンツが用意出来ていませんが、
私はマークアップエンジニアです。デザイナーではありません。むしろ、デザインに苦手意識すら持っています。

今までもブログのデザインは自分でやっていましたが、
どこか手抜きというか、コーディングありきでデザインしていました。

それではダメだと一念発起して、しっかりデザインを起こしています。(デザイナーさんにも見てもらったりしました)

デザイン初心者が大量に色使うとカオスになりそうだなと思ったので、配色は3色を意識しています。

  • アクセントカラー:#dd66aa
  • メインカラー:#66dd99
  • サブカラー:#aadd66

プラスで、文字の色を茶色(#5f565d)にしました。ホバー色などはrgba値で透過させています。

HTML5+レスポンシブ+アイコンフォント

以前もHTML5で組んでいましたが、レスポンシブにしよう、しよう、と思いながら出来ていませんでした。
ついに今回のフルリニューアルで無事、レスポンシブ対応しました。ブレイクポイントは730pxひとつです。

この値は特に何かを参考にしたわけではなく、単純に左カラムのサイズ(690px)にバッファをもたせただけです。

ブレイクポイントについては、未だに最適解の答えが出ません。
もちろん、サイトによってその最適な値は違うのでしょう。ここ数年は特に、スマホの解像度の幅がかなり広がっています。
レスポンシブが騒がれだした当初の320pxなどの値は、もう気にしないほうがいいのかもしれません。
(レスポンシブのブレイクポイント、そもそもレスポンシブ必要なのか?など熱く語りたいものです)

また、メニューの横にあるアイコンは画像ではなく、アイコンフォントを使っています。
利用したのはFont Awesomeです。種類が豊富で使いやすいですよ。

マイクロデータ

schema.orgのサイト

http://schema.org/を導入しました。導入したのは初めてです。
最近はJSON-LDが出てきたり構造化がますます進んでいるように思います。

今回、導入したはいいのですが書き方に自信がありません・・・。

というのも、ヒエラルキーページを見るとわかりますが、とにかくデータが多い!
ブログの場合はBlogなのか、Articleなのか、その下は?と頭が混乱してきます。

構造化はしっかり仕様を理解すること、そして数をこなすことが必要そうですね。

Twitterカードの導入

Twitterカード

Facebook用のOGPに加えて、Twitterカードを導入しました。
どのように見えるかというと、こんな感じです。

https://twitter.com/mellowchanter/status/515403518908170240

画像が大きめに出てますよね?
このブログの場合は、しっかり毎回アイキャッチを作ろうという戒めも込めて、
Summary Card with Large Imageタイプを使っています。

ドキュメントがしっかりしているので公式を見ただけで入力は出来ますが、
FacebookのOGPと違い、Twitterカードは承認が必要です。

手順についてはこちらのサイトを参考にさせていただきました。

参考サイト
Twitter Cardsの申請をしてみたよというお話。

タグや記事の整理

昔の記事はタグがついていなかったり、内容が薄いものがあったりするので、
リニューアルを期に見直しを行っています。(まだ途中ですが)

未だに何故かアクセス数の多いGalleryViewの記事は取り下げませんが、
かなり古いバージョンの話なので、その辺りもそろそろ追記が必要かもしれません。

せっかく綺麗に、納得行くリニューアルが出来たので、ブログの更新頻度も頑張ってあげたいと思います。

copyright © mellowchanter.info All Rights Reserved.