目次
1.工夫次第でいろいろなリンク
E002テンプレートの3つのボックスは工夫次第でいろいろなものを記述できます ( ´∀｀)
「オプション設定」にある、3つのボックスの各テキスト入力欄はHTMLコードが入力できるので、
wordpressのデフォルトにある、「テキスト」というウィジェットと同じような感覚で使用できます。
下の画像のように、CSSで作られたボタンを配置したり、テキストリンクを入れ込んだりお好きなものを挿入することが可能です。
2.CSSボタンを表示させよう
上記の画像にある、左のボックスには「詳しくはこちら」と書かれた黄色のボタンが配置されています。
これは黄色のボタン用のCSSを新しく追加して、左のボックス用のテキスト入力欄にHTMLコードを入力しています。
追加したCSSは以下です。テンプレートのフォルダに入っている「style.css」に追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
.myButton { -moz-box-shadow: 0px 1px 0px 0px #fff6af; -webkit-box-shadow: 0px 1px 0px 0px #fff6af; box-shadow: 0px 1px 0px 0px #fff6af; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23)); background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%); background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0); background-color:#ffec64; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #ffaa22; display:inline-block; cursor:pointer; color:#333333; font-size:13px; font-weight:bold; padding:2px; text-decoration:none; text-shadow:0px 1px 0px #ffee66; margin-top:5px; width:90%; } .myButton:link { color:#923600;text-decoration: none;} .myButton:visited { color: #923600;;text-decoration: none;} .myButton:hover { color:#f54500;text-decoration: none;} .myButton:active { color: #923600;;text-decoration: none;} |
上記を追加したあとに、左ボックス専用のテキスト入力欄に以下を記述しました。
|
1 2 |
アフィリエイト専用テンプレート「エッジプラス1」は、初心者の方でも簡単にサイト作成ができることを目的として作りました。WP版ランキングタイプが2パターン。同じHTML版ランキングタイプが2パターン。何にでも使えるWP版ブログタイプ。<br> <div style="text-align:center"><a href="リンクアドレス" class="myButton">詳しくはこちら</a></div> |
上の画像の赤で囲ったテキスト欄に入力しています。
|
1 |
<a href="リンクアドレス" class="myButton">詳しくはこちら</a> |
↑ で記載した部分がボタンのタグになっています。
そのボタンのタグをdivで囲み、そのdivに「style=”text-align:center”」を追加してボタンが中央に配置されるようにしています。
ボタンのCSSが作れるサイトなどもあります。
CSSボタンジェネレーター → http://www.bestcssbuttongenerator.com/
このようなサイトでをCSSを構成して、できたCSSを追加するとオリジナルのボタンを表示させることができます。
上記の黄色のボタンもcssジェネレーターでcssを作り、それを一部追加や変更してボタンを作りました。
3.テキストリンクを貼ろう
一番上の方で記載したとおり、3つのボックスのテキスト入力欄はHTMLタグが使用できます。
↑ の真ん中のボックスと右のボックスは、テキスト入力欄にHTMLタグでテキストリンクが挿入されています。
リンクは下記のように、<a href= で始まるタグで構成されています。
|
1 |
<a href="リンクアドレス">リンクしたい文字や画像</a> |
リンクしたい文字を「<a href=」で始まるタグで挟むとリンクすることができます。
真ん中のボックスの入力欄に記述した内容は以下です。
|
1 |
全国の店舗などを対象としたHTML+CSVマップタイプの4種類をご用意しました。<a href="リンクアドレス">詳しくはこちら</a>でご覧下さい。サイト作成でネックになっていたヘッダー画像なども、プロがあらかじめ作成した雛形をご用意しましたので、すぐにでもサイト作成に取り掛かることができます。 |
右のボックスに入力したものは以下です。
|
1 2 |
エッジプラス1は、弊社の長年のアフィリエイト経験から導き出したコンバージョン（成果）優先設計になっているため、今日からアフィリエイトをはじめるぞ！という初心者の方でもサイト作成に専念することができます。<br><br> <div style="text-align:right"><a href="リンクアドレス">詳しくはこちら</a></div> |
「<a href=”リンクアドレス”>詳しくはこちら</a>」をdivで囲み、そのdivに「style=”text-align:right”」を追加して、
文字が右に配置されるようにしています。
PHPでindex.phpなどのテンプレートファイルにそのまま反映しているので、
間違ったコードを記述するとサイトのレイアウトが崩れてしまいます。
よくあることは<div>タグの閉め忘れなどです。
間違って記述してしまい、レイアウトが崩れた場合はテキスト入力欄の中の記述を修正してください。