Loading...

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

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

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

    2015年11月26日(木)
    619Views

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

    はじめに

    弊社小棹制作所にて、多目的に使える告知系ホームページを無料で作成できるtumblrテーマを作成しました。
    大きなメイン画像が印象的なレイアウトになっています。
    今回は、そんなtumblrテーマを無料で提供します。

    関連ページ

    デモ:Cosao Soccer Circle

    ダウンロード:ここをクリックするとダウンロードが開始されます
    もし、ダウンロードが上手く開始されない場合は、大変お手数ですが、メール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ピクセル程度のものがベストです。

    背景用画像

    上記サンプルサイトでいう芝生の画像。画像を使用しない場合は色を指定することもできます。

    手順

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

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

    tumblrアカウントの取得

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

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

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

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

    項目を記述する

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


    カスタマイズ Tumblr

    新着情報を投稿する

    ダッシュボードから、下記画像のやり方で新規投稿を行います。
    当テーマは「テキスト投稿」のみの対応となっておりますのでご注意ください。

    30 Tumblr

    新規でページを作成する

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


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

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

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

    カスタマイズ Tumblr

    カスタマイズ Tumblr

    以上です

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

    有料サービス

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

    • 配色・デザイン・レイアウトの変更
    • 外部サービス(twitterやfacebook)へのリンク作成
    • facebookのライクボックスやtwitterのタイムライン設置
    • ページ作成代行
    • メニューバー以外のページ追加(特設バナーページなど)
    • 古いブラウザへの対応追加
    • レスポンシブ対応追加
    • メインビジュアルのスライダー(画像送り機能)設置
    • 独自ドメイン取得代行
    • googleアナリティクス設置
    • 当テーマを使ってのホームページ作成レクチャー
    • 初期設定まるごと代行

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

    不具合等について

    各テーマにつきまして、なにかしらの不具合や不足点・改善点などお気づきの点がありましたら、お手数ですが当ホームページ上部メニュー「お問い合わせ」、もしくはメールyujikosao@me.comまでご連絡ください。

    まとめ

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

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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