jimdoをより見栄え良くする

上記のh1とかh2タグの背景を文字の色だけではなくかっこよく見せたいと考えませんか。

 

こんな場合はCSSとidやClassタグをHeadに挿入して改造してみましょう

 

実際のファイルはjimdoの独自レイアウト利用ならばファイルに保存しておくとか、自分のサーバーがある人は自分のサーバーに保管しておいてURLで画像を読み込めばOKです。

jimdoの元のテンプレートを利用する場合は以下のやり方で表示出来ますが裏技的に考えてみてください。

 

今回はこの画像をjimdoに登録して呼び出します。究極の裏技的な利用法ですが

http://u.jimdo.com/www55/o/sdee65186aef974d4/img/i228074f722a893ba/

1324950893/std/image.jpg と保存先の場所を右クリックしてプロパテイで取得しておきます。

 

※ただし注意点があります。

jimdoは画像URLはシステムの設計で動的に変化してゆく仕様が施されています。保存した状態によってはリンク切れする場合があります。動的な変化に合わせて参照先が変化しているので私のサイトではh1,h2のタグの背景は画像が表示されています。

 

詳しくはIMAMURA BIZ BLOGに詳しい記事があるので参照してみてください。

http://www.imamura.biz/blog/cms/jimdo/1771

それではCSSを設定してみましょう

 

ログイン後の右側の編集メニューに「設定」があります、この中の「ヘッダー部分を修正」を開きstyle設定でヘッダーにh1,h2の指定を書き込みます。

 

<style type="text/css">
/*<![CDATA[*/
 
h1,h2 {
display:block; 
background-image: url('http://u.jimdo.com/www55/o/sdee65186aef974d4/img/

i228074f722a893ba/1324950893/std/image.jpg');
background-repeat: no-repeat;
padding-left:25px;
height: 25px;
}
/*]]>*/
</style>

 

こんな感じです。すると下のような背景の入った見出し1と見出し2が出来あがります

 

1ページにh1は一つ、h2は複数設置出来ます。jimdoでは大見出し(h1)が複数設置出来ますがSEO的にはNGです。

テストh2(見出し2)タイトル編集後