はてなブログでストークのようなおしゃれボタンを作る方法


スポンサードリンク

どうも!Web制作をやっている櫻田です。

はてなブログをやっているみなさんブログのカスタムで困っていませんか?

アフィリエイトあるいは自分の商品をはてなブログで売りたい売りたいって人は目立つボタンが欲しいですよね。

ストークならボタン一つで様々なおしゃれボタンができてしまうんだけど、はてなブログだとHTMLとCSSを使わないとおしゃれボタンが作れません。

 

そこでWeb制作のプロであるぼくがストークのようなおしゃれなボタンを作る方法を伝授します。

今回は下のようなボタンを再現してみます。

 

はてなブログでもストークのようなおしゃれピンクボタンを作るならこれをコピーするだけ

1.デザイン>CSSでコードを入力

※HTMLとCSSが苦手な人がミスってしまうと千年パズルみたいにいつまでも終わらなくなってしまうので、メモ帳ににコピーするなどしてバックアップしましょう。

/* ボタン */
.btn-wrap{
margin-bottom:30px;
text-align:center;
}
/* ピンクボタン */
.btn-wrap.rich_pink a {
    font-weight: bold;
    position: relative;
    background-color: #ee5656;
    color: #fff;
    border-radius: 0.2em;
    box-shadow: 0 4px 0 #d34e4e;
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left:20px;
    padding-right:20px;
    transition: all 0.5s;
}

.btn-wrap.rich_pink a:hover{
background-color:#d34e4e;
box-shadow: 0 2px 0 #d34e4e;
}

上のソースコードを管理画面>デザイン>CSSへ貼り付けます。

2.使い方

<div class="btn-wrap rich_pink"><a href="URL">タイトル</a></div>

実際に使うときは<a href=”URL”>の部分に誘導したいリンクを貼り付ける。

上のコードでいう「タイトル」の部分には誘導したいページのタイトルを書きます。

例えば、

  • 誘導したいリンクがhttps://showdy5.com/blogcustom
  • 表示したい文字が「ブログカスタムはこちら」

の場合は下のように入力します。

 <div class="btn-wrap rich_pink"><a href="https://showdy5.com/blogcustom">ブログカスタムはこちら</a></div>

このように入力すると下のようなボタンができます。

もしもうまくいかなかったらブログカスタムサービス

「これ以外にももっとおしゃれなボタンを作りたい」

「カスタムをしたいけど全然知識がない」

そんな人のためにブログカスタムサービスを始めました。

 

困っている人はチェックしましょう。

創ってさくさくのWeb制作

企業のホームページ、ランディングページなどデザインからコーディングまで行うことができます。お問い合わせ・ご相談は無料で行なっているので、お気軽にご連絡ください。



スポンサードリンク