はてなブログでリンク付きのボタンの作り方【コピペOK】

はてなブログで、こんな感じのリンクボタン作ってみたので、自分の備忘録兼ねてタグとか載せておきます。

【↓こんな感じのリンクボタン】
（リンクは当ブログTOPに飛びます）

＼今なら送料無料！／

美味しいはちみつをお得にGET！

タグコードが長いので、迷子になったら、目次クリックしてジャンプ機能使ってください＾＾；

はじめに
CSS
- CSS解説＆カスタマイズ方法
HTML
- 利用例
できましたか？

はじめに

タグコードを紹介する前に3点ほど。

①
プログラミングの知識については、昔個人サイト運営してた時代に多少かじった程度です。

ゆえに、タグが要領の悪い記述になってるかもしれません。

②
はてなブログの謎の仕様により、やむを得ず組み込んでいるコードもあります。

③
試行錯誤中のクラス名をそのまま採用しています。

後述しますが、激ダサのクラス名になっていますので、ご自分の分かりやすいクラス名に変更してください。

CSS

では組み込んでいくタグを紹介していきます。

以下のCSSタグを、
デザイン＞カスタマイズ＞デザインCSS
に、貼り付けてください。
解説は後述。

――――以下をコピペ――――

/* ボタンリンク */
/* テーブル全体 */
.ta02 {
border: solid 2px #ffffff;
margin: auto;
}
/* ボタンリンク下部分 */
.btn000 {
text-decoration: none;
background: darkorange;
text-align: center;
}
.btn000 a {
text-decoration: none;
background: darkorange;
color: white;
font-weight:bold;
}
.btn000:hover a {
text-decoration: none;
color: red;
}
/* ボタンリンク上部分 */
.tt00 {
font-size: 90%;
color: #d32f2f;
text-align:center;
}

――――コピペここまで――――

CSS解説＆カスタマイズ方法

それぞれのタグの解説です。
ボタンリンクは基本的にテーブルタグで作っています。

/* この記号で囲われた部分は、CSSに書いたままでも機能しますので、メモ代わりに使ってください */

ちなみに、以下のCSSを張り付けても機能します。

――――解説ココカラ――――

/* ボタンリンク */
/* テーブル全体 */
.ta02 {/* ボタンリンク全体の名前。変更したらHTMLも変える */
border: solid 2px #ffffff;/* テーブルの線を白にする。背景色に合わせて変更 */
margin: auto;/* テーブルを真ん中にする */
}

/* ボタンリンク下部分 */
.btn000 {/* ボタン下部の名前。変更したらHTMLも変える */
text-decoration: none;/* リンクの下線消す */
background: darkorange;/* ボタンの色指定。＃～の色コードOK */
text-align: center;/* リンク文字を真ん中にする */
}

.btn000 a {/* ボタンのリンク関連の設定 */
text-decoration: none;/* リンクの下線消す */
background: darkorange;/* ボタンの色指定。＃～の色コードOK */
color: white;/* 文字色指定。＃～の色コードOK */
font-weight:bold;/* 文字を太字にする */
}

.btn000:hover a {/* カーソルを置いた時の設定 */
text-decoration: none;/* 文字の下線消す */
color: red;/* オンマウスで文字色変える */
}

/* ボタンリンク上部分 */
.tt00 {/* ボタン上部の呼びかけ部分 */
font-size: 90%;/* 文字サイズを変更したい時。変更不要なら削除してOK */
color: #d32f2f;/* 文字色設定 */
text-align:center;/* 文字を真ん中にする */
}

――――解説ココマデ――――

上記タグコード内の、
.ta02 と、.btn000 と、.tt00 は名前の変更が可能です。

CSSの方を変更した場合、下記HTMLタグ内の同名タグも変更してください。

何度も言いますが、本記事のタグコードは、私が自分用に付けた名前なのでネーミングセンスが喪失しています。

ぜひ、分かりやすい名前に変更する事をオススメしますm(_ _)m

HTML

実際の記事には以下のタグを入れて下さい。

■の部分にリンク先のURLを記入します。

<table class="ta02">
<tr><td class="tt00">＼今なら送料無料！／</td></tr>
<tr>
<td class="btn000"><a href="■">表示させたい文字</a></td>
</tr></table>

利用例

実際に使ってみましょう！

【タグ】

<table class="ta02">
<tr><td class="tt00">＼不器用だって！／</td></tr>
<tr>
<td class="btn000"><a href="https://honey-try.hatenablog.com">やればできる！！！！！</a></td>
</tr></table>

【表示】

＼不器用だって！／

やればできる！！！！