jimdoでCSS-文字を囲む

こんにちは中小企業診断士、ストリートコンサルタントのCyphs（サイフス）です。

Jimdo、CSSデザインのコーナー

Jimdoにおいて前回から基礎編としてCSSを触っていますが、具体的な編集について解説します。

前回以下の範囲にCSSを記述することでページのデザインを変更できることをお伝えしました。

　 /*<![CDATA[*/

　 /*]]>*/

　 </style>

具体的な編集については以下のとおりです。

簡単なので色々と試してみてください。

基礎編では以上のように示していましたが、強調したい内容であるにもかかわらず、青地で記載する程度で、閲覧者の方にしてみれば、それ程記憶に残らない可能性があります。

そこでjimdoの「ヘッダー編集で修正してみます」

※jimdoでは細かい編集は、手間がかかるのでHTMLとCSSを触れる方にはお勧めしませんが、中小企業においてはスマホ対応など手間がかからないためお勧めと考えています。

まずは、ヘッダー編集の画面に進みます。

そのうえで「各ページ」をクリックします。

ヘッダー編集に以下のようなコードを流し込みます。

CSS（ヘッダー編集の各ページ）には、以下のように打ち込みました。

※前ページに入力すると「.surround1」と指定した箇所が全て同じデザインになってしまいますので、あくまで各ページにデザインを「効かせた」というところになります。

上記の画像の内容をコピペすると同じようになります。

.surround1 {

padding:0.5em 1em;/*破線の囲みと文字の間隔を指定*/

margin:0.5em 0em;/*破線の囲みと上の文字等との間隔を指定*/

background:#f0f6ff;/*背景色*/

border:dashed 2px #5b8bd0;/*点線を破線かつ太さ、カラーを変更*/

border-radius:10px;/*角の丸み　pxで角の丸みを変更可*/

display:inline-block;/*文字のサイズに合わせて囲みを作成する*/

background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);

background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);

}

.surround1 p {

margin: 0;

padding: 0;

}

加えて、HTMLのbodyは以下のようにします。

文面を記載します。

</div>

上記のソースをBody自体、CSSの両方に入力することで、上記のような破線でかつ、背景が斜線で文字の範囲を囲むデザインが可能となります。

色々とデザインを変えれば、より視覚的に目立つように協調できますので、コピーしつつ自身の修正を加えてください。