アクセスUPの為に出来ること~画像の見せ方を工夫しましょうう!

この記事は約 9 分で読めます。  

243527

 

アフィリエイターならば、サイトへのアクセスアップ

必然の課題ですよね。

 

アクセスアップ無くして検索エンジンの上位表示

狙えるはずもなく、それゆえSEO対策のひとつ

ということもできるでしょう。

 

そして、アクセスアップを狙うためには

良い記事を書くという事は当然の事ですが

サイトを訪れた方が、

おっ!、なんかこのサイトは

他と違って良い感じだなぁ

 

と思ってもらう必要があります。

その為に、アイキャッチ画像などの画像を用いた

手法を用いて目立つようにしているわけですよね。

 

今回は、そのアイキャッチ等に使う画像の

見せ方についてのお話しです。

 

ちなみに、編集のモードは、

ビジュアル』ではなくて『テキスト』モード

ですのでお間違え無いように願います。

編集モード

 

画像の縁に枠を表示させる

 

例えば、ただ画像を貼り付けただけだと

もし、縁の近くが背景と同じような色の場合は

境界が解らなくなってしまい

画像が目立たなく可能性があります。

243527

そこで、画像と背景の境界線を描くことで

画像が浮き出てくるので、

あっ!ここに絵がある!と解りやすくなりますよね♪

 

通常、記事に画像を挿入すると、

<img src=”画像がある場所” alt=”表示文字列”

width=”幅” height=”高さ” />

といった文字が書き込まれます。

(もちろん『テキストモードでないと見られません!)

 

今回は、この最初の文字『”<img 』と『src=” 』の間に

各種コードを挿入することで

様々な表示の仕方が出来るようになるという内容です。

具体的には、

枠線の種類太さ、四隅の丸み具合大きさ(幅)

枠の内側の背景色、外側の

そして、タイトル(?)の設定が可能です。

 

さて、実際に記入してみましょう♪

 

<img style=”padding: 10px 10px 10px 10px; color: blue; background-color: #f0f0f0; width: 200px; border-radius: 10px; -webkit-box-shadow: 10px 10px 10px #000; border: 1px solid black;” src=”・・・・・・

 

こんな感じです。

太字の文字が各種設定用のコードです。

1つずつ説明していきます。

 

外枠の設定方法

 

まず、外枠の線ですが、種類太さをまとめて『border』で設定します。

つまり、『 border: 1px solid black ;』 とは、

線の太さが1px で、実線で、色がという命令文です。

 

では、具体的な内容を記しましょう。

まず、線の太さは、その数字を変えるだけですので

特に余計な説明は不要ですよね。

 

次に種類ですが

 

solid 1本の実線 

double 2本の実線 

dashed 破線 

dotted 点線 

 

など。

他の種類はあまり実用的ではないので割愛しました。

 

そして、色ですが、

英語表記でもいいし、6桁コードでもOKです。

ちなみに、色見本 というサイトで6桁(または3桁)の

色のサンプルを見る事ができるのでとおっても便利です(^^♪

 

枠の四隅に丸みを加える

そして、柔らかい雰囲気を出すために

枠の四隅を丸くするコードが、『 border-radius 』 です。

ちなみに、

『 border-radius: 5px; 』 だと

『 border-radius: 10px; 』 だと

こんな感じになります。

枠の幅を指定する

そして、大きさですが、通常は画像の大きさが決まっているので

アフィリエイターにはあまり必要性が無いと思いますが、

width: 200px; 』と記し、

その英語のとおり枠の幅を指定します。

width: 100px; 』 だと、

width: 400px; 』 だと、

このくらいの幅になります。

 

枠の内側の背景色を指定する

 

これは、画像の中に「透明」の部分がある場合のみ有効になります。

background-color』 というコードで

background-color: #f0f0f0;』 のように指定します。

色は、色見本 というサイトで調べてくださいね。

 

例えば『background-color: #fce44b;』 だと、

こんな感じ

background-color: #ccffff;』 だと、

こんな感じ

です。

 

画像に影を付ける(立体感を出す)

 

これが、一番効果的ではないかなぁと思うのですが、

画像の右と下に影を付けると、なかなか存在感ありありですよね(^^♪

 

影は、『 -webkit-box-shadow 』 で指定します。

書き方は、『-webkit-box-shadow: 10px 10px 10px #fff; 』

といった感じで、指定の種類は、左から順に

画像の右側への出幅、

画像の下側への出幅、

影をぼかす量、そして影のです。

例えば、『-webkit-box-shadow: 10px 10px 10px skyblue; 』で、

白

-webkit-box-shadow: 20px 20px 3px #000; 』だと、

白

となります。

 

画像にタイトルをつけてみる

 

画像の外枠を作り、

説明要素のタイトルをつける事も出来ます。

fieldset』と『legend』を使います。

 

具体的には、先頭に

 

<fieldset style=”border: 1px solid blue;”>

<legend style=”color: green;”>

初心者マーク(説明書き)</legend>

 

を付け加えて、末尾に

<fieldset>を付け加えると、下記の感じになります。

初心者マーク(説明書き)

243527

これも、アフィリエイターには

あまり使うことも無いかと思いますので、

簡略化しました(^^;

 

今回は、ここまでです♪

最後までお付き合いいただきありがとうございましたm(._.)m

 

 

Comment

  1. ヨシキ より:

    こんばんは!
    ヨシキと申します。

    塵も積もれば山となる。

    こういったちょっとしたことを
    積み重ねた結果、他に見ないブログが
    できると思います。

    また良いカスタマイズの方法など
    ありましたら教えてくださいね!

    応援していきます♪

  2. にちにち より:

    こんばんは^^
    こちらの記事、読んでいて感動です
    こうやって枠をつけたり
    色を指定したり
    順を追っての説明なので
    「そうなんだ!」って
    理解が深まったというか
    最近になって、色見本と
    色にコードがあると知りました
    記事にある方法、自分でもやってみます!
    いつも参考になる記事を
    ありがとうございます^^
    応援しております♪

コメント

メールアドレスが公開されることはありません。

title5

tema2


acces-up
tema1-2
tema3
tema4-2
tema5

プロフィール

はじめまして、オフィスFUJIと申します。 profile
現在50代でバス通勤の合間に
アフィリエイトを実践中の
サラリーマンであり、
頑張るイクメンパパでもあります
(現在は育児休業中でーす♪)
ここは、実践中の参考になる
情報配信基地として
整備していきますので
ご訪問よろしくお願いしますm(._.)m

メルマガ読者募集中!!

4SgsGsRzUFpoSPy1451660235_1451660535
アフィリエイトを始めるための手法
お役立ち商材など初心者のため
選りすぐり情報をお届けします
これからアフィリエイトを始めたい!
稼いで自由を手に入れたい!
という方のための、
得々情報満載メルマガです。
ブログを読んでみて
役に立ちそうだなぁ、ふむふむ
と興味を持たれた方は是非ご登録を

My 3D WP Tag Cloud

スポンサードリンク

▲トップへ戻る