文章のエレメントに枠を付けたい。

文章に枠をつけましょう

ここでは、以下のような枠付きの文章を作る方法を説明しています。

説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文

説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文

説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文説明文


Jimdoの基本的なエレメントには文章に枠を付けるという機能はありません。

枠付きの文章を作るには


1)テーブルを用いる方法


2)スタイルシートを使う方法

 

この2つの方法があります。

ここではスタイルシートを用いる方法を説明します。

スタイルシートを使ってJimdoの表現の幅を広げよう!

スタイルシートって何?という人も多いかもしれませんが、スタイルシートを使うことで、

Jimdoの表現力は飛躍的にアップします。

 

最低限これを知っているだけでもかなり高度な表現方法を手に入れることが出来るようになります。

 

今回は『スタイルシートを使ってJIMDOの表現の幅を広げよう!』のシリーズを書かせていただくことにしました。

<style>

/* waku
-------------------------------------------- */

.waku1{
        padding:10px 15px;
        margin:5px 0px;
        background:#F0F0F0;
        border:1px solid #C0C0C0;
}

.waku2{
        padding:10px 15px;
        margin:5px 0px;
        background:#EAEFF9;
        border:1px solid #BABCC9;
}

.waku3{
        padding:10px 15px;
        margin:5px 0px;
        background:#FDEDE4;
        border:1px solid #CDBDB4;
}

.waku4{
        padding:10px 15px;
        margin:5px 0px;
        background:#EBF5EC;
        border:1px solid #BBC5BC;
}

.waku5{
        padding:10px 15px;
        margin:5px 0px;
        background:#F9F9EA;
        border:1px solid #C9C9BA;
}

</style>

(1)左側のスタイルシートの指定

<style>から</style>までを

[設定]⇒[ヘッダー部分を編集]に書き込みます。

 

(2)保存ボタンを押します。

コードは有効化され、保存しました。無効なセクションは削除されました。

保存ボタンを押すと上記のように表示されますが、この段階ではスタイルシートは反映されていませんので、保存ボタンを押した後は必ずページの再読み込みを行ってください。

(3)次に枠で囲いたい文章を編集状態にします。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422