あなたのニーズが私の仕事
元・銀行員スペシャリスト事務管理西村ゆかりです。
本日は、アメブロ記事内に囲み線を書く方法Part３
枠内に余白を作ったり、色をつけたりしてみます
【～囲み線の書き方③～】
まずは、HTML表示を選択します。
①枠内に余白を作る方法
⇓下記のタグをそのままコピーして貼り付けると⇓
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 10px;">ここに文字を書く</div>
⇑このようになります。
【～解説～】
●padding: 10px 5px 10px 10px←この部分が余白を表します。
設定の数字は、順番に上、右、下、左の余白のこと。
この数字を変えれば余白の大きさを変えられます。
②枠内の文字色を変える方法
⇓下記のタグをそのままコピーして貼り付けると⇓
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 10px; border-color: red; color: green;">ここに文字を書く</div>
⇑このようになります。
【～解説～】
●color: green←この部分が文字の色を設定するところです。
green=文字の色が緑色になっています。
●色は、green（緑）orange（オレンジ） blown（茶） blue（青） pink（ピンク）
などを入力する方法の他に、カラーコードを入力する方法があります。
●カラーコードについては、「HTMLカラーコード」で検索してお好みの
カラーコードを見つけてください。
③枠内の背景色を変える方法
⇓下記のタグをそのままコピーして貼り付けると⇓
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 10px; border-color: blue; color: red; background-color: pink;">ここに文字を書く</div>
⇑このようになります。
【～解説～】
●background-color: pink←背景の色はピンクということを表します。
●色は、green（緑）orange（オレンジ） blown（茶） blue（青） pink（ピンク）
などを入力する方法の他に、カラーコードを入力する方法があります。
●カラーコードについては、「HTMLカラーコード」で検索してお好みの
カラーコードを見つけてください。
それでは、今日もサービスしちゃお～
ですが、HTMLって何なのよぉ～
通常表示のまま下記をコピーしてお使いください
それでもよくわからない～じっくり教えてほしい～という方は、
パソコンが超絶苦手な方にも、わかりやすくて楽しい
とご好評を頂いている
「０から始めるブログ・Facebook個人レッスン」がおすすめです
★メルマガ登録はお気軽にどうぞ★
ブログ・Facebookお役立ち情報・新月・満月情報・各種キャンペーン・お得情報など。
something fun 西村ゆかり news letterの購読申し込みはこちら
申込・お問い合わせは
somethingfun@outlook.jp
またはメニューバーのお問い合わせフォームよりどうぞ
※４８時間以内に返信いたします。
something funキャンセルポリシー
ご予約の３日前より５０%、前日当日は１００%のキャンセル料金を
ご負担頂きます。お申込み頂いた時点で、同意頂いたものとさせて頂きます。
元・銀行員スペシャリスト事務管理西村ゆかりです。
本日は、アメブロ記事内に囲み線を書く方法Part３
枠内に余白を作ったり、色をつけたりしてみます
【～囲み線の書き方③～】
まずは、HTML表示を選択します。
①枠内に余白を作る方法
⇓下記のタグをそのままコピーして貼り付けると⇓
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 10px;">ここに文字を書く</div>
ここに文字を書く
⇑このようになります。
【～解説～】
●padding: 10px 5px 10px 10px←この部分が余白を表します。
設定の数字は、順番に上、右、下、左の余白のこと。
この数字を変えれば余白の大きさを変えられます。
②枠内の文字色を変える方法
⇓下記のタグをそのままコピーして貼り付けると⇓
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 10px; border-color: red; color: green;">ここに文字を書く</div>
ここに文字を書く
⇑このようになります。
【～解説～】
●color: green←この部分が文字の色を設定するところです。
green=文字の色が緑色になっています。
●色は、green（緑）orange（オレンジ） blown（茶） blue（青） pink（ピンク）
などを入力する方法の他に、カラーコードを入力する方法があります。
●カラーコードについては、「HTMLカラーコード」で検索してお好みの
カラーコードを見つけてください。
③枠内の背景色を変える方法
⇓下記のタグをそのままコピーして貼り付けると⇓
<div style="border-style: solid ; border-width: 1px; padding: 10px 5px 10px 10px; border-color: blue; color: red; background-color: pink;">ここに文字を書く</div>
ここに文字を書く
⇑このようになります。
【～解説～】
●background-color: pink←背景の色はピンクということを表します。
●色は、green（緑）orange（オレンジ） blown（茶） blue（青） pink（ピンク）
などを入力する方法の他に、カラーコードを入力する方法があります。
●カラーコードについては、「HTMLカラーコード」で検索してお好みの
カラーコードを見つけてください。
それでは、今日もサービスしちゃお～
ですが、HTMLって何なのよぉ～
通常表示のまま下記をコピーしてお使いください
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
それでもよくわからない～じっくり教えてほしい～という方は、
パソコンが超絶苦手な方にも、わかりやすくて楽しい
とご好評を頂いている
「０から始めるブログ・Facebook個人レッスン」がおすすめです
▼メニュー＆料金▼
事務管理／ブログ・FBサポート／スクール／癒しサロンMENU
★メルマガ登録はお気軽にどうぞ★
ブログ・Facebookお役立ち情報・新月・満月情報・各種キャンペーン・お得情報など。
something fun 西村ゆかり news letterの購読申し込みはこちら
申込・お問い合わせは
somethingfun@outlook.jpまたはメニューバーのお問い合わせフォームよりどうぞ
※４８時間以内に返信いたします。
something funキャンセルポリシー ご予約の３日前より５０%、前日当日は１００%のキャンセル料金を
ご負担頂きます。お申込み頂いた時点で、同意頂いたものとさせて頂きます。
ホームページはこちらから
↓