<div style="padding: 5px 10px; font-weight: bold; background: #960; color: #fff; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius:
15px;">これが角丸になった背景です。文章からHTMLでタグを入れました。</div>
CSSやタグを少し知っているとカスタマイズが楽しい!
独自レイアウトなんて構えずに少しづつカスタマイズしていけば
見違えるほどプロ仕様になります。
新項目を追加ーウィジエット/HTML
タグを入力する。
<P>の間に文章を書き込む
<p style="border: 1px dashed #FF0000; padding: 10px;">
ここに文章を入れる
</p>
■応用でこんなに素敵なカスタマイズ
写真付き文章の項目の背景に色をつける。
この方法で同時に文字サイズを変更したりする事も出来ますよ。
写真と文章をずらしてかっこいいですね。
コンテンツを追加ー写真付き文章を選択
写真タブで写真を入れます。
文章を選択して、HTMLを選択して
下記のタグを入れます。
<p><strong>■応用を利かせればこんな表現も出来ます!</strong></p>
<div style="background: #f5fffa; border: 2px dotted #5f9ea0; margin: 10px 10px 10px 50px; padding: 10px; font-size: 90%;">
<p>写真付き文章の項目の背景に色をつける。この方法で同時に文字サイズを変更したりする事も出来ますよ。写真と文章をずらしてかっこいいですね。</p>
</div>
このサイトを参考にさせていただきました。
Jimdo簡単ホームページ作成
インターネット上で簡単にホームページが作れます!
上記のようなかっこいい見出しもいかが!?
コンテンツを追加ー文章ーHTML
以下のタグを書きましょう。
<div style='position: relative;border:1px solid #cc0000;background:#fffff8;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;'>
<p style=
'display:inline-block;padding:2px 20px 0px;font-weight: bold;position: absolute;-webkit-box-shadow:1px 2px 0px #333;-moz-box-shadow: 1px 2px 0px #333;box-shadow: 1px 2px 0px #333;top:-15px;left:14%;background:#cc0000;color:#ffffff;font-size:14px;border-radius:20px;-webkit-border-radius:20px;-moz-border-radius:20px;'>
Jimdo簡単ホームページ作成
</p>
<p style='padding: 20px 10px 10px;color:#333333;font-size:12px;'>
インターネット上で簡単にホームページが作れます!
</p>
</div>
パンくずリストとは、
このページのヘッダー画像のすぐ下に
ホーム>カスタマイズ
このページの位置を示しています。
Jimdoでも簡単なカスタマイズで作成できます。
設定ーヘッダー部分を編集
<script type="text/javascript" src="http://open-lab.jp/jimdo/breadcrumb.js">
</script>
このタグを入力して保存するだけで
自動で各ページにパンくずリストが出来てしまいます。
なんと、なんとかしこい!!
以下の機能は、新しいインターフェイスになって
新レイアウトを選択すると
部分的に大きさ、カラーなどを変更できるようになります。
旧レイアウトの場合は、今のところ有効です。
1行目が2行目の160%大きくしています。
設定ーヘッダー編集
以下のタグを書き入れましょう
<style type="text/css">
/*<![CDATA[*/
#emotion-header-title:first-line{
font-size:160%;
color:#FFFFFF;
}
/*]]>*/
</style>
以下の機能は、新しいインターフェイスになって
新レイアウトを選択すると
部分的に大きさ、カラーなどを変更できるようになります。
旧レイアウトの場合は、今のところ有効です。
本文にだけ入れる方法
あまり使わないならこの方法
<span style="font-size: 200%">あああ</span>
新コンテンツ追加ーHTML
このタグを入れる。
以下の感じで指定の文字だけ大きくなります。
本文にだけ入れる方法
あまり使わないならこの方法
あああ
新コンテンツ追加ーHTML にこのタグを入れる。
よく使う場合は
設定ーヘッダーの編集に下記のタグを記入
==================
<style type="text/css">
/*<![CDATA[*/
<!--
.f8{font-size:8px;}
.f9{font-size:9px;}
.f10{font-size:10px;}
.f11{font-size:11px;}
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f15{font-size:15px;}
.f16{font-size:16px;}
.f17{font-size:17px;}
.f18{font-size:18px;}
.f19{font-size:19px;}
.f20{font-size:20px;}
.f21{font-size:21px;}
.f22{font-size:22px;}
.f23{font-size:23px;}
.f24{font-size:24px;}
-->
/*]]>*/
</style>
==================
コンテンツの追加ー文章を選んでHTML画面で
<p class="f24">
<p>タグの中に赤文字を入れます。
ページの途中にリンクを貼る方法
■リンク先に
コンテンツの追加で「HTML」
<a name="○○"></a>
名前は半角英数字で、例えば、「photo」
■リンクする文字列にドラッグしてリンクを貼ります。
htmlでタグをだしてアドレスの後に、#photo
http://○○○。Jimdo.com/#photo
ページを変えたい時は、
http://○○○。Jimdo.com/会社案内/#photo
検索窓を作る
<!-- Begin Yahoo Search Form -->
<div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;">
<form action="http://search.yahoo.co.jp/search" method="get" target="_blank" style="margin:0;padding:0;">
<p style="margin:0;padding:0;">
<a href="http://www.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/080318/ysearch_logo_85_22.gif" alt="Yahoo! JAPAN" style=
"border:none;vertical-align:middle;padding:0;border:0;" width="85" height="22" /></a><input type="text" name="p" size="21" /><input type="hidden" name="fr" value="yssw" /><input type=
"hidden" name="ei" value="utf-8" /><input type="submit" value="検索" style="margin:0;" />
</p>
</form>
</div>
<!-- End Yahoo! Search Form -->