こんにちは、会社員しょこちゅんです🤗
コメントでサイトのカスタマイズを褒めて頂くことが何度かありました。
元々、制作の仕事をしておりますので、デザイン面だったりを褒めていただけると本当に嬉しい限りです。
そして、褒められた勢いのまま調子に乗ろうと思います。
今回は、はなてブログのブロガー様用に、私が自分のサイトで行っている色々な設定方法をお伝えしたいと思います。
（本来、こっちは専門分野ではないのですが…）
参考サイトは、こちらで紹介されてるボタンを「はてなブログ記事内での方法」で記載しなおしていきます。
saruwakakun.com※上記のサイトの中でいくつか抜粋しています。
では、さっそくやってみよー。ｵｰｯ
記述箇所
①ダッシュボードから「記事を書く」を選択し新規で開く➡「HTML編集」項目を選択
②「HTML編集」に下のコードを全部コピーして貼り付ける。
- <style type="text/css"><!--
- /*ボタン１*/
- .btn-flat-simple0 {
- position: relative;
- display: inline-block;
- font-weight: bold;
- padding: 0.25em 0.5em;
- text-decoration: none;
- color: #00BCD4;
- background: #ECECEC;
- /*マウスを合わせた色の変化の速度を変更できるよ。↓ここの"1s"の部分を"4s"とかに変えるとゆっくりめになるので試してみて。*/
- transition: .1s;
- }
- .btn-flat-simple0:hover {
- background: #00bcd4;
- color: white;
- }
- --></style>
- <center><a href="#" class="btn-flat-simple0" style="text-decoration: none;" target="_blank"> ボタン１ </a></center>
③こんな感じでごそっと貼り付ける。
④「編集 見たまま」に戻って確認する。
はい、できましたか？
めっちゃ簡単ですよね。ふふ
続いては、さらにワンステップずつ進んでいきます🤗
ボタンの表示名の変更
⑤再度「HTML編集」を選択 ➡ 下記画像の箇所を変更する。
マウスを合わせた時に反応する速度を調整したい。
⑥画像に記されている箇所の数値を変更する。他の箇所を消したりしないよう気を付けて、数字だけを慎重に変える。
下のサンプルにマウスをもっていって、どこがかわったか確認してみてね。
”１ｓ”にしてみた場合。
”５ｓ”にしてみた場合。
文字色や背景色などを変えたい
⑦色の指定箇所は下記画像の所になります。6桁の英数字が色指定の番号みたいなものです。
ちなみに、6桁の英数字で表示してくれている便利なサイトがあるので、私はいつもそこで色を探し、コピーして貼り付けています。サイトはここです。
リンク先を指定したい
⑦リンクさせたいサイトを開き、URLバーからURLをコピーする。
⑧.⑦でコピーしたURLを下記画像の箇所に貼り付ける。
上のサンプルボタンをクリックすると、指定したURLに飛びます。
最後に、注意点
「HTML編集」の一番はじめにCSSの記述があると、使用しているテーマによってトップページにでてくるサムネイル画像の表示が変になってしまう可能性があります。簡単な手順で画像が上にくるようにします。
⑨「HTML編集」を開き、先ほど記述したタグの一番上に”<p></p>"と追加する。
<p></p>は行を追加するという認識で大丈夫です。
それを付け加えてあげる事で、ボタンの上に一行追加されるので確認してください。
確認した後に、追加した行の箇所にカーソルを置いて、画像を読み込みます。
⑩行が追加されるとはこういう事です。
わかりやすいように、追加した行に「あああ」と打ち込んでいます。
⑪そのあと、画像を入れる場合は、通常通りの手順で読み込んで配置して下さい。
ちょっと長くなってしまったので、続きはまた次回に。
はい、いかがでしたでしょうか(^^)
上記の内容で設定すれば、ただの文字リンクじゃなく、クリックしてみたくなるような魅力あるボタンになるかと思います。
「調べてその通りにやってもはてなブログだとうまくいかない」
「簡単なCSSって書いてるけど、どこに書いていいかわからない」
私もweb系はプロじゃないので、ネット難民になる事がとても多いです。
参考サイトは沢山あるのですが、うまくいく方法が限られてるので、色々な方法を試さなきゃいけないのが、本当にだるい！(笑)
Q.「はてなブログProしか該当しないの？」
と、言われそうですが、はてなブログ無料の記事画面がわからないので、「はてブログPro」と書いてます。
はてなブログ無料の方でも、もし記事編集画面に「HTML編集」の箇所があれば可能かと思いますので設定してみて下さい(^^)♪
ということで、今回はここまでです。
続きの記事では、冒頭でご紹介したサイトで作成されているボタンをいくつか公開してます🤗
本日の記事を参考にしながらの応用となりますので、ひとまず上記のボタンを作成して次の記事に進んで下さい！
それでは、本日も最後までご覧頂きありがとうございましたm(__)m
次回更新は12/16(月)更新♪を予定しておりますのでお楽しみに！
それではまた次の記事でお会いしましょうー。
またねー(^-^)
（※2019.12.14現在の情報となります）
✔ブログ村ランキングに参加しています
にほんブログ村
✨＜港区周辺・リピ率高＞仕事終わりに行ける東京都内おすすめイルミネーション厳選３か所！
✨（３０代以上）ガヤガヤした居酒屋なんて嫌！ちょっぴり大人なおすすめクリスマスディナー目的別まとめ！
✨クリスマスデートでおすすめコーディネートまとめ！デート時気を付けてほしい大事なPOINTは足元！
✨大人のクリスマスプレゼント。大切な人に喜んでもらえるプレゼントランキングベスト３！
✨（曲・歌詞付）聞き飽きたけど聞きたくなる。クリスマスキャロルや定番曲５選↗
✨2019.11.3 〔自己紹介をアップしました。よければチェックしてみてね〕
[お願い]
※当ブログは広告収入で成立しています。気になるサイトがありましたら併せてチェックしてみて下さいな🤗
■大好きなまんが王国はコチラから▶！無料マンガ3000冊！数カ月無料漫画だけ見続けてましたが何か問題でも？
