★Jimdoの基本的な「見出し(タイトル)」の文字デザインの変更方法は「文字や見出しのサイズや色を変更する」をご覧ください★
このページでは、「文字の大きさや色、配置などを変えただけではつまらない!もっとカッコ良くカスタマイズしたい!」という方向けに、当サイトのように見出しの背景デザインを変える方法をご紹介します。
Jimdoのシステムでは、見出し1~見出し3の文字サイズや色などを好きなように変更できるようになっていますね。
ホームページ用語(?)のHTMLでは、「hタグ」ではさまれた部分の事を「見出し(heading)」といいます。
hタグは、1番大きな「h1」を筆頭に、以下のように6つの階層に分かれています。
意味 | |
h1 | chapter 章 |
h2 | section 節 |
h3 | subsection 小節(項) |
h4 | subsubsection 小々節(目) |
h5 | paragraph title 段落小見出し |
h6 | subparagraph title 小段落小見出し |
各名前はともかく、要は「h1」が1番大きな見出しで、数字が大きくなるほど小さな見出しとなり、「h6」まで設定できるという事です。
※この場合の「大きい・小さい」は文字のサイズではなく、認識される重要度(←おそらく)です。
Jimdoのシステムでは「h1」~「h3」までの設定しかできませんが、実はとても簡単に「h4」、「h5」、「h6」の設定もできます!
「+」マークの「コンテンツの追加」から「ウィジェット/HTML」を選択します。
そこに、以下のように記述すれば設定完了です!
<h4>見出し4の文言</h4>
見出し5、見出し6も<h5>、<h6>にして同様にできます。
あとは、「CSS」で各見出しのデザインを指定します。
今回は「HTML」ではなく、「CSS(スタイルシート)」を記述して「見出し」のデザインを変えます。
Jimdoでは、以下の場所に「CSS」を記述します。
※ここに書いたルールは、サイト全体に適用されます!
← このマークを開いたページに記述する
やっと本題です!
まずは、上記の場所(ヘッダー部分を編集)に次のコードをコピーして貼り付けておきましょう!
(「これからCSSを書きますよ」という宣言です)
<style type="text/css">
/*<![CDATA[*/
★この間の部分に、「CSS」を記述します
(何個も続けて書くことができます)
/*]]>*/
</style>
ここまでできれば、あとは好きな見出しデザインのコードを★部分にコピーして貼り付けをすればOK!
※見出し1=<h1>、見出し2=<h2>というように、そのデザインにしたい見出しの数字に変えてください。
※どのコードにもある「#・・・」という部分は色を指定しています。お好きな色のコードに変えることで、色を変更できます。
(原色以外にも、和色、洋色etcのページがあり、とても豊富な色の種類の中から好きな色のコードを調べられます)
※「padding」という部分の数字は、文字と見出しの外枠の空間の広さを示しています。数字を小さくすると細い見出しに、大きくすると幅の広い見出しになります。
※見出しの文字自体の色や大きさは、Jimdoの「スタイル」で変更できます。見出し4~見出し6は基本的には文章と同じスタイルになります(あまり検証していないのでおそらく)
h1 {
background: #6f5436;
padding: 4px
}
※文字が真ん中になっているのは、当サイトの「スタイル」ページで「見出し1」を中央揃えに設定しているからです
h2 {
border-bottom: 3px dashed #d4dcda;
margin: 5 -22px;
padding: 5px 15px;
}
※文字が真ん中になっているのは、当サイトの「スタイル」ページで「見出し2」を中央揃えに設定しているからです
h3 {
border-bottom: 2px dashed #c7dc68;
margin: 5 -22px;
padding: 5px 15px;
}
※文字が真ん中になっているのは、当サイトの「スタイル」ページで「見出し3」を中央揃えに設定しているからです
h4{
border-top:2px dashed #ff8c00;
border-bottom:2px dashed #ff8c00;
padding:5px 0 5px 0;
}
※border-topの後ろの「#・・・」は上の線の色を、border-bottomの後ろの「#・・・」は下の線の色を指示しています。
h5{
border-bottom:1px solid #dcdcdc;
border-left:6px solid #2ca9e1;
line-height:200%;
padding-left:8px;
}
※border-bottomの後ろの「#・・・」は下の線の色を、border-leftの後ろの「#・・・」は左の縦線の色を指示しています。
h6{
background-color:#dcdcdc;
color:#000066;
border-bottom:2px solid #000099;
padding:5px 15px;
line-height:200%;
}
見出し1~3はJimdoの「スタイル」で文字の位置を設定できますが、
見出し4~6は上の「CSS」の最後、「}」の前に
text-align: center;
という一文を入れてみてください。そうすると見出しの文字が「中央揃え」になります。
また、centerの部分をrightにすると「右揃え」になります。
このサイトは完全無料で作成されています。
難しい知識も一切不要
あなたのサイトも今すぐ出来ます!
▼▼▼