Loading...

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

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

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (31,956Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (15,442Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,077Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (14,560Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,403Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (13,042Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,106Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (10,610Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,522Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,265Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,000Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (9,614Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (8,877Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,862Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (8,313Views)
  • 翻訳機能をWebサイトに埋め込む方法 (7,478Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,784Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,562Views)
  • 【番外編】フィッシングサイトからの偽メールが来た ~+120563143からのメールはフィッシングサイトへの誘導です~ (4,783Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (4,610Views)
  • 保育園・保育所のホームページをほぼ無料(独自ドメインのみ別途必要)で作成する方法 〜弊社作成tumblrオリジナルテーマの使用例〜

    2015年12月11日(金)
    421Views

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

    できあがりはこんなかんじです

    デモサイト

    Banners and Alerts と こさお保育園 こさお保育園

    はじめに

    弊社・小棹制作所では下記、多目的に使えるtumblrテーマを発表しています。

    多目的に使える告知系サイトを作れるtumblrテーマを作成しました | 小棹(こさお)制作所

    そのテーマを用いたサンプルとして、保育園のホームページを作成しました。
    使用例のひとつとして、参考にしていただければ。

    初期設定について

    tumblrを用いてホームページを作成するには、tumblrサービスへの登録などの初期設定が必要です。
    詳細は前述「多目的に使える告知系サイトを作れるtumblrテーマを作成しました」の記事をご確認ください。
    かんたんな内容でしたらメールでのご回答も可能です。
    また有料にて基本機能から作成方法までレクチャーサービスもやっております。

    当テーマ使用にあたって事前に用意が必要なもの2つ

    メインビジュアル

    トップページにある大きい画像です。
    ページの左右いっぱいに表示されます。

    適当な写真がない場合は、インターネットで無料・有料画像素材配布サイトからの入手もできます。

    背景画像

    記事部分の背景に使う画像です。
    サンプルサイトでは芝生の画像を使っています。
    これもインターネットでさまざまな配布があります。
    「seamless texture」などで検索するとヒットしやすいです。

    作成方法の解説

    ここからは、前述の記事にてtumblrの登録とテーマの設定までが完了したという前提で進めます。

    完成ページ

    こさお保育園

    デザイン面はとてもシンプル
    入力が必要な箇所も少なめで、設定のわかりやすさに気を配りました。
    行事予定やできごとなどをブログ感覚で追加できるようになっています。

    保育園の名前を入力

    カスタマイズ Tumblr

    保育園についてのかんたんな説明文を入力

    カスタマイズ Tumblr

    メインビジュアルをアップロードする

    カスタマイズ Tumblr

    基本カラーを決める

    カスタマイズ Tumblr

    背景画像をアップロードする

    カスタマイズ Tumblr

    個別ページを作る

    カスタマイズ Tumblr カスタマイズ Tumblr

    記事ページを作る

    10 Tumblr 10 Tumblr

    htmlを使ってより細かいレイアウトの記事を書くこともできます。
    下記、赤で囲った箇所を「html」に変更してください。

    11 Tumblr

    カスタマイズバージョン

    有料にて当テーマの御社だけのオリジナルホームページへのカスタマイズサービスもおこなっております。

    サンプル

    こさお保育園

    有料カスタマイズ例

    • サイドメニュー追加
    • 特設リンクバナーとリンク先ページ作成
    • テーマ著作権表示削除
    • twitterタイムライン設置
    • facebookライクボックス設置
    • Twitterボタン・いいねボタン追加
    • レスポンシブ(スマートフォン)対応

    そのほか、ご要望に合わせてお見積りさせていただきます。

    まとめ

    この記事のまとめはありません。

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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