Loading...

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

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

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

    2015年11月13日(金)
    154Views

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

    関連ページ

    デモ:小棹行政事務所

    ダウンロード:ここをクリックするとダウンロードが開始されます
    もし、ダウンロードが上手く開始されない場合は、大変お手数ですが、メール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点ご用意ください。自動的に横幅いっぱいにになりますので、大きさは特に気にする必要はありません。ただし小さすぎるものなどは画像が荒く表示されてしまいます。

    下記サイトなど無料画像を使う手も。
    無料人物写真フリー素材の【ビジトリーフォト】商用利用OK

    ページ左上に設置する画像

    事務所ロゴや写真などを想定。

    googlemap埋め込みコード

    やり方は後述します

    手順

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

    下記リンクより、当テーマをダウンロードします。
    ダウンロード:ここをクリックするとダウンロードが開始されます
    ダウンロードしたzipファイルを解凍するとhtmlファイルがはいっていますので、これを(ブラウザーではなく)、メモ帳などのテキストエディターソフトで開きます。

    tumblrアカウントの取得

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

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

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

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

    項目を記述する

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

    カスタマイズ Tumblr

    ページ左上の写真(もしくはロゴ)は、「プロフィール画像」項目の鉛筆マークをクリック、トップページのメイン画像については、「mainVisual」項目の鉛筆マークをクリックすることで画像をアップロードできます。

    googleマップの当テーマへの埋め込み方法

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


    ニュースを投稿する

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

    40 Tumblr

    41 Tumblr

    当テーマは「テキスト投稿」のみの対応となっておりますのでご注意ください。

    新規でページを作成する

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


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

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

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

    カスタマイズ Tumblr

    カスタマイズ Tumblr

    有料サービス

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

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

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

    まとめ

    当テーマについて不具合等がみつかりましたら、お手数おかけしますが下記お問い合わせ用フォームか、ページ上部メニュー「お問い合わせ」もしくはメールyujikosao@me.comまでご連絡ください。

    おわりに

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

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


    筆者に何か教える?

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

    feedlyでブログを購読する?

    follow us in feedly

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

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

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

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