「商品リンクの横に文章を書くにはどうしたらよいですか？」というご質問を頂きました。
そこで、HTMLを使って画像の横に文章を入れる方法をいくつかご紹介します＾＾
続きを読む
今回はリンクを貼る文字に工夫するＣＳＳのご紹介です。
ブログの場合、既存のテンプレートですでに用意された物を
使用していらっしゃる方も多いと思います。
すでにあるＣＳＳの場合、たいていはリンク文字の色が、
記事の文字と違うという程度になっているかと思います。
このままでも構わないのですが、少し手間を加えるだけで
クリック率が多少アップします。
このサイトはリンクの文字下にアンダーライン、
マウス（カーソル）を合わせると、リンク文字の色が
変化するような設定をしてあります。
↓カーソルを合わせてみて下さい
日々お勉強中。
■まずは、リンクの下にアンダーラインを入れる方法です。
これを入れる事により、「リンク文字」という事を
訪問した方がぱっと見ただけで分かるようになります。
A:link{text-decoration: underline; }と入れると
リンク文字の下にアンダーラインが出るようになります。
また、A:linkの後に
{border-bottom: 1px dotted #ここには文字色を入れる; }と入れるとアンダーラインが点線で表示されるようになります。
■次に指定ごとにリンク文字の色を変える方法です。
これを変える事で、リンク文字をクリックする前、した後、
カーソルを合わせた時〜などそれぞれの色を指定する事が
出来るようになります。
A:link・・・クリックする前
A:visited・・・クリックした後
A:active・・・クリック中
A:hover・・・カーソルを合わせた時
↑それぞれこのような意味があります。
全て違う色に指定したい場合は、それぞれに色を指定します。
例えばこのサイトでは
A:link{color: #4682b4; }
A:visited{color: #4682b4; }
A:active{color: #4682b4; }
A:hover{color: #ff69b4; }
と、カーソルを合わせた時だけ色が変わる様にしてあります。
先ほどのラインと組み合わせるのであれば
A:link{text-decoration: underline; color: #ここにお好きな文字の色; }
という風にそれぞれ設定すればＯＫです＾＾
色々と試してクリック率が良くなるように設定してみるのも
良いと思います。
色コード参考サイト様→色々セレクト
↓ぽちっとお願いしますｍ（＿ ＿）ｍ
★人気ブログランキング
ブログの場合、既存のテンプレートですでに用意された物を
使用していらっしゃる方も多いと思います。
すでにあるＣＳＳの場合、たいていはリンク文字の色が、
記事の文字と違うという程度になっているかと思います。
このままでも構わないのですが、少し手間を加えるだけで
クリック率が多少アップします。
このサイトはリンクの文字下にアンダーライン、
マウス（カーソル）を合わせると、リンク文字の色が
変化するような設定をしてあります。
↓カーソルを合わせてみて下さい
日々お勉強中。
■まずは、リンクの下にアンダーラインを入れる方法です。
これを入れる事により、「リンク文字」という事を
訪問した方がぱっと見ただけで分かるようになります。
A:link{text-decoration: underline; }と入れると
リンク文字の下にアンダーラインが出るようになります。
また、A:linkの後に
{border-bottom: 1px dotted #ここには文字色を入れる; }と入れるとアンダーラインが点線で表示されるようになります。
■次に指定ごとにリンク文字の色を変える方法です。
これを変える事で、リンク文字をクリックする前、した後、
カーソルを合わせた時〜などそれぞれの色を指定する事が
出来るようになります。
A:link・・・クリックする前
A:visited・・・クリックした後
A:active・・・クリック中
A:hover・・・カーソルを合わせた時
↑それぞれこのような意味があります。
全て違う色に指定したい場合は、それぞれに色を指定します。
例えばこのサイトでは
A:link{color: #4682b4; }
A:visited{color: #4682b4; }
A:active{color: #4682b4; }
A:hover{color: #ff69b4; }
と、カーソルを合わせた時だけ色が変わる様にしてあります。
先ほどのラインと組み合わせるのであれば
A:link{text-decoration: underline; color: #ここにお好きな文字の色; }
という風にそれぞれ設定すればＯＫです＾＾
色々と試してクリック率が良くなるように設定してみるのも
良いと思います。
色コード参考サイト様→色々セレクト
↓ぽちっとお願いしますｍ（＿ ＿）ｍ
★人気ブログランキング
以前にも書きましたが、検索ロボットは
サイト名やサイトの説明文を特に拾って行きます。
これはブログの構成でサイト名、説明文が強調されているからです。
（ｈ１〜ｈ３タグなど）
そのためサイト名や説明文に、キーワード検索されそうな文字を
入れると良いとされています。
（実際そのキーワードで訪問して下さる方って多いです）
ここで重要なのは『強調されている』という所。
ロボットは強調されている文章のまわりを
特に拾っていく傾向があるようです。
＊ご注意＊
これから書く事はあくまで私の実験であり、
それが本当に有効であるのか、また適切なのかは
分かりませんのでご了承下さいｍ（＿ ＿）ｍ
サイトの中で強調されている所として挙げられるのが
『リンクが貼ってある文字、リンクが貼ってある画像』です。
なので、せっかくリンクを貼る時はその文字や画像に説明を入れてあげると
その説明もロボットが拾ってくれたりする場合もあるので有効かと思われます。
では説明文の入れ方です。
≪リンク画像の場合≫
↑マウスでカーソルを合わせてみて下さい。何の文字も出てきません。
画像の場合は画像URLにaltタグを追加します。
＜img src〜＞で始まる画像URLの中にalt="○○"を加えて下さい。
この○○の中に説明として入れたい文章を入力します。
↑マウスでカーソルを合わせてみて下さい。入力した説明文が出ます。
≪リンク文字の場合≫
日々お勉強中。
↑マウスでカーソルを合わせてみて下さい。何の文字も出てきません。
文字にリンクを貼る場合はtitleタグを追加します。
＜a〜＞で始まるリンク先URLの中にtitle="○○"を加えて下さい。
画像同様、○○の中に説明として入れたい文章を入れます。
日々お勉強中。
↑マウスでカーソルを合わせてみて下さい。入力した説明文が出ます。
＊ご注意２＊
説明文として入れる文章はあくまでリンク先に関係のある内容にしましょう。
あまりにも関係のない文章を入れると『検索スパム』と誤解され
ランクを大きく下げる、または検索にすらかからなくなってしまう
場合もあるかも知れません。
皆様の応援のお陰で、ブログランキングかなり良い位置にまだいます＾＾
ありがとうございます！ これからも頑張りますｍ（＿ ＿）ｍ
サイト名やサイトの説明文を特に拾って行きます。
これはブログの構成でサイト名、説明文が強調されているからです。
（ｈ１〜ｈ３タグなど）
そのためサイト名や説明文に、キーワード検索されそうな文字を
入れると良いとされています。
（実際そのキーワードで訪問して下さる方って多いです）
ここで重要なのは『強調されている』という所。
ロボットは強調されている文章のまわりを
特に拾っていく傾向があるようです。
＊ご注意＊
これから書く事はあくまで私の実験であり、
それが本当に有効であるのか、また適切なのかは
分かりませんのでご了承下さいｍ（＿ ＿）ｍ
サイトの中で強調されている所として挙げられるのが
『リンクが貼ってある文字、リンクが貼ってある画像』です。
なので、せっかくリンクを貼る時はその文字や画像に説明を入れてあげると
その説明もロボットが拾ってくれたりする場合もあるので有効かと思われます。
では説明文の入れ方です。
≪リンク画像の場合≫
↑マウスでカーソルを合わせてみて下さい。何の文字も出てきません。
画像の場合は画像URLにaltタグを追加します。
＜img src〜＞で始まる画像URLの中にalt="○○"を加えて下さい。
この○○の中に説明として入れたい文章を入力します。
↑マウスでカーソルを合わせてみて下さい。入力した説明文が出ます。
≪リンク文字の場合≫
日々お勉強中。
↑マウスでカーソルを合わせてみて下さい。何の文字も出てきません。
文字にリンクを貼る場合はtitleタグを追加します。
＜a〜＞で始まるリンク先URLの中にtitle="○○"を加えて下さい。
画像同様、○○の中に説明として入れたい文章を入れます。
日々お勉強中。
↑マウスでカーソルを合わせてみて下さい。入力した説明文が出ます。
＊ご注意２＊
説明文として入れる文章はあくまでリンク先に関係のある内容にしましょう。
あまりにも関係のない文章を入れると『検索スパム』と誤解され
ランクを大きく下げる、または検索にすらかからなくなってしまう
場合もあるかも知れません。
皆様の応援のお陰で、ブログランキングかなり良い位置にまだいます＾＾
ありがとうございます！ これからも頑張りますｍ（＿ ＿）ｍ
CSSというのはデザインを決めているスタイルシートの事を言います。
これをいじる事によって、自分だけのオリジナルなデザインにしたりも可能です。
（このサイトの元々用意されていたテンプレートはこれでした→サンプル）
今回は、文字に関するカスタマイズをご紹介します。
（ブログによって表記の仕方が違う場合もあるので、
ここでの説明にあわない場合もあります）
■文字の大きさを変える■
CSS編集画面を見るといくつも
FONT-SIZE: ○○px; というのが出てきます。
この○○の中の数字を変える事によって、文字の大きさが変わります。
例えば。。。
.blog_titleの所をいじればサイト名の大きさを。
（このサイトなら『日々お勉強中。』）
.blog_descriptionの所をいじればブログの説明の大きさを。
（ここならサイト名の下の『初心者による初心者のための〜』）
.entry_text（または .entry_body）の所をいじれば記事本文の大きさを。
.side_textの所をいじればサイドバーの文字の大きさを。
ちなみにこのサイトのサイドバーと本文の記事の文字の大きさは
１２ｐｘにしているので、○○に１２という数字が入っています。
■文字の色を変える■
COLOR: #○○○;
これもサイズ同様いくつも出てきます。
○○○の中の数字を変える事によって、文字の色を変える事が出来ます。
色コードを紹介して下さってるサイトさんがあるので
お好きな色を試してみてください。
→色々せれくと
■行間を指定する■
例えば、記事の行間を指定したいのなら
.entry_text（または .entry_body）の所に
line-height: ○○%; を追加します。
○○の中の数字はお好みで変えて下さい。
（ちなみにここのサイトの行間は１８０％に指定してます）
ブログ各社で用意されたテンプレートにもよるのですが、
既存のままだと、行間が狭すぎて記事など読みずらい場合があるので
これを変えた方が読みやすいです＾＾
皆様の応援のお陰で、ブログランキングかなり良い位置にまだいます＾＾
ありがとうございます！ これからも頑張りますｍ（＿ ＿）ｍ
これをいじる事によって、自分だけのオリジナルなデザインにしたりも可能です。
（このサイトの元々用意されていたテンプレートはこれでした→サンプル）
今回は、文字に関するカスタマイズをご紹介します。
（ブログによって表記の仕方が違う場合もあるので、
ここでの説明にあわない場合もあります）
■文字の大きさを変える■
CSS編集画面を見るといくつも
FONT-SIZE: ○○px; というのが出てきます。
この○○の中の数字を変える事によって、文字の大きさが変わります。
例えば。。。
.blog_titleの所をいじればサイト名の大きさを。
（このサイトなら『日々お勉強中。』）
.blog_descriptionの所をいじればブログの説明の大きさを。
（ここならサイト名の下の『初心者による初心者のための〜』）
.entry_text（または .entry_body）の所をいじれば記事本文の大きさを。
.side_textの所をいじればサイドバーの文字の大きさを。
ちなみにこのサイトのサイドバーと本文の記事の文字の大きさは
１２ｐｘにしているので、○○に１２という数字が入っています。
■文字の色を変える■
COLOR: #○○○;
これもサイズ同様いくつも出てきます。
○○○の中の数字を変える事によって、文字の色を変える事が出来ます。
色コードを紹介して下さってるサイトさんがあるので
お好きな色を試してみてください。
→色々せれくと
■行間を指定する■
例えば、記事の行間を指定したいのなら
.entry_text（または .entry_body）の所に
line-height: ○○%; を追加します。
○○の中の数字はお好みで変えて下さい。
（ちなみにここのサイトの行間は１８０％に指定してます）
ブログ各社で用意されたテンプレートにもよるのですが、
既存のままだと、行間が狭すぎて記事など読みずらい場合があるので
これを変えた方が読みやすいです＾＾
皆様の応援のお陰で、ブログランキングかなり良い位置にまだいます＾＾
ありがとうございます！ これからも頑張りますｍ（＿ ＿）ｍ
