ブログサイトを作成しました!

このたびブログサイトを立ち上げてみました。
はじめての投稿になりますが、サイト作成の背景と流れについて振り返ろうと思います。

スポンサーリンク

ブログサイト作成の背景

TechAcademyの受講

9月よりTechAcademyに申し込みました。オンラインで受けることができるプログラミング学習サイトです。初学者向けとしてドットインストールProgateなどがありますが、TechAcademyはコスト(価格・時間)では大きな出費であるものの、カリキュラムやサポートがその分充実しており断然おすすめです。このあたりについては別で書こうと思いますが、ウケ放題なるコースを受講しています。その中でWordPressコースを受講したのでこのサイトを構築してみた、という背景です。

ニュースサイトのネットサーフィン

これとは別に学生時代にSmartNews, Gunosyが誕生してキュレーションの面白さに衝撃を受け、Kamelio, NewsPicksを利用していたこともあります。特にNewsPicksではネット上で自由に意見が発信できることの面白さを知り、片道1時間半の通学中はひたすらキュレーションサイト横断して意見を発信することをしていました。

これらふたつがか重なり、ブログサイトをWordPressで構築してみた、というのが当サイトです。

ブログサイト構築の流れ

備忘録の意味合いも含めて、簡単に当サイトをどう作ったについて記載しておこうと思います。

Photoshopでロゴ製作

まずPhotoshopでロゴを作りました。ヘッダーにも配置しているこの画像です。

ロゴ画像

もともとhタグで書いていましたが、味気なかったので画像にしました。和風な落ち着いた印象は保ちたかったので、以下のフリーフォントを利用しました。

  • 主題:壊雲体
  • 副題:ロゴたいぷゴシック

Skeletonでテーマ製作

Skeletonは【骨格】という名前の通り、軽量なCSSフレームワークです。グリッドシステムを採用したBootstrap同様のレスポンシブフレームワークですが、公式サイトにもある通り軽量なことが売りだと思っています。bootstrap.cssが120KB程なのに対して、skeleton.cssは12KB程で10分の1のファイルサイズになります。主な機能でも、グリッド・テーブル・フォーム・ボタン・リスト・メディアクエリなどブログサイトを構築する上での必須機能は満たしていたのでこちらを選択しました。機能が限られているので学習コストも非常に低く即時利用可能な点も良かったです!
Skeleton.css
出典:http://getskeleton.com/

SassとCompassでstyle.css製作

これが非常に便利でした!SassもCompassもTechAcademyのWEBデザインコースで知ったものですが、もっと早くに知っておけばCSSで苦しまずに済んだだろうと思います。
Sassは Syntactically Awesome StyleSheet の略で、構文的に、イケてる、スタイルシートの意味になります。Sassとは、CSSの文法を拡張して、更に便利に書けるようにしたもので、カラーコードやある要素に対して指定したCSSを変数として使いまわしたり、ピクセル指定の演算が出来たりします。特にSCSS記法という書き方の場合、ネスト構造になるため対応するHTMLと同様の作りになり、作業スピード向上・バグ減少の恩恵を得ることが出来ました。


出典:http://sass-lang.com/

更にCompassも利用することで鬼に金棒状態になりました。CompassとはCSS3など旧ブラウザに対応していない記法を補完してくれるものです。ベンダープレフィックスを自動でつけてくれるものと認識しておけば間違っていないと思います。

ここらへんについては、別の機会に詳しく書きたいと思います。

WordPressで構築し終える

最後にWordPress化しました。上記の通り、そもそも既存テーマを使う想定はせず独自データで作りました。これはTechAcademyの課題の関係もありますし、WordPressの理解をする目的もありました。独自テーマで設計したことでWordPressに詳しくなれたと思います。
本サイトに導入しているプラグインについてもいつか詳しく書きたいですが、今のところソーシャルプラグインは利用していません。理由は表示速度の問題です。WP Social Bookmarking Lightというプラグインの利用を考えていましたが、読み込み速度が大幅に遅延したため利用を断念し、ソーシャルボタンは独自にデザインし直しました。工数は増しましたが、①プラグインに頼らず開発できるスキルがついたこと、②表示速度を早く出来たこと、この2点が良かったと思っています。

そんなこんなでサイトを立ち上げることが出来た12月でした。
ザックリ、開発:1週間、プラグイン選定・調整:1週間の2週間でしょうか。
繰り返しになりますが、未経験からでもこんなスキルが身につくTechAcademyは本当におすすめです。友達紹介キャンペーンもやっているので興味がある方は当ブログについてのFacebookページから連絡をお待ちしています。

今後について

さて、ブログサイトは出来たわけですが、当面は自分の好きなペースで興味のある題材について取り上げていこうと思います。

仕事柄、E-コマースの分野でUI/UX改善に近いことをなりわいにしていますし、IT全般には興味があります。最近では仮想通貨周りで書きたいことも多いので、気ままに続けていきたいと思います。

          
    

スポンサーリンク

  
Scroll Up