Loading...

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

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

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (34,134Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (17,074Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,451Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,277Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,983Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (14,651Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (14,643Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,447Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,777Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,297Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,285Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,267Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,272Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,246Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,890Views)
  • 翻訳機能をWebサイトに埋め込む方法 (8,784Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,821Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,586Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (5,138Views)
  • TwitterBootstrapでも採用されている、たぶんもっとも簡単なレスポンシブ対応テーブルの作り方 (5,008Views)
  • カフェ・喫茶店向けホームページのtumblr無料テーマを作成しました。

    2015年11月17日(火)
    543Views

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

    はじめに

    弊社小棹制作所でカフェ・喫茶店向けホームページのtumblrテーマを作成しました。
    メイン画像をブラウザーいっぱいに配置できる今風なレイアウト。
    それに全体の色合いも黒に絞り、写真素材がもっとも映えるよう工夫されています。
    tumblrテーマですので、初期費用・運用費用はいっさいかかりません。
    今回は、そんなカフェ・喫茶店向けのtumblrテーマを無料で提供します。

    関連ページ

    デモ:CosaCafe

    ダウンロード:ここをクリックするとダウンロードが開始されます
    もし、ダウンロードが上手く開始されない場合は、大変お手数ですが、メールyujikosao@me.comまで、ダウンロードしたいテーマを記載してご連絡ください。
    メールにてファイルを添付いたします。

    tumblrテーマまとめ:小棹制作所自作tumblrテーマまとめ | 小棹(こさお)制作所

    おしらせ:【お知らせ】tumblrテーマ制作において、デザイン部分をお願いできる方探してます | 小棹(こさお)制作所

    著作権について

    当テーマは下記の著作権を設定しています。

    • 当テーマは商用利用を可能としております。
    • 当テーマの無断販売は不可です。
    • 当テーマのコードの改変については自己責任において認められます。
    • 当テーマの再配布は可能です(販売は不可)。
    • ただし、コード改変・再配布ともに、フッダー部分の著作権表示については削除せずにご利用ください。

    当テーマをfacebook、twitterなどのSNSで宣伝してくださった方に向けて著作権の表示をブラウザ上で非表示にするサービスをしております(著作権を放棄するものではありません)。
    テーマを使用しているアドレスとSNSで宣伝をしてくださった投稿を下記メールアドレスまでお送りください。
    yujikosao@me.com

    このテーマの特長

    • トップページは必要な項目を記述するだけでカンタン作成。
    • トップページ以外のページはブログを書くような感覚で作成できます。
    • 写真がもっとも映えるよう、それ以外は抑えめなデザイン。
    • tumblrを使っていますのでサーバー維持費などの運用費は一切かかりません。

    有料にて初期設定まるごと代行作業も承っております

    テーマ使用に必要な知識

    トップページ以外のページとニュース記事をご自身で書いていただく必要がありますので、ブログ記事を書くレベルのhtmlの知識が必要になります。

    注意する点

    対応ブラウザ

    このテーマは下記のブラウザでの動作検証済みです。(2015年11月時点)

    • Chrome最新
    • Firefox最新
    • Safari最新
    • InternetExplorer10~最新

    有料にて古いブラウザへの追加対応も承ります。

    レスポンシブ対応

    当テーマはレスポンシブ対応には対応しておりません。
    スマートフォンでの表示は、パソコンでのレイアウトがそのまま表示されます。
    有料にてレスポンシブへの追加対応をいたします。

    当テーマご利用にあたってご用意いただくもの

    ご自身のtumblrアカウント

    当テーマはtumblr専用ですので、ご使用にはtumblrアカウントが必要です。 下記tumblr公式サイトよりアカウント登録をしてください。
    登録 | Tumblr

    トップページのメイン画像用の写真

    トップページのメイン画像用の写真を1点ご用意ください。自動的に横幅いっぱいにになりますので、大きさの指定はありません。ただし横幅いっぱいに広がるデザインになっているため、かなり大きめの画像がおすすめです。横幅が1000~2000ピクセル程度のものがベストです。

    googlemap埋め込みコード

    やり方は後述します

    手順

    テーマをダウンロードする

    下記リンクより、当テーマをダウンロードします。
    ここをクリックするとダウンロードが開始されます

    tumblrアカウントの取得

    下記tumblr公式サイトよりtumblrアカウントを取得します。
    登録 | Tumblr

    ダウンロードしたテーマをtumblrに適用させる

    tumblrへログインすると、ダッシュボードページが表示されます。
    ここで下記動画のやり方で「HTMLを編集」画面に入ります。※動画に表示されているサイトは別ものですが設定方法は同じです。

    「HTMLを編集」にあるコード入力欄に、ダウンロードした当テーマのhtmlコードをまるごと上書きします。
    これでテーマが変更されます。

    項目を記述する

    下記画像を参考に必要項目に記述をします。

    カスタマイズ Tumblr

    googleマップの埋め込み方法

    googleマップの埋め込み方法については下記の動画を参考にしてください。


    メニューを投稿する

    ダッシュボードから、下記画像のやり方で新規投稿を行います。

    このテーマは、下記「画像投稿」のみ、有効になっています。

    Tumblr

    Tumblr

    1 Tumblr

    新規でページを作成する

    メイン画像の上部にあるメニューとそれに対応するページを作成します。
    下記動画を参考にしてください。※動画で表示されているサイトは別のものですがやり方は同様です。


    有料でページ作成の代行も行っております。

    「デフォルトのモバイルテーマを使用」項目のチェックをはずす

    下記の方法でtumblrのスマートフォンなどのモバイルでのデフォルトテーマを使わないように設定します。

    カスタマイズ Tumblr

    カスタマイズ Tumblr

    投稿の「さらに読む」機能でトップページに表示される記事の文言を省略する

    上記最後の画像、テキスト挿入の段階で、テキスト入力欄左に小さく表示される「+」マークをクリック、出てきた項目の右端のアイコンをクリックすることで、「さらに読む」機能が使えます。
    これで区切ったより下の文言はトップページの商品一覧では表示されず、個別記事ページでのみ表示されます。

    以上です

    設定方法の解説は以上です。疑問質問などがございましたらお気軽にご連絡ください。

    有料サービス

    当テーマを有料にてカスタマイズいたします。

    • 配色・デザイン・レイアウトの変更
    • ページ作成代行
    • メニューバー以外のページ追加(特設バナーページなど)
    • 商品のカテゴリー分け(ドリンク・フード・スイーツなど)
    • 古いブラウザへの対応追加
    • レスポンシブ対応追加
    • メインビジュアルのスライダー(画像送り機能)設置
    • 独自ドメイン取得代行
    • googleアナリティクス設置
    • レクチャー
    • 初期設定まるごと代行

    そのほかご要望に応じて承ります。

    まとめ

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

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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