独自レイアウトの編集方法
弊社で配布している無料のテンプレートの中には「独自レイアウト」という形式で作成されているものがあります。下記は、その形式を編集するための方法です。Jimdoの標準的なテンプレートの編集方法はJimdoサポートセンターをご参照ください。
タイトルの変更
当社のレイアウトで、ホームページ上部にあるタイトル部分の変更方法です。
タイトルがテキストの場合は、文字の打ち替えで変更可能です。
下記が手順です。
- ホームページの編集画面から「管理メニュー」を表示
- ［デザイン］から［独自レイアウト］を選択
- ［HTML］になるタイトル部分の文字を、任意の文字に打ち替える
※基本的には<h1>◯◯◯◯</h1>というコードでタイトルが表現されています。
◯◯◯◯の部分を任意の文字に打ち替えてください。 - 最後に［保存］をクリック
クリックして拡大できます
メインビジュアルの変更方法
当社のレイアウトでは、「visual.jpg」という名のファイルをメインビジュアル画像として扱っております。
ファイル名が「visual.jpg」というファイルを、管理メニュー「デザイン」をクリックし、「独自レイアウト」の「ファイル」からアップロードすると、メインビジュアルが変更されます。
※このとき、現状のメインビジュアルとして使用している「visual.jpg」がすでに存在していますが、同名のファイルをアップロードすると上書きされますので、ファイル名を変更したりする必要はありません
現状のメインビジュアル画像を残したい場合
現状のファイルを「visual2.jpg」などにファイル名を変更し再度アップロードしてください。
ファイルのアップロード方法
1.［管理メニュー］をクリック
2.［デザイン］をクリック
3.［独自レイアウト］をクリック
4.［ファイル］をクリック
5.［ファイルを選択］から「visual.jpg」を選択
6.［アップロード］をクリック
以上で変更きます。
スライド形式のメインビジュアル画像の変更方法
スライド形式のメインビジュアル画像のファイル名は「visual01.jpg」から始まり、画像数にあわせてファイル名の数字を大きくしています。
「ファイル」へ、それぞれの画像に該当するファイル「visual（数字）.jpg」をアップロードしていただくと画像が変更されます。
スライド形式のメインビジュアル画像の増減について
独自レイアウト>レイアウト>HTML の中に以下のコードで挿入しています。
<li><img src="visual(数字).jpg" alt="" /></li>
画像を増やす場合は、<ul class="bxslider">内の</li> の直下に上記コードを追加してください。
画像を減らす場合は、<ul class="bxslider">内の削除したい画像に該当する部分（<li>から</li>まで）のコードを削除してください。
スマホ表示時にパソコン版のデザイン継承する方法
Jimdoで作成したホームページは、スマホで閲覧した場合にスマホに適したデザインに自動で変換されます。
これはスマホ用のレイアウトが適用されるためなのですが、パソコンでホームページを閲覧した場合のデザインのテイストが違うことがほとんどです。弊社が配布するレイアウトは、スマホから閲覧した場合もパソコン版のデザインのテイストが継承されるように設定しております。ただ、デザインテイストを継承するには利用者様側で一部操作が必要となります。
※弊社のレイアウトをご利用を開始された時期によって、ご紹介する方法がご利用いただけない場合がございます。
操作手順
- ホームページ編集画面から［デザイン］を選択
- 独自レイアウト（CSS）を選択
- スマートフォン表示（目のマーク）を選択
- 目のマークが赤色になったことを確認
- ［保存］を選択
以上で完了です。
HTMLの編集方法
※HTMLソースの編集を誤ると、見た目が崩れてしまう場合があります。
※編集をおこなう前に、HTMLソースをコピーして保存することをおすすめします。
- 管理メニューのデザインからをクリック。
- 「独自レイアウト」のダブをクリック。
- 「独自レイアウト」画面から「HTML」のタブをクリック。
「会社名やサイト名が入ります」の部分を、会社名やサイトのタイトルなどに差し替えます。
差し替えが完了したら「保存」ボタンをクリック。
画面上部に「このレイアウトを使いますか？」と表示されます。
「はい」をクリックすると編集した内容がレイアウトに反映されます。