jimdo スマホ文字色 4

なぜなら、クラウドサービスにつき、仕様変更などが提供元にゆだねられている為、変更時レイアウトが崩れたり動作エラーになった際、原因をつきとめるのが難しくなる可能性があるからです。, あくまでもJimdoで作るサイトと割り切り、内容を読みやすくするなどの方法として、枠をつけたりする程度にし、ご活用ください。, また、多くのHTML・CSS・Javascriptなどを使ったカスタマイズをご自身で行う場合は、自己責任となることをお忘れずに。, 当サイトで紹介しているのは、プチカスタマイズ。簡単なものばかりですが、もう少し踏み込んで、、と思っている方は、是非チェックしてみては？, 技術評論者から、ジンドゥークリエイターのカスタマイズと独自レイアウトのためのテクニック本がでます。（2020年1月20日刊行）, Jimdoは、次々と機能が追加されるため、内容が古い場合があります。Jimdo公式ヘルプとあわせてご参考ください。, あなたもジンドゥーで無料ホームページを。無料新規登録は https://jp.jimdo.com から. 文字の色を変えたいとき、背景色を設定したいときなど、さまざまな場面で登場するのが「カラーパレット」です。色を変更する機能は使ったことがある方も多いと思いますが、実はあまり知られていない便利な使い方がありますので、ぜひ覚えてくださいね。, カラーパレットの中から同じ色を見つけるのに苦労したことがある方、色にも番号があるのをご存知ですか？それを使えば、統一感のある色合いでのホームページ編集が可能ですよ。, カラーパレットは、「文章」機能で文字の色を変えるときや、「スタイル」機能で背景、ナビゲーション、見出し等のカラー設定をする際に表示されます。, カラーパレットの⑥番では、カラーコードを指定して色を設定することができます。カラーコードの見方は次の通りです。, 「rgb（RGB／アールジービー）」は、色の表現方法の一種で、赤 (Red)、緑 (Green)、青 (Blue) の3つの原色を混ぜ合わせて、いろいろな色を再現する方法です。「光の三原色」ともいわれ、パソコンやテレビ、携帯・スマートフォンなどの画面は、この 3 色の組み合わせで表示させています。, （250,122,10)のように 3 つの数字が表示されていますが、左から (Red)、緑 (Green)、青 (Blue) を表します。数字が大きいほど、その色を多く使っているということになり、数字が少なくなると黒に近づきます。0～255 の間で指定することができます。, (0, 0, 0) は黒、(255, 255, 255) は白、(255, 0, 0) は赤、(0, 255, 0) は緑、(0, 0, 255) は青です。, ホームページ上で表現できるカラーに 16 進数表示があります。「#FFCC00」のように、一番前に「#」、その後に 6 桁のアルファベット（A～F）や数字（0～9）を組み合わせて、RGB カラーを表現する方法です。, この 16 進数で表示された数字を、「カラーコード」の欄にコピー＆ペーストすることで、色を設定することもできます。, スタイル機能を使用する際、「詳細設定」をオンにした状態で、ペンキを塗る刷毛のマークになったマウスカーソルを合わせ、青い枠が表示されるところが、設定可能な箇所です。そのうち、以下がカラーパレットが表示される機能になります。, ※スタイル機能についてはこちらの記事「スタイル機能を活用しよう」で詳しく説明しています。, 「スタイル」⇒「背景」の画面を開いているところです。背景機能のカラーパレットは、機能が少なくなっています。, 背景機能のカラーパレットには「カラーチップ」、「最近使ったカラー」、「透明度」の設定機能がありません。, 「文章」機能を使用しているところです。「...」の青いボタンをクリックしましょう。, 文字色変更のカラーパレットはスタイル機能のものとほとんど同じですが「透明度」を変えるスライダーと「最近使ったカラー」の設定機能がありません。, 透明度の設定は、カラーパレットが表示されるさまざまな場面で使うことができますが、コンテンツの背景色設定で使用すると、雰囲気を変えることができます。, 3）設定画面が表示されますので、カラーパレットを表示させ、背景色の透明度を変更します。, 4）背景が透けて、雰囲気が変わりました。サンプルでは、透明度を 55 ％に設定しています。, ※この操作説明のサンプルでは背景色の透明度を変えたことがわかりやすいようにホームページの背景に画像を設定しています。, カラーパレットは、色を変更できるさまざまな場面で登場しますので、ぜひ基本の使い方を覚えておいてくださいね。特に背景を透明にする手法は、オシャレな雰囲気を演出するのに役立ちますので、活用してみてください。, スライダーを動かすことで、透明度を設定することができます。左に動かすほど透明に近くなります。. 4つのカラムは左に配置されたものから順に縦に表示されます。ここで注意しておきたいのは、写真とキャプションをそれぞれ別のカラムに入れてしまうと、スマホで見た時に写真と文字がバラバラになってしまうという点です。【パソコンでの表示】好きなレイアウトを選び、最後に左下の「保存」を押せばそのレイアウトがスマートフォン表示で適用されます。, 現在、Jimdoでスマホ向けに利用できるテンプレート（レイアウト）は、13種類あります。, そのどれもが個性あふれるデザインとなっており、中にはヘッダー画像を付けることが出来る物もリリースされています（旧レイアウトではPC表示のヘッダー画像がデフォルトで表示されます）。, また、各テンプレートの名前が「one、two、three」などの英数字読みになっている（苦笑・・）のも特徴的です（Jimdoの管理画面内で任意のテンプレートにマウスオンすると分かります）。, Jimdoのスマホ用テンプレートではメニュー・ナビゲーションボタンが横長で気づきやすい場所に設置してあるものが5種類あります。, メニューが分かりやすい位置にあればクリックされやすく、サイトの回遊率も上がるのでSEO施策にも効果的です。, もちろん、隅っこに三本線のアイコンが表示される「ハンバーガーメニュー付き」も選択できますが、高齢の方にとっては見づらい配置だと思うので個人的にはあまりお薦めできません。, どのレイアウトにもフッター部分には「パソコン版で表示」と記載された切り替えボタンが実装されています。, このボタンにより、スマホ利用者がタップするだけでスマホでも任意にPCサイトを閲覧することが出来ます。, このページを読んでいる方の中には「スマホでもPC版サイトを見たい」と思ったことがある方が少なからずいらっしゃることでしょう。, ところで、このユーザビリティに関して検索したところ下記の記事を見つけました。読んでみると結構面白かったのでご紹介します。高齢化社会である日本にとってあるべき姿の一つだと痛感しました。, 年寄りを困らせる「レスポンシブWebデザイン」｜日経BPコンサルティングスタッフルーム, Jimdoでは、スマホ用のテンプレートは完全なレスポンシブWebデザインには対応していません。そのため、スマホとタブレットからのアクセスで表示されるデザインはどちらも基本的には同じものとなってしまいます。, また、画面の横幅（ブラウザのサイズ）が広いタブレット端末では、かなり横長で余白が目立つレイアウトが表示されます。（この問題への対策はいずれ別の記事にて解説します）, 以下、Jimdoのスマホ用テンプレートでスタイルシートを記述・編集する方法を解説します。, 1. Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】 Jimdoの見出しブロックは「大・中・小」の3種類がありますが、もうちょっとフォントのサイズを変えたい、スマホ表示での大きさを変えたい場合はちょっと設定を変える必要があります。 3．Jimdoの表のコンテンツを開けたら、先に入っているものを、[行削除]ですべて消します 4．きれいになった所に、エクセル貼り付けます。 5．一番左アイコン[表の挿入]をクリックします。枠線を"0"→"1"に Jimdoの公式サイトなどはワンカラムで作っているページもあり、横幅も広いことから、標準のPCディスプレイでの閲覧時には18pxを標準で使っているようです。フォントサイズの読みやすさは、文字が表示されている横幅の広さによっても変わります。（見本）フォントサイズ：14px のやりがちな間違いと修正法を交えながらご紹介します。あなたのホームページの改善点が見つかるかもしれません。, 文字フォントに困ったら、「メイリオ」や「Arial」「Helvetica」などのフォントを試してみてください。また、フォントだけでなく文字サイズも適切か見直しましょう。, でスクロールしながらホームページをみていると、おそらく飛ばし読みをしている人が多いのではないでしょうか？, スマホで大量の文章はあまり好まれず、文章は短く、飛ばし読みしやすいように段落の間に十分な余白を取ることが必要, 色は人の心理にも影響与えるため、適切に使うことで、購買・参加意欲を掻き立てたり、あなたが伝えたいことを後押ししてくれる要素になります。今回は、ホームページにおける最適な配色の選び方のポイントをご紹介します。, ホームページが情報で埋め尽くされていると感じないよう、各要素や文章の周りに十分な余白を取るようにしましょう。また、タップしやすくするため、, お問い合わせフォームでは重要な情報のみを問い、選択で答えきれるものに関してはドロップダウンリストなどを用意することで、. スマホでいかにキレイに見えるかは、ホームページ訪問者を引き付けるためにも、直帰率を最小化するためにも重要なことなのです。そこで今回は、「スマホ対応ページ」を作成するときのコツを6つご紹介 … JimdoでHTMLを使用できる箇所はいくつかありますが、ここでご紹介するのは、初心者でも安心、全体のデザインに影響のでない「コンテンツ追加」→「文章」のHTML編集で使用できるものです。, ※Ctrlは「コントロールキー」。「Ctrlキー」を押しながら、「C」「V」を押す。, ※Commandは「コマンドキー」。「Commandキー」を押しながら、「C」「V」を押す。, ここで紹介しているのは、ページの一部分で使うものであり、基本的に、レイアウト（レイアウト全体）にかかわる部分のカスタマイズはご紹介していません。, 管理人的には、HTMLやCSSなどの知識がない状態でレイアウトにかかわる部分のカスタマイズをされることはあまりおすすめしていません。 Jimdoは、ホームページ作成ツールとしては最高の機能を持っていますが、何でも出来るという訳ではありません。このページはJIMDOの出来ることと出来ないことをまとめてみました。独自レイアウト（または旧レイアウト）を現在使用している状態で、管理メニューの「デザイン」へと進み、下へスクロールしてカスタムの「独自レイアウト(CSS)」をクリックします。, 2. スマートフォン用のレイアウトを選択するためにも、右上の「スマートフォン表示」のスイッチが「有効（オン）」になっていることを確認します。, 3. htmlやcssをコピペして使える簡単カスタマイズをご紹介します。 jimdoでhtmlを使用できる箇所はいくつかありますが、ここでご紹介するのは、初心者でも安心、全体のデザインに影響のでない「コンテンツ追加」→「文章」のhtml編集で使用できるものです。最後に左下の「保存」ボタンを押せば即座にスタイルが反映され、右隣りのスマホ型プレビュー画面でもレイアウトを確認することができます。, ここからは全6回に渡り、Jimdoのスマートフォン表示用テンプレートを実際にカスタマイズしていきます。, 使用テンプレートは使いやすさ＆カスタマイズの容易さなど総合的な観点から、「Three」をサンプルとすることにしました。, もちろん、他のテンプレートでもそのまま利用できるCSSもありますので、ご自身で色々と試してみてください。では早速、下記の「カスタマイズ・目次」から順を追って見ていきましょう。, ところで、Jimdo の記事ばかりを書いていると視野が狭くなってしまいそうなので、Jimdo以外で簡単にホームページが作成でき、なおかつスマホ表示にも対応しているサービスはないかと探してみたところ、ありました。, グーペという日本生まれの会社です。調べてみると、インターネット事業を色々と手掛けているGMOグループの一員で知名度もあるみたいです。, ※2018年4月20日現在、「ホームページ作成」で検索すると2ページ目でJimdo公式サイトより上の行に表示される会社が「Goope(グーペ)」です。, ここでは一例として、会社や企業用で見映えが良さそうなテンプレートをいくつかピックアップしてみましたが、他にも無料で利用できるものが多いみたいです。, そしてモバイル表示は、PCで作成したコンテンツがスマートフォンでも自動表示されます。これはJimdoと同じ。, もちろん、個別にスマホサイトを編集する必要もなく、デザインも最初から洗練されたものが揃っていると思います。, 気に入ったデザインを見つけたら、納得してから「はじめる」という事ができるわけです。, この機会に「Jimdo vs. Goope」ということで、両社が提供している各種機能を比較検討してみるのもアリかも知れませんね。以上、管理人の率直なレビューでした。, udon-jinと申します。東海地方にて個人事業主をしております。海外ネットオークションeBayへの出店を経てJimdoと出会いました。, Jimdo は早くからスマホ表示を重視してきましたので、その分SEOにも強いですよ♪, あなたもジンドゥーで無料ホームページを。無料新規登録は https://jp.jimdo.com から. 以上を使うのが好ましいですが、使っているフォントによって異なってきますので、実際に確認をしながら見やすい大きさに調整するのがオススメです。, スマホでスクロールしながらホームページをみていると、おそらく飛ばし読みをしている人が多いのではないでしょうか？スマホで大量の文章はあまり好まれず、文章は短く、飛ばし読みしやすいように段落の間に十分な余白を取ることが必要です。, ホームページが情報で埋め尽くされていると感じないよう、各要素や文章の周りに十分な余白を取るようにしましょう。また、タップしやすくするため、重要なコンテンツへのリンクは文字リンクよりボタンを使うようにしましょう。, ジンドゥーの「ボタン」は、目立たせようなサイズと色になっているので、何か特別なことをしなくてもホームページ訪問者の目に留まりやすいボタンを設置できます。, また、色も多用しすぎると雑然とした印象を持つので、使う色は３色以内に抑えることを心がけましょう。, よくあるのは、お店の情報が全て画像として掲載されていることです。画像にメニューや会社の情報がしっかり書いてあったとしても、実際に電話で予約をしたいときやお店の位置を確認したいときに、画像として情報が掲載されている場合は、お客さま自ら手打ちで検索し直さなければなりません。, お店の情報はテキストで書いておき、お店の住所を載せるときは、Google マップの情報も一緒に貼り付けておくことで、ホームページ訪問者はワンクリックで具体的な位置情報を確認することができます。, また、お問い合わせフォームでは重要な情報のみを問い、選択で答えきれるものに関してはドロップダウンリストなどを用意することで、ホームページ訪問者の手間を出来るだけ少なくしましょう。, スマホ対応のページを作成する上で、ポイントとなるのは「簡潔さ」です。スマホなどの小さな画面では特に、情報が簡潔にまとまっていることが求められます。ホームページ訪問者が重要な情報をすぐに見つけられるようにしましょう！今回ご紹介した６つのコツを試してみてくださいね。, 【関連記事】スマホでも使いやすい！ジンドゥーでレスポンシブ対応のホームページを自動作成, 表示端末によって最適な見え方に調整してくれるレスポンシブデザイン。ジンドゥーのレイアウトも全てレスポンシブ対応なので、こだわって作ったサイトをより多くのユーザーに楽しんで頂くことが可能です, 現在使っているレイアウトがレスポンシブに対応しているのかどうかを確かめるためには、, 問題点がわかったら、さっそく改善に取り掛かりましょう。画像や動画の大きさが原因なら、, ホームページのPVが増えないと悩んでいるあなた、UX は意識していますか？ UX ※2018年3月18日更新：Jimdoの管理画面が一新されましたので、当記事も改訂しました。, Jimdoのスマホ表示用のテンプレート（レイアウト）とカスタマイズ・編集方法をご紹介します。, 今やスマートフォンは大人1人が必ず1台は所有しているといっても過言ではない時代です。, 近年、携帯電話がスマホ化＆高性能化したことにより、パソコン用ホームページをスマホからでも簡単に閲覧できるようになりました。そのため、サイト運営者側においてもスマホから流入して来る訪問者を見過ごすわけにはいかなくなってきました。業種にもよりますが、スマホからのアクセス割合が全体の50%を越えるサイトも珍しくはないはずです。, また、Googleがモバイルフレンドリー・アルゴリズムを2016年5月から強化したため、今後はスマートフォン対応していないサイトの検索順位は目に見えて変動していくものと思われます。, そこで、当サイトでは「モバイルサイトをなんとかしたい」という方のお役に立てないかと思い、当記事を作成しました。スマホ用ホームページの作成・編集に是非、ご活用ください！, 「レスポンシブに非対応の無料テンプレートを使用中で、スマホでの表示も見栄え良くしたい」, 1. HOME > ブログ > Jimdoで見出しの大きさ変更カスタマイズ【PC・スマホ切り替え】, Jimdoの見出しブロックは「大・中・小」の３種類がありますが、もうちょっとフォントのサイズを変えたい、スマホ表示での大きさを変えたい場合はちょっと設定を変える必要があります。, 「font-size: ◯rem」の数宇を変えると、それぞれの文字サイズが変わります。「!important」を付けているのは、もともとclassの指定がかかっているので優先順位を強くするためです。よく分からなければ、このまま置いておきましょう。, 編集が終わったら、右下の「保存」ボタンを押せばOKです。実際の画面を見て確認してみましょう。, なぜかうまくいかない、という場合は他のコードを消してしまったor入力が違っている場合もあるので、そんな時はまるごと全部消して、１から貼り付ければ大丈夫です。, 「max-width: 768px」というのが、画面の横幅が768px以下の場合はこの表示になりますよ、という意味です。, とっつきにくそうに見えるCSSですが、少しずつ手を動かしていれば何となく分かってくるようになりますので、出来そうなところから始めれば大丈夫です。, [公開日] 2019年6月7日　/　[最終更新日] 2019年6月7日　カテゴリー：Jimdo, ポポデザイン西宮市在住のWEBデザイナー・クリエイター。文字の色を変えたいとき、背景色を設定したいときなど、さまざまな場面で登場するのが「カラーパレット」です。色を変更する機能は使ったことがある方も多いと思いますが、実はあまり知られていない便利な使い方がありますので、ぜひ覚えてくださいね。 TEL：050-3703-4552（※緊急連絡先。打ち合わせなどですぐに出られない場合がございます）, Jimdoの特定ページをWordPressへリダイレクトする方法-Javascript, 1つ以上の推奨モジュールが存在しませんとWordPressで表示される場合 – XREA, PainterClassicをWindows10で【メモリが足りません】のエラーを出さずに使う方法. 次に「スマートフォン用レイアウトをCSSで編集」にチェックマークを入れ、直下のスペースにて任意のCSSを記述していきます。, なお、スタイルの開始タグであるの記述は不用です。, 3. 昔の旧レイアウトの時代からJimdoを使っている方や、2014年8月にJimdoの新しいレイアウトが追加され、長く同じレイアウト使っている方はご存知かと思いますが、パソコンでの表示とは別にスマホではどんなデザインに見せるかを決められる、〔スマートフォン表示〕を選ぶことができました。「スマホ対応」「モバイルファースト」「レスポンシブデザイン」などを一度は聞いたことがあるのではないでしょうか。街で周囲を見渡せば、ほとんどの人がスマホの画面を覗き込んでいることからも分かるように、スマホを使って情報を探す人が圧倒的に増えている時代です。, そのため、ホームページをデザインする上でもスマホでのユーザー体験を優先的に考えるべきだとされています。スマホでいかにキレイに見せるかは、ホームページ訪問者を惹きつけるためにも、直帰率を最小化するためにも重要なことなのです。, ５〜６年前にホームページを作って、しばらくレイアウトを変更していないなら、ジンドゥーの旧レイアウトを使っている可能性があります。旧レイアウトもスマホ対応ではあるものの、新レイアウトの「レスポンシブデザイン」ほどスマホ最適化されるわけではありません。, レスポンシブデザインだと、ホームページ閲覧者の使っている端末に合わせて、解像度、画像、テキスト、メニューバーなどが最適な見え方に調整されるので、ホームページ訪問者はストレスなく、ページを閲覧することができます。, ストレスなく閲覧ができるとホームページの滞在時間が長くなり、売上や集客などに繋がってきます。もし、旧レイアウトをご利用している場合は、すぐにでも新レイアウトへの変更をオススメします。, 現在使っているレイアウトがレスポンシブに対応しているのかどうかを確かめるためには、［管理メニュー］>［デザイン］>［レイアウト］で確認ができます。, レスポンシブデザインに対応した新レイアウトだと、Maiami や Zurich のような都市名が書かれており、旧レイアウトは F4242 のようなコード名がついているので、一目で確認することができます。, スマホでホームページを見たときに読み込みに３秒以上かかったのであれば、ホームページは重いと言えます。一番に疑うべきは、画像や動画、余分なアドオンなどです。, 読み込み時間は SEO にも関係しているので、読み込みに時間がかかりすぎると検索順位にもマイナスな影響を与えます。, また、外部サービスを利用して、ジンドゥー内にウィジェットを組み込むのもホームページの読み込み速度を遅くする原因の一つです。そのため、外部サービスのウィジェットを多用することは控えましょう。ジンドゥーの機能で実現できることもあるので、ジンドゥー内の機能を積極的に活用してみてくださいね。, ページ内の問題点を見つけ出すためには、Google が提供している「モバイルフレンドリーテスト」というツールがオススメです。モバイルフレンドリーテストは、ホームページの URL を入力するだけで、ページ内の問題点と改善策を提示してくれるので、スマホ対応のページを作成するのに役立ちます。, 問題点がわかったら、さっそく改善に取り掛かりましょう。画像や動画の大きさが原因なら、画像のリサイズをしたり、圧縮をしてファイルを小さくしましょう。画質を下げずに画像を圧縮できるツールはたくさんあるので活用してみてください。, そして、忘れてしまいがちなのが背景画像です。背景画像が重いと全てのページの読み込みが遅くなってしまいますので、背景画像のファイルの大きさも見直してみてください。, 視覚的階層（ビジュアルヒエラルキー）とは、ホームページをデザインする上で、どの情報が重要度が高くて、どの情報がそうでないかを順位付けをすることです。視覚的階層を元にコンテンツを配置していくことで、ホームページ訪問者が重要な情報をすぐに見つけ出すことができます。, 反対に視覚的階層がないと、ロゴや見出し、ボタンなど多くなってしまい、どこに注目すれば良いのか分からなくなります。これだと情報を見つけ出すのに時間がかかってしまいます。, 視覚的階層（ビジュアルヒエラルキー）を作るためには、ホームページのプランや全体のアウトラインを作り、どのように分類訳けをするかを決めましょう。コンテンツを論理的に分けて整理することで、必要な情報と余分な情報を洗い出すことができるので、必要のないものを削ぎ落とすことができます。, 重要な情報はホームページのトップに置き、詳細の情報は各ページで掘り下げていきます。ホームページ訪問者が知りたいことは何かを考え、５W（だれ、なに、なぜ、いつ、どこ）に当てはめてみましょう。, プランと全体のアウトラインが決まったら、まずは「見出し」を使って、各セクションに見出しをつけます。見出しをつけることで、パッとみただけで何について書いているのかが分かりやすくなりますし、コンテンツにまとまりが出てきます。, 「感覚的に使いやすい、見やすい」といったユーザー体験（UX）は、ホームページ訪問者をより長く惹きつけることができるので、結果として売り上げにも繋がってきます。, せっかく時間と想いを込めてホームページを作っても、スマホやタブレットなどのような画面のサイズが小さい端末で見たときに、指でピンチしたりズームしなければ読めないような文字の大きさだと、誰も好んで読もうとはしないでしょう。そのため、文字サイズが適切かどうかを確認しましょう。, また、背景画像の中には視認性が悪く文章を読みづらくするものがあるので、シンプルな背景色と、その色に補完する文字色を使うよう心がけてみてください。, もし、お手元にスマホ端末がない場合でもジンドゥーなら問題ありません！ジンドゥーのプレビューモードを使うことで他の端末からの見え方を確認することができますよ。, ［管理メニュー］>［デザイン］>［レイアウト］> 右上に表示されるスマホをクリックでスマホ表示を確認できます。, 文字フォントに困ったら、「メイリオ」や「Arial」「Helvetica」などのフォントを試してみてください。また、フォントだけでなく文字サイズも適切か見直しましょう。一般的には本文は 16 px