Jimdoの便利な使い方ブログ · 2017/03/01

JIMDOでCSSを書く方法

見出しをもっとカスタマイズしたい方

JIMDOでの見出し「大（h1）」「中（h2）」「小（h3）」と3種類ありますが、実は「h1、h2、h3、h4、h5、h6」と6種類まで設定することが出来ます。

「管理メニュー」→「基本設定」→「ヘッダー編集」で設定します。

（ヘッダー編集には、見出しや表などのコンテンツの内容のスタイルを書くことができます）

ヘッダー部にCSSを書くときはstyleタグで囲みます。

<style type="text/css">
/*<![CDATA[*/
<!--
    // ここに書きます
-->
/*]]>*/

</style>

↑上のタグをコピーし、赤い文字のところに下記のタグをペーストします。

「h1」と記載されているところは「ｈ1〜h5」と変更されてお使い下さいね。

ちなみに当サイトは「h1→下ボーダー」を使っています。

文字の書体、色、大きさなどは「管理メニュー」→「デザイン」→「スタイル」からも変更することが出来ます。

シンプルなCSSコピペで実装できるタイトル（見出し）のデザインサンプルのご紹介

１．下ボーダー

シンプルにタイトル下にボーダーを引いたものです。

h1 {
        padding-bottom: .5em;
        border-bottom: 1px solid #ccc;
}

2．下ボーダー（2本）

h1 {
        padding-bottom: .5em;
        border-bottom: 3px double #ccc;
}

3．上下のボーダー

h1 {
        padding: .75em 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
}

4．左ボーダー

h1 {
        padding: .25em 0 .25em .75em;
        border-left: 6px solid #ccc;
}

5．左ボーダー × 下ボーダー

h1 {
        padding: .25em 0 .5em .75em;
        border-left: 6px solid #ccc;
        border-bottom: 1px solid #ccc;
}

6．吹き出し

h1 {
        position: relative;
        padding: .5em .75em;
        background-color: #f0f0f0;
        border-radius: 6px;
}
h1::after {
        position: absolute;
        top: 100%;
        left: 30px;
        content: '';
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top: 15px solid #f0f0f0;
}

カテゴリ： CSS, 見出しの編集

コメントをお書きください

コメント: 0