文字の下に点線を入れる - 稼げない初心者アフィリエイト救済 ASAP塾

アフィリエイト川柳にご投票いただきありがとうございました。
近日結果をブログにUPいたします。

 

カエテンクロスレビュー&特典ページはバナーをクリック↓


カエテンクロスSEOテンプレート あずレビュー&特典

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

文字の下に点線を入れる

こんな感じで文字の下にのみ点線を入れる方法です。
ノートみたく文字が無いところにも点線を入れるのとは違います。

文字した点線は色も自由に設定できます。


スタイルシートで文字下の点線を設定する


スタイルシートに
.line{border-bottom: dotted 1px #C1C1C1;}

を追加します。
色は#C1C1C1の部分を変更してください。
複数設定も出来ます。赤のラインも欲しければ
.liner{border-bottom: dotted 1px #A0002E;}

linerと名前を変え、#A0002Eなど色を設定します。

記事などHTML部分で点線を入れたいところを
<span class="line"></span>

で囲みます。



文の前後をくくると点線が下に付きます。
一部分だけなら点線をつけたいところのみくくります。
他の色も設定しておくと使い分けできます。

ソース(当ブログは自動改行・自動じゃない場合は改行に<br />を。)
<span class="line">文の前後をくくると点線が下に付きます。</span>
一部分だけなら<span class="line">点線をつけたいところのみ</span>くくります。
<span class="liner">他の色も設定しておくと使い分けできます。</span>



ノートみたい点線にチャレンジ


画像を作ってノートみたく線をひくのに挑戦しました。

↓赤い点の画像、見えます?これを背景に指定してみました。
doted.png


firefoxでノートみたくすることができました。
↓キャプチャ画像
FIREFOX2

結局ほかのブラウザでうまくできなかったので割愛します。
結構時間使ってしまった∑(-∀-ノ)ノ



記事がお役に立てましたら1票お願いします。励みになります!
  •  人気ブログランキング   FC2ブログランキング 

  • #HANDLE#、いつもありがとうございます!!(o´∀`o)ノ<おきてがみ] 足あとを残せます。後ほど訪問させていただきます☆…おきてがみ
  • 質問・感想・相談、メールはお気軽に(o´∀`o)ノ

    あずへのメールはこちらからどうぞ


    ←クリックでメールフォームへ
    わからない。。つまづいて前に進めない。。

    そんな時は困った時のあず頼み!
    遠慮無くメールくださいね。

    この記事を見た人はこんな記事も読んでいます

    カテゴリ別になっています。興味のあるタブをクリックしてください。

    Loading...

    コメント
    非公開コメント

    ⇒人気ブログランキング ⇒FC2ブログランキング


    いつも訪問いただきありがとうございます!!(o´∀`o)ノ

    ↓お寄せいただいたコメント

    No title

    あずさん

    こんにちは!ぽちです。

    文房具っぽいイメージが好きなので、
    この点線はそそられます~!!

    使いたい時は参考にさせてくださいね(*^_^*)


    ぽちっと応援・・・*

    2011-07-15 10:11 | from ぽち*アフィリエイトのもやもやがスッキリ!

    No title

    あずさん、こんにちは。

    いつもありがとうございます。

    あずさんの、スタイルシート講座。
    本当に解り易いですね。

    今度デザイン変更するときは、
    絶対に使いたいです!!

    応援です。



    2011-07-15 14:43 | from ちえぞう

    No title

    あずさん

    お久しぶりです。
    RENSUKEです。

    相変わらずの貴重な記事に
    釘付けになってしまいました^^;


    こういうことって自分では
    調べたり、やってみたりしない
    ですからね。

    あっ!やってみよう的な感じが
    入り込みやすいです。

    早速、やってみようという気になって
    いるRENSUKEでした^^


    では、応援です。

    2011-07-21 03:10 | from RENSUKE

    No title

    こんにちは高山です

    最近はファイヤーフォックスを使っていない
    のでわかりませんでしたが、こういう使い方もできる
    るんですね。まだまだ勉強不足です

    応援します

    2011-07-21 13:42 | from 高山直人のスローライフアフィリエイト実践日記

    Re: No title

    > ぽちさん
    こんばんは!

    > 文房具っぽいイメージが好きなので、
    > この点線はそそられます~!!
    わかります~点線にそそられるくちです♪
    デジタルでアナログを表現したくなるってのもありますね。

    > 使いたい時は参考にさせてくださいね(*^_^*)
    ぜひやってみてください☆

    2011-07-21 23:35 | from ASAP塾/あず | Edit7RorUgFk

    Re: No title

    > ちえぞうさん
    こんばんは!

    > あずさんの、スタイルシート講座。
    > 本当に解り易いですね。
    ほんとですか!?
    説明ベタなんで記事書くのに時間かかってます~

    > 今度デザイン変更するときは、
    > 絶対に使いたいです!!
    ぜひ取り入れてみてくださいね ●´∀`

    2011-07-21 23:37 | from ASAP塾/あず | Edit7RorUgFk

    Re: No title

    > RENSUKEさん
    こんばんは!

    > こういうことって自分では
    > 調べたり、やってみたりしない
    > ですからね。
    > あっ!やってみよう的な感じが
    > 入り込みやすいです。
    おお!
    やってみようかな~って思える記事になってましたか☆
    これからもそれを目指して書こうと思いました!

    ほんとはノートみたいのも書きたかったけど
    ブラウザ対策までやると。。たぶんやってみようって気にならないと思いました。

    2011-07-21 23:41 | from ASAP塾/あず | Edit7RorUgFk

    Re: No title

    > 高山さん
    こんばんは!

    > 最近はファイヤーフォックスを使っていない
    > のでわかりませんでしたが、こういう使い方もできる
    > るんですね。まだまだ勉強不足です
    あ、文字下にのみ点線を付けるのは
    どのブラウザでも大丈夫です☆
    ノートみたくするのはブラウザによって見え方がかわるので
    面倒なようです。

    2011-07-21 23:43 | from ASAP塾/あず | Edit7RorUgFk

    トラックバック

    http://xxxasapxxx.blog134.fc2.com/tb.php/280-4ca6d226