BiND for weblifeで文章の大きさ・色・背景を変える:BiND for weblifeの応用

印刷用表示 |テキストサイズ 小 |中 |大 |

BiND for Weblifeというホームページ作成ソフトの使い方をまとめたサイト(覚書)である。 初心者の方でもSEOに配慮した、デザイン性に優れたウェブサイトの作成ができるソフトの使い方を紹介

| HOME | BiND for Weblife応用編 | 文章の大きさ・色・背景を変える |

文章の大きさ・色・背景を変える

こちらは、BiNDタグ辞典を元に作成しました。

HTMLタグ機能もありますが、これは1行ずつ設定する必要があるし、一行のうち、一部分だけ使いたい時には活用できないようです。
BiND for weblife のブロックエディタを起動します。
タグこのHTMLタグ機能は使わない管理者


なのでカスタムタグを活用

カスタムタグを活用して、文章内にスタイルシートを各々活用して文字の大きさを変えれるようになっているのです。

スタイルシートについては、こちらを参考にどうぞ




文字を太字にする

<strong>文字を太字にする</strong>

文字色を赤くする

<span style="color: #FF2D00;">文字色を赤くする</span>

文字色を青くする

<span style="color: #6F8AF5;">文字色を青くする</span>

文字色を緑にする

<span style="color: #67C54B;">文字色を緑にする</span>

文字色を黄にする

<span style="color: #E7F53D;">文字色を黄にする</span>

文字色を白にする

<span style="color: #FFFFFF;">文字色を白にする</span>

文字の背景に色を付ける

<span style="padding: 2px 2px 2px 2px; background-color: #6F8AF5;">文字の背景に色を付ける</span>

文字に枠を付ける

<span style="border: 1px #B4B4B4 solid; padding: 2px 2px 2px 2px; ">文字に枠を付ける</span>

文字を大きくする

<span style="font-size:15pt;">文字を大きくする</span>


組み合わせ編

文字を太字にして赤字にする

<span style="color: #FF2D00;"><strong>文字を太字にして赤字にする</strong></span>

文字を大きくして青色にする

<span style="font-size:15pt;color:#6F8AF5;">文字を大きくして青色にする</span>

背景を赤にして文字を白字にする

<span style="padding: 2px 2px 2px 2px; background-color: #FF2D00;color:#FFFFFF;">背景を赤にして文字を白字にする</span>

背景を青にして文字を白字にする

<span style="padding: 2px 2px 2px 2px; background-color: #6F8AF5;color:#FFFFFF;">背景を青にして文字を白字にする</span>

背景を緑にして文字を白字にする

<span style="padding: 2px 2px 2px 2px; background-color: #67C54B;color:#FFFFFF;">背景を緑にして文字を白字にする</span>

背景をオレンジにして文字を白字にする

<span style="padding: 2px 2px 2px 2px; background-color: #FFB443;color:#FFFFFF;">背景をオレンジにして文字を白字にする</span>

背景をグレーにして文字を白字にする

<span style="padding: 2px 2px 2px 2px; background-color: #606060;color:#FFFFFF;">背景をグレーにして文字を白字にする</span>

応用編(オマケ)

点線で囲む

<span style="border: 1px #6a6a6a dashed; padding: 5px 15px 5px 15px;">点線で囲む</span>

タイトル風にする

<span style="font-size:12pt;color: #6F8AF5; border-top: 3px #6F8AF5 double; border-right: none; border-bottom: 3px #6F8AF5 double; border-left: none; padding: 5px 200px 5px 5px;">タイトル風にする</span>

ボタン風にする

<a href="http://ここにURLを記述" target="_blank"><span style="color: #FFFFFF; border: 1px #6a6a6a solid; padding: 5px 15px 5px 15px; background-color: #88beba;">ボタン風にする</span></a>



BiND for Weblife 2 - Google ブログ検索
セレンディピティな林檎生活 BiND for WebLiFE 2 Macintosh 解説DVD ...
BiND for WebLiFE 2」が付いたスペシャルパッケージ。解説DVDでは、 78分のビデオでサイト作成からアップロードまで解説する。 BiND for WebLiFE 2はデザインとクオリティにこだわったウェブ制作ソフトです。 おまかせ機能のテンプレートを従来に比べて5 ...



ホームページ作成ソフト「BiND for WebLiFE 2」テスト中 - パソコン ...
BiND for WebLiFE 2(公式サイト) http://www.digitalstage.jp/bind/ 「自社製品のファンを作りたい!」という思いが込められてるらしく、実際に商品が届いてみると、その凝りに凝ったパッケージングに驚愕。(やりすぎでしょ!?) ...


誰でもホームページが作れちゃう「BiND for WebLiFE 2」を追加しました ...
図:BiND for WebLiFE 2. ホームページを自分で作りたい。でも、Dreamweaverやテキストエディタはちょっと敷居が高くて・・そんな方は、是非「BiND」をおためしください。 写真や音楽、文章などの素材を自由に組み合わせるだけで、完成度の高い ...


Googleサービスと連携できる「BiND for WebLiFE* 2」のアップデータを ...
デジタルステージは、同社のWeb作成ソフト「BiND for WebLiFE* 2」の最新アップデータ「BiND for WebLiFE* 2.5」を4月15日より配布する。BiND2ユーザーは無償でアップデート可能となる。また「BiND for WebLiFE* 2.5」の配布に合わせ、最新 ...


BiND for WebLiFE*2 の感想|iPhoneもって出かけよう!
うすあじのiPhoneもって出かけよう!の記事、BiND for WebLiFE*2 の感想です。



ブックマークに追加する
▲ ページトップへ

ランキング: SEO対策:BIND

  • 参考になったら応援お願いします。

ブックマークに追加する

 


"

Yahooカテゴリ登録サイトです(2008/7/3)

簡単相互リンク

BiND for weblifeで制作したのをメインに検索する
マイサーチ