■Jimdoでワク線を付ける&カスタマイズする方法(図解編)
サイトのレイアウト上、ワク線があると内容にメリハリが出ます。
カンタンな操作で枠線は作れますからぜひやってみてください。
方法は以下の通りです。
![「文章」を開いて「HTML」をクリックする](https://image.jimcdn.com/app/cms/image/transf/none/path/sec15edc54981b63f/image/iaa137114c046b84c/version/1327060735/%E6%96%87%E7%AB%A0-%E3%82%92%E9%96%8B%E3%81%84%E3%81%A6-html-%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B.jpg)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=48x10000:format=jpg/path/sec15edc54981b63f/image/i86265770e72d8701/version/1327061250/image.jpg)
![HTMLソースエディタ画面の初期状態](https://image.jimcdn.com/app/cms/image/transf/dimension=500x10000:format=jpg/path/sec15edc54981b63f/image/id9a729f5954f17af/version/1327060695/html%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E7%94%BB%E9%9D%A2%E3%81%AE%E5%88%9D%E6%9C%9F%E7%8A%B6%E6%85%8B.jpg)
![](https://image.jimcdn.com/app/cms/image/transf/dimension=48x10000:format=jpg/path/sec15edc54981b63f/image/i75cf71d29b6bb79e/version/1327061266/image.jpg)
エディタ画面の空欄に下記の枠線ひな型ソースコードをコピー&ペーストする。
<table border="0" cellspacing="0" cellpadding="3" width="243" height="104">
<tbody>
<tr>
<td style="border: 2px solid #b0c4de;" colspan="3" rowspan="3" align="left" valign="middle">
<p> </p>
</td>
</tr>
</tbody>
</table>
![](https://image.jimcdn.com/app/cms/image/transf/dimension=48x10000:format=jpg/path/sec15edc54981b63f/image/i8737bdfd04982115/version/1327061269/image.jpg)
![枠線のひな型ソースコードを貼り付けた状態](https://image.jimcdn.com/app/cms/image/transf/dimension=500x10000:format=jpg/path/sec15edc54981b63f/image/i5e8f25d04d0e0b5c/version/1327060708/%E6%9E%A0%E7%B7%9A%E3%81%AE%E3%81%B2%E3%81%AA%E5%9E%8B%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%B2%BC%E3%82%8A%E4%BB%98%E3%81%91%E3%81%9F%E7%8A%B6%E6%85%8B.jpg)
最後に左下の「更新」ボタンを押せば↓の画面になります。
![ワク線付き文章の出来上がり](https://image.jimcdn.com/app/cms/image/transf/dimension=500x10000:format=jpg/path/sec15edc54981b63f/image/ic7ee86fcec6f323a/version/1327061233/%E3%83%AF%E3%82%AF%E7%B7%9A%E4%BB%98%E3%81%8D%E6%96%87%E7%AB%A0%E3%81%AE%E5%87%BA%E6%9D%A5%E4%B8%8A%E3%81%8C%E3%82%8A.jpg)
このワク線の中をクリックすればカーソルが現れますので、通常の文章打ち込みと同じ要領で文を入力していきます。
枠線のその他Tips
↓枠線のカタチを変えるのにはアンカーポイントを動かします
![アンカーポイントで枠線の形を変更できます](https://image.jimcdn.com/app/cms/image/transf/dimension=500x10000:format=jpg/path/sec15edc54981b63f/image/i0f9a2dc688f0c37c/version/1327064389/%E3%82%A2%E3%83%B3%E3%82%AB%E3%83%BC%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%E3%81%A7%E6%9E%A0%E7%B7%9A%E3%81%AE%E5%BD%A2%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99.jpg)
↓枠線の太さと色を変更するには、HTMLソースコードを変えます
![枠線の太さと色を変更するにはココ](https://image.jimcdn.com/app/cms/image/transf/dimension=560x10000:format=jpg/path/sec15edc54981b63f/image/i0c18458b03ec13a1/version/1327065689/%E6%9E%A0%E7%B7%9A%E3%81%AE%E5%A4%AA%E3%81%95%E3%81%A8%E8%89%B2%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%82%B3%E3%82%B3.jpg)
以上です。いかがですか?とってもカンタンにできますね!