CSSを追記(コピペ)して見出しの装飾をしてみよう

JimdoCafe 久留米のホームページをご覧いただいたから

「見出しを四角で囲んだり、見出しの背景に色をつけるにはどのようにすれば良いですか?」

というご質問をいただきました。ありがとうございます。

Jimdoの見出しは「文字の大きさ」や「文字の色」を変えることはできますが、枠をつけたり、背景に色を入れたりということは標準の機能では不可能です。

そこで、そのような装飾を可能にするために「CSS」というものを書き加えて実現しています。

「CSS」と聞くと「自分には無理だ」と諦めてしまう方がいらっしゃいますが、今回はコピー&ペーストだけで実現できるようにしていますので、ぜひ最後までご覧いただければと思います。

CSSとは

このページと同じように見出しの装飾をするには「CSS」というものを書き加える必要があります。

CSSとは、Cascading Style Sheet(カスケーディングスタイルシート)の頭文字です。

読みはアルファベットの読み方そのままで、CSS(シーエスエス) 。

主にHTML(エイチティーエムエル)文書に対する表示及びデザイン(文書の見栄え)等を指定します。

具体的には、フォントの種類や文字の大きさ、色、行間の幅といった文書の装飾やレイアウトなどの情報全般を扱う文字列になります。

まずはホームページの見出しのつけ方を理解しよう

Jimdoは「コンテンツを追加」に「見出し」という項目があります。

この中には「大」「中」「小」と3種類あることが分かります。

 

JimdoCafe 久留米,見出し設定

※Jimdoの「コンテンツを追加」→「見出し」の設定画面

見出しの使い方にはルールがあります。

 

このルールというのは「SEO」にも有効に働きますので、ぜひホームページの文章や、ブログを書くときは意識するようにしておいた方がいいです。

見出しの意味合いを書籍で例えてみましょう。

  • 見出し「大」は「主題(タイトル)」、1ページに1回しか使わない。
  • 見出し「中」は「章」
  • 見出し「小」は「節」

見出しの使い方の例は以下の図解で示しています

※下記の図を1ページとしてみてください。

JimdoCafe 久留米,見出し設定,見出し図解

いかがでしょうか?

見出し「大」は1ページに1回しか使っていません。「中」「小」は適切に「章」「節」に当たるような場所に見出しをつけて使うようにしています。

JimdoCafe 久留米の見出し

当ホームページで使っている見出し「大」「中」「小」は下記の図をご覧ください。

JimdoCafe 久留米,見出し

実際にはこの3つ以外も使っていますが、それは「見出し」機能以外を使って実現しているので、今回は割愛いたします。

このように二重線で囲んだり、角丸で囲んだり色をつけたりするにはこは、前回の技術ブログ「JimdoのページをFacebookでシェアした時の「OGP」をうまく表示させる方法」のときと同じ「ヘッダー編集」という場所にCSSという文字列を入力します。

復習もかねて見てみましょう。

管理メニューの「基本設定」→「ヘッダー編集」と進んでください。

JimdoCafe 久留米,見出し設定

「ヘッダー編集」を開くとこのような画面になります。

JimdoCafe 久留米,見出し設定

前回の「OGP」の設定用の文字列が入っているかと思います。

「<head>の変更」に見出し装飾用のCSSを追記していきます。

見出しの装飾に必要なコード

まずは、上のコードの「<style type="text/css">〜</style>」まで、1文字も漏らさずコピーして、ご自身のJimdoのホームページの「<head>の変更」部分に貼り付けてみましょう。

貼り付けたあとは「保存」ボタンを忘れずにクリックしてください。

操作手順動画

見出しの背景色や文字色を変えるには?

コードと同じ行の右側に書いている「/*◯◯◯◯*/」は、書いているコードの意味になります。

見出しの背景の色や見出しの文字の色を変更したいときは「#◯◯◯◯◯◯」の部分を変えると色が変わります。

 

「#fff」のように3桁しかないところは、「#ffffff」のように残りの3桁も同じ文字列が繰り返されるので省略しています。

下記リンクを参考にすると「#」から始まるカラーコードを調べることができますので、ぜひご活用ください。

以上が見出しの背景色などを装飾するやり方になります。

形を変えるのはもっと奥が深い説明が必要になってきますので、今回は省略させていただきます。

前述したコードを使って見出しを使い分けるだけでも、ホームページを見ている人が読みやすい文章設計ができるようになるので、ぜひチャレンジしてみてはいかがでしょうか?

もし、上記の方法でできない場合はコードを色々触らずに、貼り付けたコードを削除して、元の状態に戻してください。

JimdoCafe 久留米ではこのようなCSSに関することは「個別相談」でのみお受けいたしております。

※当記事は「Jimdoユーザー」などの非制作者向けに書いています。ご了承ください。