ホームページをもっとよくする!Jimdoワンポイント講座

ホームページをもっとよくする!Jimdoワンポイント講座

第24回目「スタイル機能を活用しよう」

せっかく作ったホームページ、一人でも多くの人に見て、読んでもらいたいですよね。しかし「思うように表現できない」「うまく伝わらない」そんなケースが多いようです。このコラムでは、ホームページ作りに役立つ「ちょっとしたコツ」をご紹介いたします。
第24回目は「スタイル機能を活用しよう」です。それでは、スタート!

ルドルフ

アリーナちゃん・・・・・・・・あのぅ・・・・・・・・・・・


ルドルフ

(ハッ!いつの間に後ろに!)ど、どうしたの?ルドルフくん。


笑顔アリーナ

実は、僕のおじいちゃんに「ホームページのリンクの色を変更したいんだけど、わからない」と相談を受けたんだけど・・・


ルドルフ

・・・・・・・・・・受けたんだけど・・・・・・・・・・・・・・?


笑顔アリーナ

僕もわからないんだ!


ルドルフ

そんな流れかなと思ったわ、ルドルフくん。詳しく解説するわね。


笑顔アリーナ

お願いします!!


【スタイル機能を活用しよう】

Jimdoでは、カラーやフォント、背景色などを設定できる「スタイル」という機能が用意されています。「見出し」の大きさやカラーを変えたり、リンクの色を変更したり、実はいろいろできることがあるのです。

本稿では、スタイル機能の設定画面について、「ページタイトル」「ナビゲーション」「本文(コンテンツ部分)」「フッター」「ボタン」」「フォーム」に分けて解説します。今回は、すべて「詳細設定オン」の状態で作業していきます。


(1)スタイル機能の使い方(共通)

 

1)右側のツールバーから「スタイル」をクリックします。

 

2)マウスカーソルがペンキを塗る刷毛状になりますので、スタイルを変更したいエリアで合わせてみましょう。
※「詳細設定」が「オフ」になっているときには、マウスカーソルは刷毛状にはなりません。

 

3)重ねたときに、青い線が表示されるエリアは、「スタイル」の変更ができます。

 

●スタイル設定作業が終わったら・・・

スタイルの設定作業が終わったら、「保存」ボタンをクリックします。「やり直す」をクリックすると、再度設定変更ができます。

ここまでが、(2)以降の共通作業になります。

 

(2)「ページタイトル」のスタイル設定について

 

マウスカーソルを「ページタイトル」のエリアに合わせてからクリックすると、以下の画面が表示されます。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォント ページタイトルの文字のフォントを変更することができます。Pro、Businessにアップグレードすると、使用できるフォントの種類が増えます。
③フォントサイズ タイトル文字の大きさを変更できます。
④太字 文字を太字にします。
⑤斜体 文字を斜めにします。
⑥フォントカラー 文字の色を変更することができます。
⑦配置 文字の配置を、左・中央・右へ変更することができます。
⑧文字設定 英字を使ったときの大文字、小文字の設定ができます。

 

Before

After

「フォント」を変更しました。

(3)「ナビゲーション」のスタイル設定について

 

ナビゲーションのスタイルについては、大きく分けて2か所設定できるエリアがあります。ナビゲーションの「背景」部分と「ボタン」部分です。ここでは分けて解説します。

 

●「ナビゲーション」(背景)のスタイル設定について

マウスカーソルを「ナビゲーション」のエリアに合わせてからクリックすると、以下の画面が表示されます。まずは「ナビゲーション」の「背景」を設定してみます。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②背景色 ナビゲーションの背景色を設定することができます。
③配置(横方向) ナビゲーションボタンの配置(横方向)を変更することができます。
④配置(縦方向)

ナビゲーションボタンの配置(縦方向)を変更することができます。

 

※設定できる箇所は、レイアウトによって若干異なる場合があります。ここでは「Miami」というレイアウトを使って解説しています。

Before

After

ナビゲーションの位置を左に、背景の色を水色に変更しました。

 

 

●「ナビゲーション」(ボタン)のスタイル設定について

マウスカーソルを「ナビゲーション」の「ボタン」部分に合わせてからクリックすると、以下の画面が表示されますので、設定してみましょう。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォント フォントの種類を変更することができます。Pro、Businessにアップグレードすると、使用できるフォントの種類が増えます。
③フォントサイズ 文字の大きさを変更できます。
④太字 文字を太字にします。
⑤斜体 文字を斜めにします。
⑥フォントカラー 文字の色を変更することができます。
⑦フォントカラー(active) 現在いるページ、もしくはマウスオーバーしたときのボタンの文字色を変更することができます。
⑧背景色 ボタンの背景色を変更することができます。
⑨背景色(active) 現在いるページ、もしくはマウスオーバーしたときのボタンの背景色を変更することができます。
⑩配置(横) ナビゲーションボタンの配置を、左・中央・右へ変更することができます。
⑪配置(縦) ナビゲーションボタンの配置を、上寄せ・中央・下寄せへ変更することができます。
⑫文字設定 英字を使ったときの大文字、小文字の設定ができます。

 

Before

After

ボタンの背景色(通常時、active)、フォントカラーを変更しました。

 

(4)「本文」(コンテンツ部分)のスタイル設定について

 

本文(コンテンツ部分)では、複数の設定できる箇所があります。下図のように、マウスカーソルを合わせてクリックすると、以下の画面が表示されますので変更してみましょう。

「背景」「文章」「リンク」「見出し」「水平線」のスタイルを変更することができます。

本文(コンテンツ)部分のスタイルの変更を行うと、全頁に同じスタイルが適用されます。

 

●「背景」のスタイル設定について

本文の「背景」エリアをクリックしたときに表示される設定画面です。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②背景色 本文部分(コンテンツ部分)の背景色や(※)透明度を変更することができます。

 

※背景の透明度の設定について

 

●「文章」のスタイル設定について

文章機能で作成されたエリアをクリックしたときに表示される設定画面です。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォント

フォントの種類を変更することができます。Pro、Businessにアップグレードすると、使用できるフォントの種類が増えます。

③フォントサイズ 文字の大きさを変更できます。
④フォントカラー 文字の色を変更することができます。
⑤行間幅 行と行の間にある余白(高さ)を設定できます。

 

●「リンク」のスタイル設定について

文章機能で作成された中で、「リンク」が設定されているエリアをクリックします。下記の画面が表示されますので、必要があれば変更しましょう。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②リンクカラー(active) マウスオーバーしたときの文字色を変更することができます。
③リンクカラー リンクが設定されている文字の色を変更することができます。

 

●「見出し」のスタイル設定について

「見出し」機能を使って作成したエリアをクリックします。下記の画面が表示されますので、必要があれば変更しましょう。
(見出し大・中・小とも操作方法は共通ですが、個別に設定が必要です。)

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォント フォントの種類を変更することができます。Pro、Businessにアップグレードすると、使用できるフォントの種類が増えます。
③フォントサイズ 文字の大きさを変更できます。
④太字 文字を太字にします。
⑤斜体 文字を斜めにします。
⑥フォントカラー 文字の色を変更することができます。
⑦行間幅 行と行の間にある余白(高さ)を設定できます。
⑧配置 文字の配置を、左・中央・右へ変更することができます。
⑨文字設定 英字を使ったときの大文字、小文字の設定ができます。

 

●「水平線」のスタイル設定について

「水平線」機能を使って作成したエリアをクリックします。下記の画面が表示されますので、必要があれば変更しましょう。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②背景色 ここで背景色を変更すると、本文(コンテンツ)部分全体の背景色が変更になります。(水平線の背景色を設定するボタンではありませんので、ご注意ください)
③線の太さ 水平線の太さを設定します。
④スタイル 水平線のスタイルを変更することができます。「罫線」「点線」「ハイフン線」の3種類です。
⑤線の色 水平線の色を変更することができます。

 

本文(コンテンツ部分)のスタイルを変更しました。

背景色、見出し、文章、リンク、水平線の設定を変更しました。