カエレバ・ヨメレバCSSジェネレーターで物販リンクにオリジナリティを。

カエレバ・ヨメレバCSSジェネレーターで物販リンクにオリジナリティを。 WordPress
スポンサーリンク

ジェネレータ 【 generator 】

ITの分野では、与えられた条件などに基づいてデータやプログラムコードを自動的に生成するプログラムなどを指すことが多い。

 

色々なサイトを見ていると、カエレバ・ヨメレバのデザインがオリジナルになっているものを発見することがよくあります。

 

カエレバ・ヨメレバは、CSSでデザインをカスタマイズすることができます。
Amazon楽天市場のボタンがカラフルになっていたり、枠線が付いているレイアウトは、カエレバ・ヨメレバで出力されたHTMLに対してCSSでカスタマイズを加えています。

 

カスタマイズをすることで、アフィリエイトサイトの中で紹介している商品に注目してもらうことが出来る可能性が高くなります。

 

そのようにすることで、売上げに繋がる可能性が高くなる可能性があります。
色使いやデザインのほんの一手間は大切です。

 

CSSでカスタマイズ

さて、CSSでカスタマイズをする際、当然ながらCSSの知識が必要になります。
しかしCSSに明るくない人は苦戦してしまうかもしれません。

 

効率的にアフィリエイトをするために、CSSはアフィリエイトサイトを作りながら勉強しましょう。

 

そして、カエレバ・ヨメレバのデザインにオリジナリティを持たせるために、「カエレバ・ヨメレバCSSジェネレーター」を使わせてもらいましょう。

 

カエレバ・ヨメレバCSSジェネレーター

 

カエレバ・ヨメレバCSSジェネレーターは、つばさのーとさんが作成・公開をしてくださっています。

 

カエレバ・ヨメレバCSSジェネレーター
カエレバ・ヨメレバのCSSデザインをカスタマイズするジェネレーターを作成しました。よければ試してみてください。

 

私も有難く使わせていただいています。

 

カエレバ・ヨメレバCSSジェネレーターの使い方

使い方は非常に簡単です。
直感的に、【対象端末】・【枠線】・【商品名】・【詳細】・【ボタンの種類】・【ボタンの装飾】を選択して、【プレビュー】で確認です。

 

CSSに詳しくない方が「?」になってしまうのは【対象端末】でどれを選べば良いか?でしょう。

 

これは「レスポンシブ」を選ぶのが無難です。

 

レスポンシブ

ユーザーのデバイス(パソコン、タブレット、モバイル、非視覚的ブラウザ)に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて(つまり「レスポンシブ」に)表示を変えることができます。

(※Googleより)

 

同じサイトをPCから見るのとスマートフォンから見るのとではデザインが違う!という経験、ほとんどの方があると思います。

 

これがレスポンシブです。

 

【対象端末】レスポンシブを選んでおけば問題ないでしょう。

 

ブレイクポイント

レスポンシブを選ぶと【枠線】の中にブレイクポイントという項目が出てきます。

 

画面の横幅に関して、CSSでデザインを切り替えます。

その切り替え地点、つまり「何px以上(もしくは何px以下)なら、このCSSを適用する」という基準になるところをブレイクポイントと言います。

 

私の場合は、800pxにしています。
理由は、「スマートフォン+タブレット」/「PC」の2つのデザインを作るためです。

 

CSSを貼付け

必要な項目の選択が終わってプレビューで満足がいくものになったら、画面の右側にあるカスタムCSSを貼り付けます。

 

貼り付ける場所は、WordPressであれば、ダッシュボードの右側メニューにある「外観」「テーマの編集」スタイルシート (style.css)です。

 

完成っ!

 



最近人気の、バルミューダのサーキュレーターのカエレバを作ってみました。

 

囲み線の色やデザイン、楽天市場・Amazon・Yahooショッピングのボタンの色を変えることも出来ます。

 

HTMLCSSは勉強すると夢中になります☆
分かりやすい本もたくさん販売されていますよ。

 


アフィリエイトサイトを作りながらHTMLとCSSの勉強!
有意義な時間の使い方ですね☆

コメント

タイトルとURLをコピーしました