スマートフォンサイトを表示する

  1. TOP
  2. Jimdo逆引きコラム
  3. デザインのカスタマイズ
  4. 独自レイアウト(HTML)

Jimdo逆引きコラム

デザインのカスタマイズ

独自レイアウト(HTML)

執筆:野崎 晃(株式会社デック)

2017年1月18日更新

  • このエントリーをはてなブックマークに追加

閲覧数885views

このコラムをPDF形式でダウンロードする

はじめてWEBのホームページはHTMLやCSSを記述してオリジナルのレイアウトを作成することができます。HTMLはすべてのページで共通となり、ページごとに異なるHTMLを保存することはできません。

まずはホームページにログインをします。
次に、ページ上部の「管理メニュー」ボタンをクリックします。

画面の左側にメニューが表示されますので、「デザイン」をクリックします。

デザインのメニューから「独自レイアウト」をクリックします。

独自レイアウトの編集画面が表示され、HTMLを記述するスペースが表示されます。
ここにオリジナルのHTMLを書き込んでください。

HTML内に画像を表示させる場合は、あらかじめ「ファイル」のタブから画像をアップロードしておく必要があります。

アップロードが完了している場合はHTMLで画像を追加したい位置をクリックしてカーソルを合わせ、「画像の利用」ボタンをクリックしてください。

アップロードした画像のリストが表示されますので、この中から使用したい画像を選択してクリックしてください。カーソルのある位置に画像を表示するためのHTMLが追加されます。
アップロードした画像は、URLではなくファイル名を指定して表示します。

HTMLにははじめてWEBのホームページのさまざまな機能を利用するためのレイアウト構成パーツがあります。必ず「content / navigation / sidebar / footer」の4種類のレイアウト構成パーツを含んだHTMLを記載してください。

navigationには「standard / nested / breadcrumb」という3種類があります。
また必須ではありませんが「shopping cart」というパーツも用意されています。

レイアウト構成パーツは追加したい位置をクリックしてカーソルを合わせ、追加したいパーツのボタンをクリックすると自動的にカーソルの位置にタグが挿入されます。レイアウト構成パーツのタグは自動的にHTMLに変換されて機能します。

「xhtml」ボタンをクリックすると記述したHTMLを自動的にXHTMLに変換できます。

HTMLを書き終えたら「保存」ボタンをクリックして保存してください。

独自レイアウトがホームページに反映された状態がプレビューで確認できます。

反映されたレイアウトを確認して、反映してもよければ「はい」ボタンをクリックしてください。
反映しない場合は、「いいえ」ボタンをクリックしてください。
もう一度HTMLの編集に戻る場合は「戻る」ボタンをクリックしてください。

独自レイアウトがホームページに反映されます。

執筆者

執筆者の活用術

独自レイアウトはサポート対象外となっています。HTML / CSSの知識が無い場合は、独自レイアウトではなくもともと用意されているレイアウトを利用することをおすすめします。スタイルの詳細設定を行うことで、充分素敵なホームページにカスタマイズすることができますよ。

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

野崎 晃(のざき・あきら)

野崎 晃(のざき・あきら)

株式会社デック 代表取締役/JimdoExpert
http://s-deck.jp/
http://jp-m.jimdo.com/

愛知県名古屋市を拠点に活動するWeb制作の会社の代表。
2009年Jimdoに出会い、より多くの人にJimdoの便利さ/楽しさを伝えるべく解説ページ「Jimdoでつくる簡単ホームページ!」を開設。JimdoJapan公式のJimdoCafeを運営するなど、Webサイトを多くの人にもっと身近に感じてもらうべく活動中。

著書に『WebデザイナーのためのJimdoスタイルブック』(共著、マイナビ)。

  • はじめてWEB 読も読もキャンペーン「テーマ別セレクト本」プレゼント!
  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

Jimdo逆引きコラム週間アクセスランキング[期間:2017/9/17~2017/9/23]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!