②スライド表示. Jimdo NewUIの新しい標準テンプレートは全40種類(バージョン違いを含めて187パターン)が提供されており、すべてがレスポンシブWebデザインに完全対応しています。 ( 2018年3月29日現在) 既に、日本の会社・企業でのHP利用を意識した新テンプレート「Tokyo」もリリースされていますので、今後 … 表示サイズは横幅いっぱいに設定できるレイアウトも沢山あります。 ホームページタイトル(テキスト) 文字で入力するタイトルです。 文字サイズや色は変更できます。 背景(画像・柄パターン、単色 … 今までJimdoで提供していたレイアウトでは、タイトルの位置も背景画像も全ページ統一のデザインでした。先日の機能変更で各ページに個別の画像を設定できるようになり、利用方法の幅も広がりましたが、Tokyoレイアウトはまた一味違ったデザインになっています。 公式テンプレートの場合は、登録時に指定したレイアウトは、いつでも好きなタイミングで自由に変更できる。今回は最初にレイアウトを変更するが、編集が進んだ段階でもレイアウトの変更はできます。 雄樹さんと、JimdoJapanチームと一緒に作成をしました。全体的にシンプルにまとめたデザインと日本らしい文体を意識したので、今までのレイアウトとは違った雰囲気を出せるものに仕上がったと思います。, 今までJimdoで提供していたレイアウトでは、タイトルの位置も背景画像も全ページ統一のデザインでした。先日の機能変更で各ページに個別の画像を設定できるようになり、利用方法の幅も広がりましたが、Tokyoレイアウトはまた一味違ったデザインになっています。, Tokyoレイアウトの最大の特徴のひとつは「背景画像がトップページのみ」(ページ上部)に表示されることです。サブページ(お問い合わせなど)には背景画像が表示されず、ページの上部からすぐにコンテンツを追加できるデザインです。, 新しく画像を追加してメインの画像として利用したり、画像を追加しないでシンプルな構造でページの中身を見せたり、今まで以上に各ページを自由に編集できます。, Jimdoでブログを使っている方々の傾向を調べたところ、なるべくシンプルな仕上がりにしたいと思い、ブログの表示ページを他のレイアウトとは違ったデザインにしました。, 一覧で見たとき、タイトルをすっきり表示させることが可能です。ブログ表示で、〔概要の表示数〕を「0」に設定すると、各タイトルが1行で収まるようになっています。, サイトの新着情報一覧などに使いやすい仕様になっていますので、トップページに表示させたい場合も便利です。, TOKYOレイアウトはロゴエリアをページの左上に設置し、その右にナビゲーションを用意しています。とてもシンプルなレイアウトですが、そのシンプルさをぐっと引き立てるのが「サブナビゲーション」。, メインナビゲーションエリアの下に引いた帯の上にサブナビゲーションのページが表示されます。ドロップダウンメニューのようにメインナビにマウスを移動しなくても、サブページが常に表示されているのでサイト内にどのようなページがあるかわかりやすく表示されます。, TOKYOのサブナビゲーション(2、3階層)のデフォルト設定は右寄りになっていますが、こちらはスタイルから左寄りにも中央にも設定できます。, Tokyoレイアウトは3種類のプリセットがあり、蒼・紅・青緑のカラーを選べます。もちろん、〔スタイル〕からお好きな色を設定することもできます。, Tokyoレイアウトはコンテンツエリアが目立つように比較的ロゴエリアを狭くしています。ロゴを設定する時は縦長のものより横長や正方形のロゴをおすすめします。, サイト内にどんなページがあるかわかりやすくするために、ナビゲーションは一行で収まる長さをおすすめします。特にTokyoレイアウトはサブナビゲーションが2行目に表示されるのでトータルでバランスが取れるように意識してください。, シンプルなだけに、デザインの自由度・可能性は無限です。レイアウト変更後は、「少し寂しいかも…?」と思われるかもしれないですが、そこからのプラスアルファが、Tokyoレイアウトに深みを出していく面白さです。以下に、いくつかの編集事例とサンプルをまとめました。, TOKYOレイアウトはシンプルを追求して作られたレイアウトなので使い勝手は抜群です。, 法律事務所などの士業からサブページが多くなるアパレル、画像を多く見せるポートフォリオでも活用できると思います。「デザインを新しくしたいな〜」と思ってる方は、ぜひこの新しいTokyoレイアウトをお試しください。これからも新しいレイアウトを追加していく予定なのでご期待くださいね!, クラウド型ホームページ作成サービス 国内シェアNo.1※ KDDIウェブコミュニケーションズ調べ(調査委託先:マクロミル) 回答者:1024名 調 査期間:2017年2月, Jimdoのレイアウトには、世界各国の都市名が付けられているのをご存知かと思います。その中で、日本のユーザーさんは疑問に思ったことはありませんか?そう、, ドイツのスタッフの中に大阪へ留学していたメンバーがいたからだそうです。今回、満を持して新しいレイアウト「Tokyo」が追加になりました!, 紅・青緑のカラーを選べます。もちろん、〔スタイル〕からお好きな色を設定することもできます。, ※他にも、Tokyoレイアウトでホームページを作成された方などいらっしゃいましたら、JimdoJapanでぜひご紹介させてください!, 法律事務所などの士業からサブページが多くなるアパレル、画像を多く見せるポートフォリオでも活用できると思います。「デザインを新しくしたいな〜」と思ってる方は、ぜひこの新しいTokyoレイアウトをお試しください。これからも新しいレイアウトを追加していく予定なので. Jimdoは、ホームページ作成ツールとしては最高の機能を持っていますが、何でも出来るという訳ではありません。このページはJIMDOの出来ることと出来ないことをまとめてみました。 JimdoのTOKYOレイアウトは、日本語が美しく見えるようにつくられたレイアウト。このTOKYOレイアウトで、ひときわ目立つデザインは、第二階層以下のページを設定したときに現れる横ぶち抜きの … 使用する画像のサイズに合わせて高さは変更してください。 ここでは、トップページのヘッダ画像の高さは300ピクセルなのでheightは330px、その他のページのヘッダ画像の高さは150ピクセルなの … . ※jimdoは文章作成時に個別にサイズを変更することはできませんが、ヘッダー部分の編集で個別に設定することが 可能 です。 見出し 文章のタイトルとして目立つようなサイズや色に設定にします。 Jimdoのレイアウトは、世界の都市の名前がついていて、TOKYOもその1つです。現在40種類のレイアウトがあり、それぞれのレイアウトには、プリセットと呼ばれるいわゆる別バージョンのレイアウトパターンがあります。TOKYO … JimdoのTOKYOレイアウトがリリースされましたね!待ちに待った方、多いのではないでしょうか?, 先日、WordPressで作っていた個人サイト(T-STUDIO.COM)をJimdo Businessに移行したので、早速TOKYOレイアウトにしてみました。この新しいTOKYOレイアウトは、Jimdoエキスパートでもある、服部制作室の服部さんがデザインされました。日本語が美しく見えるようにつくられたレイアウトです。, このレイアウトのトップページの特徴は、左上がロゴエリアで右上がメインメニューのエリア、これらのエリアの下に横ぶち抜きのカラーバーがあり、そのカラーバーの下がメインビジュアルで、メインビジュアルの上にはキャッチコピーなどが書けるようになっていて、メインビジュアルの下がコンテンツエリアという、見た目のデザインとしては王道のデザインで、日本のサイトでこのパターンで作られたサイトが多いのではないかと思います。, TOKYOレイアウトの詳細については、別途他所にお任せするとして(笑)、早速このTOKYOレイアウトを少しばかりカスタマイズしてみたので、その辺りのお話を。, TOKYOレイアウトの中で、ひときわ目立つデザインは、ナビゲーションの編集で、第二階層以下のページを設定したときに現れる横ぶち抜きのカラーバーが敷かれたサブメニュー。このサブメニューのエリアは第二階層以下が設定されているページにのみ表示されます。TOKYOレイアウトを選ぶとき、プリセットとして3のカラーバーから選べます。, T-STUDIO.COMでは、ブラック(画像内では真ん中)をベースにサブナビゲーションエリアの背景色をダークレッドにスタイル設定で調整しています。, このカラーバーはサイト内で良い感じの締まりを与えてくれるので、常に表示させ続けたいのですが、第二階層以下が設定されていないページだと表示されません。, 例えば、ホームの下にサブメニューを設定しないようなことって結構あると思うので、トップページにはこのバーが表示されないということが起こります。, もちろん、この状態でも全然OKなのですが、せっかくなら常にカラーバー(サブナビゲーションエリア)を出し続けたいと思うかも知れません。カラーバーを自社のブランドカラーにしたり、ブルー系のバーにして堅実さを表したり、グリーン系のバーにしてナチュラルな雰囲気を醸し出したり、黒のバーにしてシックな雰囲気にしたり、色の組合せで悩むこと無く、ここのバーのカラーで自己主張をして他は極力色を使わないことで、全体の統一感を保つことができます。, ということで、このサブメニューエリアを第二階層以下が設定されていなくても常に出し続ける状態にするテクニックを紹介したいと思います。, このコードをカスタマイズでお馴染みの、「設定」にある「ヘッダー部分を編集」をクリックして図のように書き込みます。, 全てのページで出したいので、ここでは「ホームページ全体」に書き加えました。特定のページでランディングページのような使い方をする際にはこのバーは不要ということであれば、「個別ページ」で下の階層が無いページにのみ設定をしたほうがいろいろとラクです。, だたし、このテクニックを実現する上で条件と気にしておく点があります。この条件をクリアした場合にのみ、現時点では有効なテクニックだと思ってもらえればと。, サブメニュー部分は、バーの背景やメニューの文字の大きさ、色など、さまざまな設定をスタイルから行うことができます。この時、メニューの文字の大きさを大きくすると、このバーがそれに合わせて太くなります。, TOKYOレイアウトは、第三階層のメニュー項目を、第二階層以下に表示させる仕様になっています。, このため、第三階層がある際は、このようにサブメニューバーの下にもう一段バーがでてくるので、そこだけは致し方なしと割り切って使うか、第三階層以下での階層設定はしないなどの工夫も必要ですね。, 駆け足で解説しましたが、基本的にカスタマイズのやりようが無いくらい、クオリティの高いJimdoのレイアウトなので、あえていじる必要はないのですが、こうしたちょっとしたところだけいじって自己主張するのも一つかなぁって思います。, 都内事業会社のコーポレート・コミュニケーション部門でマネジメントをしている元ウェブ制作者。Jimdoのカスタマイズネタやマネジメント、モンハン、プリキュア、Marvel & DC関連、そして琉球舞踊についてを書き綴っているブログです。. 背景の設定; 背景の種類について; ページごとの背景の設定; フォーカルポイント; 背景にフルスクリーン画像を設定する; スタイル. 1)Jimdo にログイン後、左側のツールバーから「デザイン」を選択後、「背景」を選択します。. このページでは、「独自レイアウト」でトップページとその他のページで違うヘッダ画像を表示させる方法を解説していきます。, JimdoでつくったトップページのHTMLを見てみるとのタグにこのように記述されています。, このなかの「cc-indexpage」というクラス属性を利用してCSSを書き換えることで、トップページだけ他のページとは違うヘッダ画像を表示させます。(※この方法はヘッダ画像を背景画像として表示させます。), まずは画面の右側に表示されている管理のメニュー「レイアウト」から「独自レイアウト」を選んで保存してください。, この方法ではヘッダ画像はCSSで背景画像として表示させますので、HTMLのなかのヘッダ画像を表示させるための記述は削除しておきます。, 「独自レイアウト」の「HTML」を選び、と書かれた一行を削除して保存します。, トップページだけに表示させるヘッダ画像と、トップページ以外のページに表示させるヘッダ画像の2種類を用意します。, ここでは、トップページだけに表示させるヘッダ画像のファイル名を「header-1.jpg」、, トップページ以外のページに表示させるヘッダ画像のファイル名を「header-2.jpg」とします。, 「独自レイアウト」の「ファイル」を選び、用意した2種類の画像をアップロードします。, heightは画像の高さとページの上部にある「Headline」を含めた高さを入力しています。, ここでは、トップページのヘッダ画像の高さは300ピクセルなのでheightは330px、その他のページのヘッダ画像の高さは150ピクセルなのでheightは180ピクセルにしています。, この方法を利用すればレイアウトの自由度がさらに広がりますね。ぜひ活用してみてください!, あなたもジンドゥーで無料ホームページを。 無料新規登録は https://jp.jimdo.com から. ホームページを作成する上で、忘れてはいけないのが「ロゴ画像」と「ページタイトル」の設定です。素敵なホームページができても「あなたの」ホームページだと理解してもらうためには「ロゴ」と … Jimdoをやっていると、サイトが出来上がった後で「レイアウトがしっくりこない」という場合があるかもしれません。でもJimdoなら大丈夫。Jimdoの場合、レイアウトはどのタイミングでも変更できます。ただし、ちょっと気をつけておきたいこともありますので、できれば変更 … 2018年1月追記:まずはじめに記事中にあるTokyoレイアウトの初期セットである「Main」ですが、「Aoyama」と判明しましたので、記事中にある「Main」は「Aoyama」に読み替えてください。, Jimdoのレイアウトは、世界の都市の名前がついていて、TOKYOもその1つですね。現在40種類のレイアウトがあるのですが、それぞれのレイアウトには、プリセットと呼ばれるいわゆる別バージョンのレイアウトパターンがあります。, TOKYOレイアウトは、メインとなるレイアウトに加え、Nihonbashi、Ginza、Asakusa、Uenoというプリセットがあり、計5つのパターンを選ぶことができます。, Jimdoのサイトから新規登録の際、左上のデザインを選ぶとTOKYOレイアウトが適用されます。その時に標準でセットされているデザインでかつ、既にJimdoを使っていて他のレイアウトを利用している際に、TOKYOレイアウトを選択したときに表示されるのが、基本パターン「Main」になります。, レイアウト選択で、プリセットを開いた時、Mainの隣にあるプリセットがNihonbashiです。最近追加されたこのプリセットのMainとの違いは、トップページにメインビュアルのエリアがないデザインです。サブナビゲーションのバーの色は薄いグレー。, メインビジュアルの部分は、背景画像の設定から行うのですが、横幅いっぱいに表示させる表現を必要としない場合は、こちらを使うことよいかと思います。, メインビジュアル部分が無いので、画像の挿入で必要に応じて追加してみるのも良いですね, Main以外に4つあるプリセットには、それぞれ東京にある都市の名前がついています。Ginzaはもちろん銀座にちなんだ名前。Ginzaの特徴は、なんといってもトップページで表示されるメインビジュアルのエリア(実際には背景画像を指定)が他のセットと異なり縦方向が長くなっていて画像を大きく魅せることができる点です。, このプリセットは、画面いっぱいに画像が広がる感覚になるので、イメージ画像でなにかしらのインパクトを与えたいような場合にはとても有効です。売り出し中の商品写真などにしても効果があるかもしれませんね。, AsakusaとUenoは、サブナビゲーションバーの背景色が異なる以外は基本的には同じレイアウトです。一見Mainとも似ているのですが、Mainと異なる点が1つあります。, メニューのアクティブの状態が、Mainではアンダーラインが引かれており、Asakusa・Uenoではアンダーラインが無く濃いめの色になっている点です。, これらを踏まえて、TOKYOレイアウトの5つのプリセットの違いを表にまとめてるとこんな感じになります。, Topページにメインビジュアルが必要か否か?不要ならNihonbashi、必要なら2番へ。, Topページのメインビジュアルを大きく見せたいか否か?見せたいならGinza、大きくなくて良ければ3番へ。, ナビゲーションのアクティブ状態の時にアンダーライン付きにしたいか否か?つけたいのならMain、アンダーライン無しにしたいなら4番へ。, こんな感じで、絞り込んでいくと、自分にあったプリセットが選べるのでは無いでしょうか?, レイアウトのプリセットは、一度選んでしまっても、後から変更もできるので、それぞれのプリセットを一通り試してみるというのも良いかも知れませんね^^, 都内事業会社のコーポレート・コミュニケーション部門でマネジメントをしている元ウェブ制作者。Jimdoのカスタマイズネタやマネジメント、モンハン、プリキュア、Marvel & DC関連、そして琉球舞踊についてを書き綴っているブログです。. 様々なサイズの画面で確認してみると、背景画像が意図しない位置になっている場合があります。 今回は、そんな時の位置調整方法をご紹介。 Jimdoのヘッダー背景の位置調整 - ジンドゥークリエイター使い方紹介 Jimdo it yourself 3)「+」記号が表示されているボタンをクリックすると、以下の画面が表示されます。. 画像を一枚、静止状態で表示させます。. メインビジュアル部分に表示される画像は、ジンドゥー(Jimdo)の背景で設定します。背景画像には、画像や動画、単色の設定が可能です! 今回はジンドゥーの背景画像の設定方法についてご紹介します。, Jimdo には「背景」を好きな画像に設定したり、色を変えたりできる機能が備わっていますが、大きく分けて下図のように 2 つのスタイルが存在します。, Jimdo のアカウントを開設すると、テンプレートによってはあらかじめ背景画像が設定されています。削除や変更をしてみましょう。, 1)Jimdo にログイン後、左側のツールバーから「デザイン」を選択後、「背景」を選択します。, 背景画像を変更する際、1枚だけ変更する方法と、複数枚を設定してスライド表示にする機能があります。ここでは1枚だけ変更し、静止画の状態で表示を変更する方法を解説します。, 2) ファイルをアップロードする画面が表示されますので、設定したい画像を選んでクリックしましょう。, 2) ファイルをアップロードする画面が表示されますので、設定したい画像を複数選んでクリックしましょう。, スライド表示では、最低2枚以上の画像をアップロードする必要があります。Windowsではキーボードの「Ctrl(コントロール)」を押しながら、画像をクリックすると複数枚選択できます。, Jimdoの公式サポートページ内に「イメージ画像を使う際のポイント」として、画像形式や背景画像に最適な画像のサイズなどが解説されています。更に、無料で利用できる背景画像も提供中!ぜひ活用してください。, 前項では複数の静止画像を使用しましたが、ここでは「動画」を使って、更に動きのある作り方を解説します。使用する動画はあらかじめ準備しておきましょう。, Jimdoの背景として動画を設置する場合には、あらかじめ作成した動画を、YoutubeかVimeoにアップロードしておきます。, Youtube や Vimeo は、動画共有サービスです。どちらも無料で利用できますが、動画をアップロードするためには、事前にアカウントを取っておく必要がありますので、準備段階で契約しておきましょう。, 3)Jimdoにログインし「スタイル」⇒「背景」を選択します。背景の設定画面が表示されたら「動画」をクリックしましょう。, 4)動画のURL(アドレス)を貼り付ける画面が表示されますので、さきほどコピーしておいたURLを貼り付けます。, (2)~(4)までは、画像(写真)や動画を使用しましたが、写真を使用せず単一のカラーを設定することもできます。, Jimdo の「背景」機能には、4 種類の機能があります。静止画、スライド、動画、カラーと、作りたいイメージに合わせて活用しましょう!ホームページの雰囲気がガラッと変わって、楽しいですよ。本文中でも解説しましたが、第三者が作成した動画、あるいは撮影した写真などを使用する場合には、著作権や利用規約に注意して、使ってくださいね。, あらかじめYoutubeやVimeoにアップロードされている動画を、背景画像として表示させることができます。. ①画像. 2)画面の上部にボタンが表示されますので、「背景」をクリックします。. Jimdoのテンプレートはヘッダーの高さを変える機能はありません。これは、それぞれのテンプレートが共通のフォーマットによってコーディングされていないために共通のプログラムによって、書き換えが出来ないことに起因するのだろうと推測されます。 . Jimdoのレイアウトには、世界各国の都市名が付けられているのをご存知かと思います。その中で、日本のユーザーさんは疑問に思ったことはありませんか?そう、東京がないじゃないかと!, 日本の首都がこれまでなかったのに大阪のレイアウトがあったのは、Jimdoの本国、ドイツのスタッフの中に大阪へ留学していたメンバーがいたからだそうです。今回、満を持して新しいレイアウト「Tokyo」が追加になりました!, "TOKYOレイアウトは日本のJimdoExpert として活躍する服部制作室の服部 7件の記事をすべて表示 背景. 日本語 Web フォントについて; スタイルの変更… 表示サイズは横幅いっぱいに設定できるレイアウトも沢山あります。 ホームページタイトル(テキスト) 文字で入力するタイトルです。 文字サイズや色は変更できます。 背景(画像・柄パターン、単色な …