· 

【Jimdoテクニック】見出しデザインで「見た目と読みやすさ」が変わる!

見出しデザインで、ホームページの見た目は変わるんです!

ホームページは内容はもちろん、見た目も非常に重要です。

皆さんも経験があるように、なんとなく見た目がよくないホームページはあまり読む気にならない。

逆に、洗練されたデザインのホームページは、読みやすく、続けて読んでみようという気になる。

 

ホームページのデザインと「読みやすさ」は非常に関係が深いです。

いくら内容を充実させても、デザインを疎かにすると良いホームページにはならないのです。

「見出し」は読みやすさを決めるポイントになる

中でも、ホームページの「見出し」は、重要な要素です。

見出しは、その次に「何が書いてあるか」を分かりやすく説明するという役割があります。

それだけではなく、ぱっと見た時に要素と要素の「仕切り」として、ホームページの画面を見やすくさせる効果もあります。

見出しをうまく使えるかどうかで、ホームページの見やすさは変わってくると考えて良いでしょう。

見出しのデザインを変える方法

とはいえ、Jimdoで見出しを思い通りにデザインすることはできません。

フォントを変えたり、大きさや色を変えることはできます。

しかし、それ以外のこと、例えば「下にラインを入れる」などといったことはJimdoの機能では不可能です。

 

Jimdo本部としては「よりシンプルにホームページを作れるシステム」であることを重視していますので、今後「見出しをデザインしたり、装飾したりする機能」が追加されることは「ない」と考えてよいでしょう。

 

では、どうやって見出しのデザインを変えるのか。

使うのは「CSS」というプログラミング言語です。

CSSで見出しのデザインを変える。

このブログ記事を読んでいらっしゃる方はもう気づいていると思いますが、このホームページは見出しがちょこっとデザインされています。

このように「見出し中」が「上下にラインが入るデザイン」に変わっているのです。

こうすることで、ただ太文字が置いてあるより「見出し感」がアップし、要素の境目が分かりやすくなります。

この「上下にラインが入るデザイン」にする命令を出しているのが、CSSというプログラミング言語です。

上下にラインを入れるCSS


<style type="text/css">

/*<![CDATA[*/

 

#content_area h2{

 

        margin:25px 0 5px 0;

        padding:0 0 0 0;

        color:#13AE67 ;

        font-weight:bold ;

        font-size:1.5em  !important;

        line-height:2em ;

        border-top:1px solid #13AE67;

        border-bottom:1px solid #13AE67;      

 

}

 

/*]]>*/

</style>


これが「上下に緑のラインを入れて、文字も同じ緑にする」という命令を実行するCSSというプログラムです。

いろいろ細かいことを説明すると難しいですので、とりあえず、

Jimdoの「管理メニュー」⇒「基本設定」⇒「ヘッダー編集」と進んで、出てきたページに上記のプログラムをコピー&ペーストすれば、皆さんのホームページでも同じ見出しデザインが実現できます。

 

もし色を変えたい場合は「 #13AE67」の6桁の英数字を変更してください。

色を決める数値は以下のホームページなどで調べられます。

⇒ https://www.colordic.org/

 

これだけでも、見た目や見やすさはかなり変わるはずです。

ぜひ試してみてください。

 

ちなみに、JimdoCafe 太田では、Jimdoホームページの見出し「大・中・小」をCSSを使ってデザインするカスタマイズも承っております(3デザイン1式で税込5,400円〜)ので、ぜひご利用ください。

 

それでは、Jimdoホームページ作りを楽しみましょう!


群馬県太田市市場町457-3

ZEROTOP DESIGN WORKS内