deCo..boCo..

でこぼこな人生。もっと楽しく…。

表示・非表示を切り替えられるボタンを作ろう!【はてなブログ】

タイトルだけでは一体何のことか分からない方もいると思いますが…。

今回の記事では、クリックやタップをすると表示や非表示を切り替えられるボタンの導入方法について説明をしていきたいと思います。

サンプルイメージとして早速ボタンを設置してみましたので、下のボタンを押してみてください。

 ここをクリック!

こんなボタンの作り方をご紹介していきます。

 では早速ブログへの導入方法についてお伝えしていきます。

f:id:nishi244455666:20170805230611p:plain

jQueryの導入

jQueryってなに?という声が聞こえてきそうですが…。

ざっくりと説明するとjQueryとは『Java script』と呼ばれるプログラムをより簡単に扱いやすくするためのファイルのことです。

今回の切り替えボタンを導入には、より簡単で扱いやすいjQueryを使っています。

まずはあなたのブログにjQueryを読み込めるようにしてあげるところから始めていきましょう!既に読み込める準備が出来ている方は次のパートへどうぞ。

~手順~

1)はてなブログのダッシュボードを開き、左のタブにある『設定』をクリックする。

2)設定>詳細設定>検索エンジン最適化の項目にある"headに要素を追加"という欄に以下をコピペします。

 不安な方はこちらをクリック!

画像の赤い丸を目印に、コピペをしましょう!

これで下準備は完了です。次のパートに行きましょう!

 

コードをコピペしよう!

前のパートではより簡単にスクリプトを読み込む、『jQuery』を導入しました。

次は実際に切り替えボタンのスクリプトコードをコピペしていきましょう!

レスポンシブデザインを使っていない方はPC版、スマホ版それぞれの場所にコピペが必要ですのでご注意ください。

~手順~

1)はてなブログのダッシュボードを開き『デザイン』を選択する。

2)PC・スマホそれぞれの『タイトル下』に以下のコードをコピペする。

 

コードをコピー出来たでしょうか?

ここまでの作業で準備の70%は完了です。準備編はもうひと踏ん張りですので、次のパートで一緒にやっていきましょう!

 

デザインを決めよう!

実はここまでの作業で機能的な部分はほぼ終わっているのです。

が、まだ肝心のデザインを決めていないので最後に以下のコードを付け『ボタンのデザイン』を指定する必要があります。

先程のスクリプトコードを挿入した箇所と同じ『タイトル下』に、コードをコピペしてください。PC版・スマホ版の両方のタイトル下にコピペする必要があります。

そのままコピペすると、当ブログと全く同じデザインになってしまいますが、一部のコードを書き変えることで色の変更などが可能です。

切替ボタンやテキストエリアのカラーを変更するときは6~9行目、15~17行目のカラーコード(#○○○○○○)をお好きな色のコードに差し替えてください。

 

ここまでの工程で準備は全て終わりました。

では実際にあなたのブログ記事の中に切替ボタンを作っていきましょう!

 

ボタンを設置しよう!

さて先程もお伝えしましたが、下準備は全て終わりましたので実際にボタンを記事の中に設置していきましょう。

ブログ記事の編集画面内のHTML編集を開き、ボタンを設置したい場所箇所に以下のテンプレートをコピペしましょう。

『ボタンの名前』『ここに書きたい内容を書きます。』の箇所をそれぞれ自分の好きな内容に変更してください。

分からない方の為に、もう少し細かく説明をさせて頂きます。

 

例えば こんな風に、この文章のすぐ下にボタンを設置したいとします。

ボタンの名前

ここに書きたい内容を書きます。

f:id:nishi244455666:20170713213332p:plain

画像のように、ボタンを置きたい場所に上記のテンプレートを書くとボタンを設置する事が出来ます。

サンプルのように出来たでしょうか?一応ここまでの準備と説明で、ボタンの基本的な使い方はお分かり頂けたと思います。

次のパートでは少し応用的な話をしていきますが、可能な限り簡単に分かり易くお伝えできればと考えているので、良ければお付き合いください。

 

ボタンを飾ろう!

これまでの説明では基本的なボタンの使い方についてご紹介してきました。

ここからはボタンの見栄えを少し変える為の装飾方法について説明していきたいと思います。

Font Awesomeを使おう!

切替ボタンにWebアイコンフォントを用いることで、読み手に直観的なイメージを伝えたり、文字だけとは違った印象を与えることが出来ると思います。

以下にアイコンを使った例をいくつか挙げてみますので参考にしてみてください。切替ボタンをクリックするとコードが表示されます。なお赤字の箇所はFont Awesomeのコードを表しています。

詳しくはこちら(例)

<p class="openBtn">詳しくはこちら(例)</p>

 

 詳しくはこちら(例)

<p class="openBtn"><em class="fa fa-chevron-down faColor"> </em>詳しくはこちら(例)</p>

 

 詳しくはこちら(例)

<p class="openBtn"><em class="fa fa-info-circle faColor"> </em>詳しくはこちら(例)</p>

 

 詳しくはこちら(例)

<p class="openBtn"><em class="fa fa-check faColor"> </em>詳しくはこちら(例)</p>

 

 詳しくはこちら(例)

<p class="openBtn"><em class="fa fa-exclamation faColor"> </em>詳しくはこちら(例)</p>

4種類のアイコンを使ってサンプルをご紹介しましたが、それぞれ受け取る印象が異なると思います。

切替ボタンを使って『何を表示して、何を伝えたいのか』によって アイコンや色を変えるのが良いでしょう。

この記事が読者の方のお役にたてればと願いつつ、記事を終わりたいと思います。

ブログの見出しデザインを変えたいと思っている方は合わせてこちらをご覧ください。

www.decoboco-life.com