無料からはじめるDIYスターターキット

長期的に育てるための環境を用意しました
伝える品質を向上していきましょう

プロトタイピングから開発、公開まで、一貫フローを念頭に、BootstrapベースのWordpressテーマを用意しました。1ページから数百ページ規模の情報配信に対応するスターターです。

  • 複数のサイトを作りながらよく使うユニット等、随時アップデートを行っていきます。
  • コメント機能等は実装していないこともあり、今のところ公式テーマ登録の予定はありません。
  • PreprosによるLess編集とワードプレス子テーマでの編集を推奨します。
ファイル 内容
404.php エラーページ (検索フォーム付)
apple-touch-icon-precomposed.png ホームアイコン
archive.php アーカイブページ
favicon.ico ファビコン
footer.php フッタ
functions.php 機能設定ファイル
header.php ヘッダ
index.php インデックス(ホーム)ファイル
page-xxx.php ガイドライン・ページサンプルファイル等のページファイル
page.php ページ
screenshot.png テーマイメージ
search.php 検索結果ページ
sidebar.php サイドバー
single.php 記事ページ
style.css テーマ設定スタイル
/dist Bootstrapフレームワークフォルダ(Less CSS等)
/fonts ウェブフォントフォルダ
 NotoSansCJKjp 日本語フォント
 Glyphicons Bootstrap採用フォント
 Genericon Wordpress採用フォント。ソーシャルアイコン等
/img 画像フォルダ
/inc インクルードファイルフォルダ
 carousel.php スライドショーユニット
 inc-sidebar_banner.php バナーユニット
 inc-sidebar_new-entries.php 新規投稿ユニット
 inc-sidebar_social.php SNSユニット
 inc-social-all.php サイトシェアユニット
 inc-social-content.php 投稿シェアユニット
 navbar.php ナビゲーションユニット

導入からサイト公開までの流れ

最初がもっともテクニカルで様々な専門用語が飛び交います。さっと立ち上げるにはフリーのサービスで十分でしょう。ただ、後々、かゆいところに手が届かないんですよね。「長期的に育てるための環境を用意しよう」がモットーですから、「わからないけど立ち上げたい」という方は導入サポートをご利用ください。ヒントは随時更新していきます。「みんなで学んでしまいたい」。ええ、導入ワークショップも承りますとも。

導入サポートサービスはこちら

作業環境の用意

高価なツールは要りません。写真加工とテキストが書ければまずは充分。手元のパソコンで試してからアップロードしたり、作業内容を見える化したりと、用意しておくとスムーズなツールはご参考まで。必要に応じて使っていきましょう。

作業内容 おすすめアプリケーション
基本
写真を加工する Be Funky
HTMLを修正する Brackets, CotEditor, Coda
応用
ローカルでテストする MAMP
アップロードする Cyberduck, Transmit
Lessを扱う Prepros
差分を管理する Kaleidoscope or Cornerstone
カラーを検討する Color Picker, Google Color design, Adobe Color CC
グラフィックをつくる Sketch

公開環境の準備〜Wordpressインストール

最初だけ必要となる、最も技術的なステップです。情報は多くありますが、業界向けでなんだか難しい。ここでの脱落者の多いこと。ここは経験者に任せるべしです。

  1. サーバー・ドメイン契約
  2. データベース設定
  3. Basic認証設定
  4. FTPでwpフォルダをアップロード
  5. wpディレクトリからインストール
  6. 公開ディレクトリを調整(参考: http://bit.ly/1Bb87tS )

Wordpressの初期設定

ワードプレスにログインできました。中身を調整します。

  1. 設定 > 一般:サイトタイトルとサイトアドレスを入力
  2. 設定 > 表示設定:RSS/Atom フィード「抜粋」とする
  3. 設定 > 表示設定:公開までは、検索エンジンでの表示を「インデックスしないようにする」
  4. 設定 > メディア設定:すべて値を0とする
  5. 設定 > パーマリンク:カスタム構造 /%postname%/ とする
  6. Future Archivesテーマをインストール(アップロード)
  7. プラグインをインストール(サイトの目的によって選考します)
    • Add From Server
    • Overwrite Uploads
    • All In One SEO Pack
      • Schema.org マークアップを使用チェックを外す
      • ホームタイトル入力
      • ホームディスクリプション入力
    • WordPress インポートツール
    • WP No Category Base
    • WP Multibyte Patch
    •   

ひろめるためのSNS・OGP設定

シェアする際に表示される情報を登録しましょう。以下3つの作業を行うのみです。

  • Facebook App IDを取得し、ヘッダに記載
  • No-imageを作成し、差し替え
  • 忍者おまとめボタン(これは便利)を利用し、取得したSNSコードを記載

組み合わせの妙です。編集とデザインと

基本となる最小限ユニットはすでに揃っています。いかに組み合わせるか?いわゆる設計・デザインの主要なパートです。ここが勝負どころですね。一緒につくりあげましょう。

  • サイト目的・規模・メニュー構成を決める
  • コンテンツの配置を決める
  • ブランドカラーのメインとサブを決め、LESSで反映する
  • ロゴ画像を用意し、配置サイズ調整を行う
  • 固定ページを作成し、メニューと結びつける
  • アイコン・ファビコンを準備する( http://convertico.com )

内容をいれましょう。更新方法を体験しましょう

枠はできました。用意した中身をいれていきましょう。

  • 投稿記事と固定ページを理解する
  • 原稿・写真・グラフィックを用意し、公開情報を登録する
  • 修正方法を理解しておく

Googleに登録して公開です

ほっといたら誰か見てくれる?いいえ。公開してからが大事です。
まずは公開おめでとうございます。

  • 設定 > 表示設定:検索エンジンでの表示「インデックスしないようにする」解除
  • Basic認証解除
  • URL登録 http://www.google.co.jp/addurl/
  • アナリティクス登録 https://analytics.google.com/analytics/
  • アナリティクスタグ挿入・目視
  • WEBマスター登録 https://www.google.com/webmasters/tools/home?hl=ja
  • sitemap.xml 登録
  • 参考:www直下ファイル基本構成
    • wp(ワードプレスフォルダ)
    • origin.js (アナリティクスタグ)
    • googlexxxxxxxxxxxx.html (サイト登録ファイル)
    • favicon.ico(ファビコン)
    • .htaccess(設定ファイル)
    • sitemap.xml(サイトマップ通知)
    • index.php(インデックス)

さぁ、はじめましょう。

導入サポートサービスはこちら