Web
Analytics

花太郎BLOG

夫婦で始めた日々のblog日記。色々な事を発信していきます♪

花太郎BLOG4

 NEW! PICKUP
● 夏!『2カ月で8キロ減量』ダイエット録
●『本当に美味しい』テイクアウト、その他グルメレビューをお届け♪
●『LINEおばさん絵文字』注※スタンプじゃなくて絵文字です

【はてなブログPro用】記事内CSSで「ボタン設置」#001



f:id:shokochun:20191226002537j:plain

こんにちは、会社員しょこちゅんです🤗

コメントでサイトのカスタマイズを褒めて頂くことが何度かありました。

元々、制作の仕事をしておりますので、デザイン面だったりを褒めていただけると本当に嬉しい限りです。

 

 

そして、褒められた勢いのまま調子に乗ろうと思います。 

 

 

回は、はなてブログのブロガー様用に、私が自分のサイトで行っている色々な設定方法をお伝えしたいと思います。

 (本来、こっちは専門分野ではないのですが…)

 

 

参考サイトは、こちらで紹介されてるボタンを「はてなブログ記事内での方法」で記載しなおしていきます。

 

f:id:shokochun:20191207233437j:plain 

saruwakakun.com※上記のサイトの中でいくつか抜粋しています。 

 

 

では、さっそくやってみよー。オーッ 

 

 

 

記述箇所

 

 ①ダッシュボードから「記事を書く」を選択し新規で開く➡「HTML編集」項目を選択

f:id:shokochun:20191207212427p:plain

 

 

②「HTML編集」に下のコードを全部コピーして貼り付ける。

  1. <style type="text/css"><!--
  2. /*ボタン1*/
  3. .btn-flat-simple0 {
  4. position: relative;
  5. display: inline-block;
  6. font-weight: bold;
  7. padding: 0.25em 0.5em;
  8. text-decoration: none;
  9. color: #00BCD4;
  10. background: #ECECEC;
  11. /*マウスを合わせた色の変化の速度を変更できるよ。↓ここの"1s"の部分を"4s"とかに変えるとゆっくりめになるので試してみて。*/
  12. transition: .1s;
  13. }
  14. .btn-flat-simple0:hover {
  15. background: #00bcd4;
  16. color: white;
  17. }
  18. --></style>
  19. <center><a href="#" class="btn-flat-simple0" style="text-decoration: none;" target="_blank"> ボタン1 </a></center>

 

 

③こんな感じでごそっと貼り付ける。

f:id:shokochun:20191207215256p:plain

 

 

 ④「編集 見たまま」に戻って確認する。

f:id:shokochun:20191207215727p:plain

 

▼サンプル▼
ボタン1

 

 

 

はい、できましたか?

めっちゃ簡単ですよね。ふふ

 

 

 

いては、さらにワンステップずつ進んでいきます🤗

 

 

 

ボタンの表示名の変更

 

⑤再度「HTML編集」を選択 ➡ 下記画像の箇所を変更する。

f:id:shokochun:20191207220530p:plain

 

 

マウスを合わせた時に反応する速度を調整したい。

 

⑥画像に記されている箇所の数値を変更する。他の箇所を消したりしないよう気を付けて、数字だけを慎重に変える。

f:id:shokochun:20191207222914p:plain

 

下のサンプルにマウスをもっていって、どこがかわったか確認してみてね。

 

s”にしてみた場合。

 ボタン1(速度1s) 

 

s”にしてみた場合。

 ボタン2(速度5s) 

 

 

文字色や背景色などを変えたい

 

⑦色の指定箇所は下記画像の所になります。6桁の英数字が色指定の番号みたいなものです。

f:id:shokochun:20191207230911p:plain

 

▼サンプル2▼
 ボタン1 

 

f:id:shokochun:20191207233437j:plain
ちなみに、6桁の英数字で表示してくれている便利なサイトがあるので、私はいつもそこで色を探し、コピーして貼り付けています。サイトはここです。

www.netyasun.com

 

 

リンク先を指定したい

 

⑦リンクさせたいサイトを開き、URLバーからURLをコピーする。

f:id:shokochun:20191207234048p:plain

 

⑧.⑦でコピーしたURLを下記画像の箇所に貼り付ける。

f:id:shokochun:20191207234944p:plain

 

▼サンプル▼
 ボタン1 

 

上のサンプルボタンをクリックすると、指定したURLに飛びます。

 

 

最後に、注意点

 

「HTML編集」の一番はじめにCSSの記述があると、使用しているテーマによってトップページにでてくるサムネイル画像の表示が変になってしまう可能性があります。簡単な手順で画像が上にくるようにします。

 

⑨「HTML編集」を開き、先ほど記述したタグの一番上に”<p></p>"と追加する。

f:id:shokochun:20191209112457p:plain

 

 

<p></p>は行を追加するという認識で大丈夫です。

それを付け加えてあげる事で、ボタンの上に一行追加されるので確認してください。

確認した後に、追加した行の箇所にカーソルを置いて、画像を読み込みます。

 

 

⑩行が追加されるとはこういう事です。

わかりやすいように、追加した行に「あああ」と打ち込んでいます。

f:id:shokochun:20191209140807p:plain

 

 

⑪そのあと、画像を入れる場合は、通常通りの手順で読み込んで配置して下さい。

f:id:shokochun:20191209141119p:plain

 

 

 

ちょっと長くなってしまったので、続きはまた次回に。

f:id:shokochun:20191208010442j:plain

はい、いかがでしたでしょうか(^^)

 

 

上記の内容で設定すれば、ただの文字リンクじゃなく、クリックしてみたくなるような魅力あるボタンになるかと思います。

 

 

「調べてその通りにやってもはてなブログだとうまくいかない」

「簡単なCSSって書いてるけど、どこに書いていいかわからない」 

 

 

私もweb系はプロじゃないので、ネット難民になる事がとても多いです。

参考サイトは沢山あるのですが、うまくいく方法が限られてるので、色々な方法を試さなきゃいけないのが、本当にだるい!(笑)

 

 

Q.「はてなブログProしか該当しないの?」

と、言われそうですが、はてなブログ無料の記事画面がわからないので、「はてブログPro」と書いてます。

 

 

はてなブログ無料の方でも、もし記事編集画面に「HTML編集」の箇所があれば可能かと思いますので設定してみて下さい(^^)♪

 

 

ということで、今回はここまでです。

続きの記事では、冒頭でご紹介したサイトで作成されているボタンをいくつか公開してます🤗

 

本日の記事を参考にしながらの応用となりますので、ひとまず上記のボタンを作成して次の記事に進んで下さい!

 

 

〔続き〕ボタン7種を見る

 

 

れでは、本日も最後までご覧頂きありがとうございましたm(__)m 

次回更新は12/16(月)更新♪を予定しておりますのでお楽しみに!

 

 

それではまた次の記事でお会いしましょうー。

またねー(^-^)

(※2019.12.14現在の情報となります) 

 

 

✔ブログ村ランキングに参加していますf:id:shokochun:20191104121907p:plain

ブログランキング・にほんブログ村へにほんブログ村

f:id:shokochun:20191214203908j:plain

 

 

f:id:shokochun:20191130000222j:plain

✨<港区周辺・リピ率高>仕事終わりに行ける東京都内おすすめイルミネーション厳選3か所!

(30代以上)ガヤガヤした居酒屋なんて嫌!ちょっぴり大人なおすすめクリスマスディナー目的別まとめ!

クリスマスデートでおすすめコーディネートまとめ!デート時気を付けてほしい大事なPOINTは足元!

大人のクリスマスプレゼント。大切な人に喜んでもらえるプレゼントランキングベスト3!

(曲・歌詞付)聞き飽きたけど聞きたくなる。クリスマスキャロルや定番曲5選↗

 

f:id:shokochun:20191130000857j:plain

2019.11.3 〔自己紹介をアップしました。よければチェックしてみてね〕

その他、しょこちゅんブログ一覧はコチラ♪

総合オンライン通販でのレビューまとめはコチラ♪

 

f:id:shokochun:20191204000549j:plain

[お願い]

※当ブログは広告収入で成立しています。気になるサイトがありましたら併せてチェックしてみて下さいな🤗

 

■大好きなまんが王国はコチラから▶!無料マンガ3000冊!数カ月無料漫画だけ見続けてましたが何か問題でも?

 

■ふるなびキャンペーンのご紹介!いっつもメルマガくれるので気になっていてサイトをのぞきにいったら、なんと期間限定で100億円Amazonギフト券が当たるキャンペーンがやってるやないかーーい!期間中は何回でも参加可らしいので、この機会に応募してみてはいかがでしょうか。

 

ブチ抜く力。一つの事に魂を売れ。

f:id:shokochun:20191204000612j:plain

 

 

プライバシーポリシー  お問い合わせ

©2019.花太郎BLOG.All rights reserved