カスタマイズしましょう！

<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>

新項目を追加ーウィジエット/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>

このサイトを参考にさせていただきました。

上記のようなかっこいい見出しもいかが！？

コンテンツを追加ー文章ー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>

このタグを入力して保存するだけで

自動で各ページにパンくずリストが出来てしまいます。

なんと、なんとかしこい！！

以下の機能は、新しいインターフェイスになって

新レイアウトを選択すると

部分的に大きさ、カラーなどを変更できるようになります。

旧レイアウトの場合は、今のところ有効です。

以下の機能は、新しいインターフェイスになって

新レイアウトを選択すると

部分的に大きさ、カラーなどを変更できるようになります。

旧レイアウトの場合は、今のところ有効です。

本文にだけ入れる方法
あまり使わないならこの方法
<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 -->

Google Analytics