Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (33,105Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (16,455Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,287Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (14,977Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,714Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (13,960Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (12,904Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,274Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,648Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,276Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,120Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,033Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,095Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,882Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (8,821Views)
  • 翻訳機能をWebサイトに埋め込む方法 (8,205Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,801Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,576Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (4,895Views)
  • 【番外編】フィッシングサイトからの偽メールが来た ~+120563143からのメールはフィッシングサイトへの誘導です~ (4,789Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots”

    2013年05月08日(水)
    6576Views

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    Twitter Bootstrapベースで作られたWordPressテーマ「Roots」。

    初期設定がとてもシンプルなデザインなので、自由に、かっこいいWebサイトを構築できるのが特長です。

    Rootsとは

    RootsはTwitter Bootstrapをベースに作られたWordPressのテーマです。
    Roots WordPress Starter Theme | Rapidly create sites with HTML5 Boilerplate & Bootstrap from Twitter

    初期状態ではとてもシンプルなデザイン・構造なのが特長です。
    Roots Demo

    「Roots」はこんな制作に向いています。

    • WordPressの機能面は活かしつつ、デザインはゼロから作りたい
    • でもデザイン面にそんなにコストはかけられない
    • でもある程度カッコいいデザインがいい
    • やっぱりレスポンシブにも対応させたい

    Twitter Bootstrapの使い方を知っていれば、なお向いています

    Twitter Bootstrapとは

    Twitter Bootstrapは、CSSをくわしく知らなくても、Twitter Bootstrapの規則にそってhtmlコードを書くと、今風のデザインができてしまう「CSSフレームワーク」と呼ばれる技術です。
    詳しくは「Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで | 小棹制作所」をごらんください。

    サンプルサイト

    Rootsを使って作られたサイトです。

    Rootsサンプルサイト1 Hosted VoIP | Business Phone System | Cloud PBX Service | ShoreTel Sky

    Rootsサンプルサイト Home – You Assist

    Rootsサンプルサイト Tagged, Inc

    導入方法

    Roots WordPress Starter Theme | Rapidly create sites with HTML5 Boilerplate & Bootstrap from Twitter」からテーマをダウンロードします。
    Rootsダウンロード画面

    ダウンロードしたzipファイルを解凍すると、「retlehs-roots-5af746f」というファイルができます。
    これをFTPソフトをつかってWordPressのthemesフォルダにアップロードします。

    themesフォルダは一般的には
    wp-content>themes
    という階層になっています。

    テーマのアップロードが完了したら、WordPressの管理画面に入ります。
    画面左側のメニューから、「外観」→「テーマ」とクリックすると、テーマ一覧の画面に進みます。
    ここで「Roots」というテーマを探し、「有効化」してください。
    管理画面にrootsをインストール

    これで、導入が完了しました。
    導入が成功していれば、サイトを表示させると
    Roots Demo」これに近いデザインのサイトができているのが確認できます。

    試しに、Twitter Bootstrapで実装できるモーダルウィンドウを実装してみました。
    Rootsテスト
    javascriptやCSSさえも記述することなく、このような機能を実装できてしまいます。

    まとめ

    Twitter Bootstrapの規則にしたがって記述するだけで
    グリッドレイアウトや、ドロップダウンメニュー、かっこいいボタンなど
    Twitter Bootstrapが提供している機能を実装できる「Roots」。
    本記事の「Rootsはこんな制作に向いています。」の項目で、向いている制作状況を書きましたが、それ以外にも安価な案件が大量に発生した際のテンプレートとして用いる、なんていうのもアリかと思います。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.