ウェブ学のすすめ

Study of Web Design & Programing

Photoshopの教科書 | sitebook [サイトブック] をリリースしてました


f:id:vinton:20140212032213p:plain

フロント側のWebサイト制作者のためのサイトとしてsitebookを制作しました。Webサイトを作るために最低限知っておくべき基礎から高度なテクニカルなことまで丁寧に解説していくサイトになります。

現在はPhotoshopだけを扱っていますが、将来的にはHTMLやCSSなども基礎からレファレンスまで紹介していく予定です。

何を担当したのか?

3人のチームで制作&運営しています。私の開発での担当はWordPress構築全般でした。

  • サーバー&ドメインの設定
  • オリジナルテーマ作成
  • レスポンシブ対応
  • ランキング機能追加
    • 全記事内のランキング
    • 投稿者ごとのランキング
    • カテゴリごとのランキング
  • 管理画面カスタマイズ
    • 入力チェックなど

プラグインがワーニングを出すわ、CSSが全然効かない!ということもあり
苦労しましたが2014年1月1日元旦から稼働しています。今も修正&機能追加しつつですが(^^;)

f:id:vinton:20140212035706j:plain

どんなサイトを作ったのか?

※2014年4月15日時点の機能

トップページ
  • カスタムヘッダー採用
  • カスタムメニュー採用
  • 新着順表示機能
  • カテゴリーごとに色が違います。
  • 投稿者のアイコンと名前を表示
  • All in one SEOのDescriptionの内容を抜粋に表示
  • スムーズスクロールな「トップへ戻る」
サイドバー
  • 豊富なソーシャルアイコン
  • 表示しているページに合わせたランキング順
    • TOPページ:すべての記事ランキング(1ヶ月)
    • 個別記事:記事が属するカテゴリーのランキング(1ヶ月)
    • カテゴリーページ:表示しているカテゴリーの記事ランキング(1ヶ月)
    • 投稿者ページ:表示している投稿者の記事ランキング(1ヶ月)
投稿記事
  • 記事下にソーシャルボタンを設置
  • 目次の自動表示
  • 関連記事の表示
  • 目次のスムーズスクロール
  • 前の記事・次の記事のアイキャッチ画像を表示
  • シンプルベストなコメント欄
  • 「いいね」を押すと素材(PSDなど)がダウンロードできるボタン
カテゴリ
  • 表示しているカテゴリに絞って記事を表示
投稿者
  • 表示している投稿者に絞って記事を表示
管理画面
  • タイトル・本文・スラッグ・All in one SEOのDescriptionの入力チェック
  • 投稿一覧にアイキャッチ画像を表示
  • 投稿一覧のステータスごとに色分け
レスポンシブ
ソーシャル

どんな記事があるの?

Photoshopの歴史といった導入からツールの使い方などの記事があります。その他にチュートリアルの記事もあります。

↓例えばこんな記事があります。

f:id:vinton:20140212023703p:plain:left,w200無料でAdobe CS2が手に入る!?Photoshop CS2のダウンロード方法 | Photoshopの教科書
http://sitebk.com/photoshop/cs2-download/

私としては面白そうな題材を作成するチュートリアルを紹介していきたいと考えています。
もし興味がありましたらブックマークやFeedlyなどのRSSの登録をよろしくお願いします。