Orange ZELOでは、より魅力的な記事を作成できるように、ボタン機能がついています。
ボタンを記事に設置することで、リンクへの誘導やアフィリエイトがより行いやすくなります。
Bloggerのリンク機能を使うことで、とてもかんたんにボタンを作成できるので、ためしてみましょう。
つい押したくなるなび〜！
ボタン機能の使い方
まず、Bloggerの記事編集画面からリンクを選択します。
表示するテキスト、ウェブアドレスをそれぞれ入力し、OKを押しましょう。
ここでは例として、表示するテキストに「Bloggerなび」、ウェブアドレスに「https://blogger-nav.blogspot.com/」を入力します。
記事編集画面をHTMLに切り替え、作成した<a>リンクタグを探します。
例の場合、作成したリンクは次のようになります。
「target="_blank"」は、リンク作成時に「新しいリンクで開く」を選択した場合に追加されます。
ボタンのリンク先を新しいタブで開く場合は、これがついてることも確認しましょう。
そしてこの<a>タグに、「class="btn"」という文字を次のように追加します。
これでOKです。作成したボタンは、このように表示されます。
Bloggerなび
このボタンの配置を中央や右寄せに変えたい場合、<a>タグを以下のように囲みましょう。
薄みどり色の「center」部分を「right」に変えることで、右寄せにすることができます。
また、ボタンの文字の色、背景の色はテーマデザイナーよりかんたんに変えることができます。
Orange ZELOでは、吹き出し機能も記事中でかんたんに使えます。
吹き出し機能について、詳しくはこちらをご覧ください。
>>【Orange ZELO】かんたんに吹き出しを使ってみよう
表示するテキスト、ウェブアドレスをそれぞれ入力し、OKを押しましょう。
ここでは例として、表示するテキストに「Bloggerなび」、ウェブアドレスに「https://blogger-nav.blogspot.com/」を入力します。
記事編集画面をHTMLに切り替え、作成した<a>リンクタグを探します。
例の場合、作成したリンクは次のようになります。
<a href="https://blogger-nav.blogspot.com/" target="_blank">Bloggerなび</a>
「target="_blank"」は、リンク作成時に「新しいリンクで開く」を選択した場合に追加されます。
ボタンのリンク先を新しいタブで開く場合は、これがついてることも確認しましょう。
そしてこの<a>タグに、「class="btn"」という文字を次のように追加します。
<a href="https://blogger-nav.blogspot.com/" target="_blank" class="btn">Bloggerなび</a>
これでOKです。作成したボタンは、このように表示されます。
Bloggerなび
このボタンの配置を中央や右寄せに変えたい場合、<a>タグを以下のように囲みましょう。
<div style="clear: both; text-align: center;">
<a href="https://blogger-nav.blogspot.com/" target="_blank" class="btn">Bloggerなび</a>
</div>
薄みどり色の「center」部分を「right」に変えることで、右寄せにすることができます。
また、ボタンの文字の色、背景の色はテーマデザイナーよりかんたんに変えることができます。
コードをいじらなくても色を変えられるなび！
サイトの雰囲気に合わせたボタンを作成して、魅力的なサイトにしていきましょう！Orange ZELOでは、吹き出し機能も記事中でかんたんに使えます。
吹き出し機能について、詳しくはこちらをご覧ください。
>>【Orange ZELO】かんたんに吹き出しを使ってみよう
コメント