こんにちは！
記事にボタンを入れる
みなさんは、ちょっと記事にボタン（リンク）をつけたいな、ってときありませんか？そういう時に役立つ方法を教えます。
まず、ダッシュボードから「デザイン」を押します。
そのあと、左上のほうにあるレンチのマーク、「カスタマイズ」を押します。
そして「ヘッダ」をクリックします。そして下にある「ブログタイトル下」
をクリックします。
すると、CSSを入力する画面が出てきます。
ここに入力します。
まずは下のように入力してください。
<style>
.button1 a{
display: block;
padding: 1em 3em;
width:70%;
background: #696969;/*ボタン色*/
color: #ffffff !important;
border-bottom: solid 4px #000000;
border-radius: 15px;
text-decoration: none !important;
font-size: 120%;
text-align:center;
}
.button1 a:hover {
background: #000000;/*ボタン色*/
}
.button1:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
</style>
「ボタン色」の左の数字を変えると、ボタンの色を変えることができます。
そして、これで準備が完了です。
まず、ボタンを入れる記事を開いてください。
編集のところで、題名の上にある「HTML編集」をクリックしてください。
すると、上の画像の文字がないバージョンが出てくると思います。
そしたら、下の文字を入力してください。
<center>
<p class="button1"><a href="/about/">About this blog </a></p>
</center>
一番上に入力が完了したら、まず「<a href="/about/"」のところの「/about/」を、リンクしたいページのURLにします。
ちなみに、はてなブログ内の別のブログの記事への移動～だとかはできません。
「この記事は存在しません」と出てくることがあります。
別のホームページなどにリンクさせましょう。
そして、次に、「>About this blog </a></p>」のところの「About this blog」を、ボタンに書いてある文字の名前に変更します。
そして、プレビューを見てみましょう！すると、ボタンができているはずです！
今回、いろいろなものを入力しましたね。
このボタンは、ボタンの上にマウスのカーソルを合わせると、色が変わるようにできています。
あと、クリックすると沈むので、リアルなボタンのようになっています。
こんな感じに楽しんで、はてなブログを使いこなしてみましょう！
サイドの「リンク」を変更
サイドにある「リンク」のところ、なんだかはてなブログのヘルプページとかへのアクセスになっていると思います。そこを変更してみましょう！
さきほどと同じように、「デザイン」をクリックして、左上のレンチのようなボタン「カスタマイズをクリックします。
そして、下の「サイドバー」をクリックします。
すると、僕は違いますが「リンク」というものがあります。
その右にある「編集」をクリックすると、リンクを編集できます。名前とURLを入力すると便利です。
終わりに
うまくできましたか？もし正しいやり方でやっても、うまくできなかったら、ぜひコメントを送信していただければ幸いです。
そうしていただければ随時更新を行います。
自分もとまどいました...そして、さきほどボタンの色を調節することを説明しましたが、
「#000000」や「#696969」など、様々なコードが必要で、普通の人は暗記してないと思うので、わかるための「原色大図鑑」のリンクを張ります。
これを機にぜひ、作ってみてください。
簡単なカラーコードを下に載せます。
「原色大図鑑」のページを見ると、他にもいろいろな色が乗っていますので、そちらもぜひ参考にしてください。
