よくある質問

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

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

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

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

プロフェッショナルアフィリエイトって知ってます?評判を調べた!

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

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

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

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

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

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

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

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

メルマガ読者の方から、

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

と質問を頂きました。

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

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

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

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

CSSボタンのデザイン一覧

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

緑ボタン

赤ボタン

青ボタン

 

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

CSSボタンのコードは?

緑ボタン

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

HTMLは下記です。

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

 

赤ボタン

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

HTMLは下記です。

 

青ボタン

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

HTMLは下記です。

 

ピンクボタン

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

HTMLは下記です。

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

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

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;」の下に下記を追記してください。

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

https://www.colordic.org/

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

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

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

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

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

木村

 

 

プロフェッショナルアフィリエイトって知ってます?評判を調べた!

WordPressの無料テーマを紹介!おすすめする理由は?

関連記事

  1. 無料オファー アフィリエイト 無料オファーをアフィリエイトする?自分の評価を落とさないように!…
  2. メルマガ 開封率 メルマガの開封率が高い配信時間は?なんと信じられない結果が!
  3. 情報商材のレビューに削除依頼が来た!慌てず対処してほしい!?
  4. SSL化 SSL化の方法は?エックスサーバーのケースを解説!
  5. 魔法のランプ お金を稼ぐのは大変?楽して稼ぎたい人が多いけど…
  6. ブログ 記事 ブログ記事の書き方は?検索されないと意味がないでしょ!
  7. 稼ぐ方法は?副業を始める主婦に伝えたいことは・・・!?
  8. WordPress リンク WordPressのリンクを別タブで開く!方法と効果を解説!?
PAGE TOP