CSSでボタン作成!デザインは即実践で使えるタイプのみ!

今回もGoogleさん、やってくれましたね。

サイトアフィリをやっているアフィリエイターは、大打撃を受けたかもしれません。

先日、私が紹介したプロフェッショナルアフィリエイトの作者も、例外ではないでしょう。

プロフェッショナルアフィリエイトの作者が運営するサイトも、1ページ目から姿を消しているからです。

代わりに1ページ目に表示されているのは、1部上場企業のサイト。

時間が経てば戻る可能性もありますが。

現状のGoogleの検索結果では、知りたい情報を入手できないのでは。

検索上位のサイトは、大手の当たり障りのない情報ばかりだからです。

「利用者が知りたい情報を提供する」

というGoogleの目的は、何処へ行ったのでしょう。

さて今回はプロフェッショナルアフィリエイトの作者のサイトで、使かわれているボタンについてです。

メルマガ読者の方から、

「同じボタンを使えますか?」

と質問を頂きました。

なので出来るだけ再現してみます。

▼本気でブログで稼ぐなら▼gaityu300.png

CSSで実践的なデザインのボタンを作成

私が見た限りでは、CSSで作成したボタンだと思います。

難しい説明は省きますが、実際に実践で使えるように解説しましょう。

CSSボタンのデザイン一覧

では実際に先に紹介したサイトで、使っていたボタンを並べてみます。

緑ボタン

赤ボタン

青ボタン

 

ピンクボタンに関しては本来黄土色だったのですが、色が微妙なのでピンクにしました。

CSSボタンのコードは?

緑ボタン

上記のCSSコードは下記になります。

HTMLは下記です。

下記の「#」の箇所に、URLを挿入してください。

 

赤ボタン

CSSコードは下記になります。

HTMLは下記です。

 

青ボタン

CSSコードは下記になります。

HTMLは下記です。

 

ピンクボタン

CSSコードは下記になります。

HTMLは下記です。

スマホで見ると、緑・赤・青ボタンの幅は同じになります。

またテキストが長いと、スマホでは改行されて表示されるので、確認してみてください。

▼本気でブログで稼ぐなら▼gaityu300.png

CSSボタンを実際に使う方法を解説

CSSボタンを実際に使うには、プラグインを使うと簡単です。

  • Simple Custom CSS and JS
  • AddQuicktag

上記2つのプラグインをインストールして、有効化します。

Simple Custom CSS and JS

Simple Custom CSS and JS

すると上図のように、WordPressのダッシュボードに「Custom CSS & JS」という項目が増えるはずです。

「Custom CSS & JS」をクリック。

Add Custom CSS

「Add Custom CSS」をクリックします。

CSSコードを追加

赤枠内には、覚えやすいタイトルを入力。

私は「緑ボタン」などと入力しています。

次に青枠内を削除して、先に紹介したCSSコードを貼り付けましょう。

問題なければ、「公開」ボタンをクリック。

AddQuicktag

「AddQuicktag」は特に使わなくても、先のHTMLのコードを貼り付ければCSSボタンは使えます。

ですがボタンを頻繁に使う場合は、「AddQuicktag」を使用したほうが便利です。

Add QuickTag

ダッシュボードの設定から「AddQuicktag」を選択。

HTMLを追加

上図はクリックすると、拡大できます。

まず①にボタン名を入力。

私は「緑ボタン」と入力しました。

②には先に紹介したHTMLコード。

右端の③にチェックを入れると、全てにチェックが入ります。

あとは「変更を保存」ボタンをクリック。

すると記事作成画面に、「Quicktags」が表示されます。

緑ボタン

使う際は自分が使いたいボタンを、選択するだけです。

難しく考えず、記事の手順通りに進めてみましょう。

簡単にCSSボタンが、作成できると思いますよ。

もしピンクボタンも中央寄せしたい場合は、「width:200px;」の下に下記を追記してください。

ボタンの色を変えたい場合は、下記サイトを利用するといいでしょう。

今回紹介した方法では、ブログデザインが崩れることはありません。

失敗したら、やり直せばいいだけです。

是非、チャレンジしてみてくださいね。

本日も最後までお付き合い頂き、ありがとうございます。

この記事に関する相談や質問は、コチラからどうぞ

木村

 

 

メルマガ登録