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

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

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

「スタイル機能を活用しよう」前ページからの続きです。

(5)「フッター」のスタイル設定について

 

フッターにも、複数の設定できる箇所があります。下図のように、マウスカーソルを合わせてクリックすると、変更することができます。

「背景」「文章」「リンク」「見出し」「水平線」のスタイルを変更ができます。やり方については、それぞれ「(4)「本文」(コンテンツ部分)のスタイル設定について」と同じですので、ご参照ください。
※背景は、一番広いエリア、内側のエリア等、複数箇所の変更が可能です。

 

●「フッター」の一部をクリックした時に表示される「レイアウト配置」について

フッターに表示される青い枠にマウスカーソルを合わせてクリックしたときに「レイアウト配置」と記載された設定画面が表示されます。これは、フッターだけでなく、ホームページ全体の配置を設定する画面になりますので、ご注意ください。
※この機能は使えるレイアウトと使えないレイアウトがあります。下記の例では「Barcelona」を使用しています。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②レイアウト配置 ホームページ全体の配置を、右・中央・左へ変更することができます。初期設定では「中央」に設定されているレイアウトが多いです。
③横の余白 レイアウト配置を「左」もしくは「右」に設定した際、それぞれ「左側」もしくは「右側」の余白を設定することができます。
④縦の余白 この数値を大きくすることによって、ホームページの一番上部の余白、フッター部分の余白を変更することができます。
レイアウトを「左」にして「横の余白」を設定した場合の例
レイアウトを「中央」にして「縦の余白」を設定した場合の例

(6)「ボタン」のスタイル設定について

 

「ボタン」機能を使って作成したエリアをクリックします。フォントやボタンの色、枠などが設定可能です。(スタイル1・2・3、共通です)

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォント ボタン内に表示される文字のフォントを設定できます。
③フォントサイズ ボタン内の文字のサイズを変更できます。
④フォントカラー ボタン内の文字のカラーを変更できます。
⑤フォントカラー(active) マウスオーバーしたときの文字のカラーを変更できます。
⑥背景色 ボタンの背景色を変更できます。
⑦背景色(active) マウスオーバーしたときのボタンの背景色を変更できます。
⑧罫線の色 ボタンの周りにある枠線の色を変更することができます。
⑨枠の色(active) マウスオーバーした時の枠の色を変更することができます。
⑩罫線のサイズ ⑧の枠線のサイズを変更することができます。
⑪角丸 ボタンの角の形(丸さ)を調整することができます。

 

ボタンのスタイルを変更しました。

(7)「フォーム」のスタイル設定について

 

「フォーム」機能を使って作成したエリアをクリックします。枠のスタイルやボタンの色などが変更可能です。

●「罫線」「枠の色」の設定について

枠にマウスカーソルを合わせてクリックした時に表示される画面です。

①詳細設定 このボタンを「オン」にすることで、細かい設定ができるようになります。ここでは「オン」にして使用しています。
②フォントカラー フォームの入力欄に、文字を入力したときのカラーを変更できます。
③罫線の色 入力欄の枠の色を変更することができます。
④枠の色 マウスカーソルがある入力欄の枠の色を設定することができます。

フォームの「罫線の色」を変更すると、以下も同様に変更されます。
・「Googleマップ」の「目的地までのルートを検索」⇒「ここから:」の入力欄
・ブログのコメント入力欄の枠のスタイル

 

●「送信ボタン」の設定について

 

「送信ボタン」にマウスカーソルを合わせてクリックした時に表示される画面です。

こちらの設定は「(6)「ボタン」のスタイル設定について」とやり方は同じですので、ご参照ください。

 

「送信ボタン」のスタイルを変更すると、以下も同様に変更されます。
・「Googleマップ」の「検索」ボタン
・「ブログ表示」の「続きを読む」「コメント」ボタン
・ブログ記事の下に表示される「コメントをお書きください」ボタン
・ブログ記事、コメント入力欄下の「送る」ボタン
・「ダウンロード」機能のボタン

 

輝くルドルフ

できたー!アリーナちゃん!バッチリ、設定できたよー。


ウインクアリーナ

ステキだわ、ルドルフくん♪


まとめ

Jimdoのスタイル機能を活用すると、同じレイアウトでも「見た目」を大きく変えることができます。レイアウトにもよりますが、本文(コンテンツ)部分の背景色などは、以前ワンポイント講座で解説した『第22回目「背景画像を活用しよう」』と組み合わせて考えてみると、いろいろ表情を楽しむことができるでしょう。ぜひ活用してくださいね。


ルドルフの小言

泣くルドルフ

ホームページを良くしていくのってなかなか難しいよね。

詳しい人に相談できるといいんだけど・・・


ウインクアリーナ

そんな時はJimdoCafeがオススメよ!

JimdoCafeのことは、ここのページを見てみて!

▶︎▶︎ Jimdoユーザーの駆け込み寺「JimdoCafe」