HPリニューアルと近況報告

このブログしか見られていない方はお久しぶりです。昨年末の筋肉アドベントカレンダーぶりの更新になります。題名の通りですが、このHPをリニューアルしました。リニューアルの意図ですが、2点ありまして「開発環境変更」と「軽量化」です。

開発環境変更

開発環境の変更ですが、以前まではFTPで直接PHPファイルやCSSファイルを触っていたのですが、今風ではないといいますか、ローカルでGulpを使いSCSSなどを使うのが主流になってきているところもありまして、クライアントワークではそのような開発の仕方をしていたのですが、自分のHPは放置でした。

そこで時間があった(本当はない)ので自分の開発環境を見直すかと思ったのですが、色々とめんどくさいのでええい一から作り直すかとなりました。

余談ですが、テーマはUnderStrapというテーマを使いました。UnderStrapとは「スターターテーマ」でBootstrapベースのWordPressテーマにGulpの設定がしてくれているものです。最近はこのテーマからBootstrapのCSSを全削除して作ることが多いです。fontawesomeもはじめから入ってるので便利です。

UnderStrap

軽量化

前のHPを見たことがあるかたはご存知kと思いますが、とても重いHPとなっていました。重かった原因は以下の4点です。

  • トップページのスライダー
  • フッターのInstagramの写真20枚
  • 各記事のヒーローヘッダー(アイキャッチ)
  • プラグイン

トップページのスライダー、フッターのInstagramの写真20枚、各記事のヒーローヘッダー(アイキャッチ)は全て廃止。プラグインも見直しまして以下のようになりました。

  • AddQuicktag
  • All In One SEO Pack
  • AmazonJS
  • Contact Form 7
  • Crayon Syntax Highlighter
  • JP Markdown
  • LiteSpeed Cache
  • SNS Count Cache

Amazonの商品リンクを表示させる「AmazonJS」とコード表示させる「Crayon Syntax Highlighter」は消せるかなとも思うのですが、過去記事の修正の手間を考えて使い続ける方向にしました。

できるだけ画像を使わない余白を活かすミニマルなデザインに逃げたことによりそれっぽい感じにできたのかなと思います。

トレンドをちょっと取り入れた

そのままだと普通のHPになってしまうのでところどころトレンドを取り入れております。

アニメーション

ロゴやトップページ、Aboutページにアニメーションを施しております。気になる方は遊んでみてやって下さい。

グラデーション

昨年度からInstagramなどが取り入れ始めたグラデーションカラーを弊サイトでもとりいれることとしました。スマホだとわかりにくいですが、各hoverアニメーションなどで使っています。

余白スペースとグリッド

整理された均等なWebデザインが主流でしたが最近海外のサイトでも取り入れ始められている不規則にコンテンツを並べるデザインを自分のトップページだけですが取り入れています。

近況

基本的に飽き性なのでできるだけシンプルに飽きのこないデザインを意識して作りました。といっても来年には飽きてそうなんですが…。

というわけでリニューアルして更新意欲が沸いてきたので自分のHPのブログもちょこちょこ更新していきたいと思います!

近況ですが、Twitterを見ている方はご存知だとは思いますが、昨年末辺りから筋トレ好きがエスカレートしてトレーニングの為のサプリメントの情報サイトをはじめました。会員登録すれば色んな商品のレビューも書けるので是非よろしくお願いします!

FITOUT – “みんなで作る”トレーニングの必需品情報サイト

© 2011 - 2017 ShoYamane