研Q84.HTMLで描く色つきのアンダーラインを上下左右自由自在に設定する方法。 - ネットビジネス研Q室(新館)

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

研Q84.HTMLで描く色つきのアンダーラインを上下左右自由自在に設定する方法。

たかがデザインのことですが、ビジネスブログでは目標達成に近づく道です。

Styleful / artful highlighter pens drawing on paper / COPICS / sharpie - 無料写真検索fotoq
 photo by photosteve101


色つきのアンダーラインとはこの記事のサブタイトルの装飾に使っているオレンジの文字に青いアンダーラインが引いてある装飾のことです。

ブログ本文にアンダーラインを引く方法はいろいろありますが、この記事ではサブタイトルの装飾で使った方法をもう少し詳しく研Qしたいと思います。

この方法は過去記事に書いた
研Q5.文章を枠で囲む方法(HTML<div>タグのstyle属性で色、太さ、線種など自由自在に)

の応用編です。

文章を<DIV>タグでブロック化して、ブロックの枠線を上下左右別々に色と太さを指定してあるだけのことです。


アンダーラインを設定する方法。

この見出しにもサブタイトルと似たようなアンダーラインを使ってあります。

見出しのHTMLタグは

<div style="border-left:8px solid darkorange; border-bottom:2px solid darkorange; padding:0px 0px 1px 5px;">アンダーラインを設定する方法。</div>

です。

style=パラメータで枠線の指定をしているわけですが、

border-left:で左の枠線を太さ8pxの実線、色はダークオレンジ

border-bottom:で下の枠線を太さ2pxの実線、色はダークオレンジに設定してあります。

ついでに、ここでは設定してありませんが、
border-top:で上の枠線を、
border-right:で右の枠線を指定することもできます。


カッコイイ枠線の使い方の例。

普段ブログを拝見していて、たっくんがデザインされた枠線がカッコイイと思います。

たっくんのカッコイイデザイン枠

上と左、下と右の枠線の色を同系色で別な色にして、立体感を出しています。

そしてその色がブログ全体のデザインとマッチする色になっています。

さらに角丸と影(ドロップシャドー)をつけてカッコよくしてあるのですが、
IE8では角丸と影は見えないはずです。

CSS3/HTML5に対応しているIE9FirefoxGoogle Chromeなどで見ると
角丸と影が反映されて見えます。


上にリンクしてあるのは、たっくんの過去記事で、
最新記事では別なシンプルなデザインをお使いになっているようです。


過去記事と最新記事でデザインが変わっているので、これはCSSで一律に設定してあるデザインではなくて、記事内にHTMLタグを記入して表現してあるデザインです。


こういうカッコいいデザインはマネさせていただいてもいいですよね。たっくん。

無断でマネしては悪いと思う場合は、記事のコメントに
「カッコイイからマネさせてください。」と書き込んで了解を得ればいいだけのことだと思います。


ただカッコイイだけとお思いになる方もいらっしゃるかもしれませんが、
カッコイイデザインで読者さんが読みやすくなれば、それだけ内容も伝わりやすくなります。

内容が伝われば、ビジネスブログではその分だけ目的達成に近づくはずです。





 クリエイティブ・コモンズ 表示 - 継承 2.1
表示 - 継承 2.1

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
Subscribe with livedoor Reader My Yahoo!に追加 

ツイッター でも、更新案内を流しています。                          

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

わーい

こんにちは。
ご紹介ありがとうございます。
ブラウザによって見え方が違ってしまうのは残念ですが、
こういうのもカッコイイですね。
こちらも、久々に紹介記事書きましたのでよろしくお願いします。

2013-05-20 16:28 | from たっくん | Edit

>たっくん

Re:わーい

>たっくん、こんにちは。

あの枠囲いを拝見したときは衝撃的でした。

やり方だけをご紹介しても具体的なサンプルがないと・・・

勝手にサンプルにさせていただきました。

ありがとうございます。

2013-05-20 23:18 | from 水村亜里 | Edit

こんばんは。

「翻訳」時代からたっくん(さん)とは交流があります。
実は「Ameblo」時代のAMinamuraさんとも。。。
このHTML、マネさせてください。
 Fieldset と見え方どう違うのかやってみたいです。

2013-05-21 20:25 | from Kazart

>Kazartさん

Re:こんばんは。

>Kazartさん、こんばんは。

HTMLタグは著作物ではないので勝手に使ってもかまわないと思っていますから、ご自由にマネなさってください。

角丸やドロップシャドーをつけるのでしたら、わざめーばさんが便利なツールを作ってくださっています。
⇒ 記事内の目立たせたい部分に囲み枠をつける
http://ameblo.jp/wazameba/entry-11225921948.html

2013-05-22 01:14 | from 水村亜里 | Edit

バナーを使わせていただきます

こんにちは^^

本日ブログでつながり隊のバナーをつかわせていただきました。


かわいいバナーをありがとうございます。

2013-08-06 23:40 | from 花梨と申します

>花梨さん

Re:バナーを使わせていただきます
花梨さん、こんにちは。

バナーを掲載していただいて、
しかも記事にリンクまでしていただいて
ありがとうございます。

えと、このバナーにはちょっと秘密があります。
文字の裏側の影がどうなっているかお気づきだったでしょうか。

2013-08-07 08:51 | from 水村亜里 | Edit

トラックバック

http://aminamura.blog.fc2.com/tb.php/84-1a49c914

SWEET LINE/スイートライン/無料相談受付中・悪質出会い系,出会い系サクラ詐欺,詐欺被害,返金相談

??SWEET LINE/スイートライン??【URL】http://sweetline.jp/??【ポイント制】??運営事業者:株式会社ANDELL CREATION??所在地:〒810-0022福岡市中央区薬院4-1-7ジェスト薬院ビル204??運営責任者:坂井 学??TEL

2013-08-19 17:34 | from SWEET LINE/スイートライン/無料相談受付中・悪質出会い系,出会い系サクラ詐欺,詐欺被害,返金相談

お台場BBS | 消費者詐欺被害センター

消費者詐欺被害センターは『お金を騙し取られた』などの悪質な詐欺被害情報を検索、投稿出来る口コミサイトです。『おかしいな?』と思ったらまずは検索を!

2013-07-19 01:27 | from お台場BBS | 消費者詐欺被害センター

研Q84.HTMLで描く色つきのアンダーラインを上下左右自由自在に設定する方法。

たかがデザインのことですが、ビジネスブログでは目標達成に近づく道です。&#xA0;photo by photosteve101色つきのアンダーラインとはこの記事のサブタイトルの装飾に使っているオレンジの文

2013-05-20 00:19 | from あんなこと、そんなこと、どうでもいいこと・・・

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。