Web Shakehands
Web Shakehands

Language


Jimdoのコンテンツ文字部分に枠を付ける


JimdoはHTMLなどタグの知識がなくても、ホームページが作成出来る大変便利なツールです。

ただ、コンテンツの文字部分や、ウィジットツールにHTMLを書くことが可能なのもJimdoの魅力の一つです。

また、独自レイアウトではヘッダー部分、フッター部分にもHTMLを書くことができます。

一からHTMLでホームページを作成するには時間と労力が掛かり、そのための知識を身に着けるにも時間が掛かります。

このようなことから、HTMLは少し取っつきにくいと思われる人も多くいます。

しかし、HTMLも部分部分で使う場合には、難しくなく、ちょっとしたアイディアセクションに変えることができるのです。

そんな、アイディアセクションの一つを今回ご紹介させていただきます。

HTMLとセットで使われるのがCSSと言われる、ウェブページのスタイルを指定するための言語です。

このCSSを今回は使っていきます。

Jimdo ボックス

このように文字に枠で囲むと、より見やすくなり、少しオシャレな印象になります。

タグを記載させていただきますので、これをコピー・ペーストしていただければ、使うことができます。

「文章」のボタンで文章のツールボックスから、 HTMLを書くことが出来るウィンドウが表示されます。

Jimdoの文章ボタン

Jimdo 枠

(下記のタグをコピー・ペーストします。
文章はご自身の内容に変更します。)

タグをウィンドウの中にペーストします。
JimdoのHtml編集画面

タグの解説を掲載させていただきます。 Jimdoのコード

1.border: 4px

borderで文字の周りに枠を作っています。 「4px」は線の太さを指定しています。


2.double

線の種類を選択できます。double以外にも1本の線、solidなど、色々な種類があります。 こちらのページに種類が載っています。

http://www.w3schools.com/css/css_border.asp
3.blue

色を指定します。

こちらのカラーチャートから選択できます。

http://www.tagindex.com/color/color_name.html
4.padding: 10px

文字から枠までの距離を指定できます。
5.border-top: 7px

これは枠の上に1本の線を引いているだけです。

borderのあとに

topと入れると上だけに線を付ける指定が出来ます。

7pxで線の太さを指定しています。

そのあとの色と線の種類は2.、3.と同じです。 枠だけでなく、太目の線を1本枠の上に乗せるだけでちょっとオシャレになります。
部分的に、このCSSを入れるだけで、ホームページがさらに良くなりますね。

このエントリーをはてなブックマークに追加


最新 Jimdo 記事 !

2017 1/26 Jimdoのそれぞれのページに違うメイン画像を設定する


2017 1/12 メイン画像の重要性 Jimdo版


2016 12/22 他社で取得したオリジナルドメインをJimdoで利用する方法


2016 11/09 Jimdoページに3Dタイトルを導入する


2016 09/30 Jimdoのナビゲーション部分にオリジナルアイコンを付ける


2016 09/16 Jimdoコンテンツ部分にオリジナルタイトルを作る


2016 08/18 Jimdoのコンテンツ文字部分に枠を付ける


2016 08/03 オリジナルドメインを取得する


2016 07/07 「グーグルアナリティクス」を使ってユーザーのアクセス解析を行う


2016 06/23 「Tokyo」Jimdoの新テンプレート


2016 05/12 Jimdoトップページに掲載する10のコンテンツ


2016 05/02 Q&A Jimdo ページを作成しました


E-mail を入力するだけで、あなたのHPを作るための
ノウハウメールマガジンを無料でお届けします
E-mail:
  

上部へ