【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】

Cocoonボタン使い方作り方Cocoon

WordPressテーマCocoonを使っているけど…

  • ボタンの使い方,作り方がよくわからない
  • ボタンを横並びにできない
  • ボタンの大きさを変えたり光らせたりしたい

大丈夫、この記事読めばわかります。最初はみんなわかんないんだからわからなくて当然ですよね。

本記事はWordPress テーマCocoonを使っていて、なおかつ記事をブロックエディタで書いている人に向けて、ボタンの使い方を丁寧に画像付きで説明していきます。

▼こういうヤツとかが簡単に作れるようになります▼

Cocoonボタンの説明書ですね

さらに、ボタンブロックの仲間で囲みボタンってやつがあるんですが、そいつの使いどころを説明もして、

さらにさらにボタンっていうとスマホ表示のときの検索ボタンとかも気になってるって人にどうやればいいのか答えを書いていきたいと思います。

囲みボタンはアフィリエイトタグを埋め込むときに使います。逆に言うと、普通のボタンではアフィリエイトリンクにするとまずいことがあります。

では早速ボタンの使い方を見ていくことにしましょう!あなたも投稿画面を開いてこの記事を見ながら一緒にやっていただけるとより身につくと思います。

▼Cocoonにはまだ知らないブロックがある▼

Cocoonボタンの使い方・作り方

そしたらボタンの基本からお伝えしていきます。画面左上のブロックを追加(⊞)からボタンブロックを探しましょう※

▼⊞→ボタン▼

デザインのくくりの中にも「ボタン」ブロックがありますが、今回はCOCOONブロックの方の「ボタン」ブロックを探してください。

アイコンが黒く塗りつぶされている方のボタンブロックを選びましょう。

▼こっちではない!▼

そうすると下のようなボタンが出てきます。

ボタンの文字のところをクリックしてあなたの好きな文言に変えましょう。

▼「トップへ戻る」としてみました▼

そしたら、次の操作からはサイドバーかツールバーを使ってボタンブロックを装飾していきます。

▼ボタンブロックを選択したときのサイドバーとツールバー▼

ツールバーを表示させるには、編集画面右上の公開の右のはぐるまの右のを押して、トップツールバーを選択して✔を付ければ表示されます。

サイドバーを表示させるには、画面右上のはぐるまを押すと出ます。で、思った通りの表示になってないときは、ボタンブロックを左クリックするとサイドバーがきちんとボタンブロックを編集するための表示になります。

それでも表示されてない場合は、タブが投稿になっていると思われますので、ブロックの方を押しましょう。

▼ここら辺をいじる▼

リンク先を指定する

ボタンブロックを左クリックすると、サイドバーにURLっていうところがでます。そこにリンク先のURLを入力すれば、ボタンを押すと指定したURLのページへ飛ぶようになります。

また、リンクの開き方を現在のタブで開く新しいタブで開くか設定してあげましょう。

▼URLの設定をサイドバーでしよう▼

ボタンの大きさ・形を変える

ボタンブロックを左クリックすると、サイドバーにサイズを選択するところがでます。大・中・小の好きな大きさを選びましょう。また、形を四角形から円形にしたい場合は円形にするを押しましょう。

▼サイズと形状を選択しよう▼

下にサンプルボタンを貼っておきます

光るボタンにする

これは超簡単です。ボタンブロックを左クリックすると、サイドバーに光らせるっていうところがありますので、ボタンを光らせたい人は光らせるを押しましょう。

▼光らせてみよう▼

文字サイズを変える

ボタンブロックを左クリックすると、サイドバーにフォントサイズを選択するところがあります。そこでデフォルト・小・標準・中・大・特大のどれかを選びましょう

▼フォントサイズを決めよう▼

色を変える

ボタンブロックを左クリックすると、サイドバーに色設定の項目がでます。文字色・背景色・ボーダー(外枠)色を好きな色に変更しましょう。

▼選択できる色▼

中央寄せにする

ボタンブロックを左クリックで選択したあとに、ツールバーの配置を変更を押して、中央寄せを選択しましょう。

▼中央寄せはツールバーから設定する▼

右寄せにしたい場合もツールバーの配置を変更から右寄せを選択しましょう。

ボタンを横並びに並べる

ボタンの横並びにはテクニックが必要です。まずは画面左上のブロックを追加⊞から2カラムを選択しましょう。※ボタンを3つ並べたい場合は3カラムを選択です。

▼2カラムブロック▼
かなりスクロールしないと見つかりません

カラムブロックの左側と右側にそれぞれボタンブロックを追加してあげると横並びになります。

▼両方とも中央寄せ▼

ボタンを3つ以上並べたい場合は2カラムブロックの中にさらに2カラムブロックを入れることでより本文を分割することができます。

また、PCでは横並びになりますが、スマホでは画面の幅が狭いため横並びにはならないので注意です。

以上でひとまず「ボタン」の使い方は終了です。あなたの思うようなリンクボタンができましたでしょうか?

次は囲みボタンのお話です。アフィリエイトする人には必須知識なので必ず読んでおきましょう

囲みボタンの使いどころ

COCOONブロックのボタンのお隣に囲みボタンというブロックがあります。

▼囲みボタンブロック▼

このブロックを使うと下のようなボタンを作ることができます。

使い方はボタンブロックとほぼ一緒なんですが、ふつうのボタンではURLを入力したところに囲みボタンではアフィリエイトタグを入力します。

これによって、アフィリエイト用のボタンを簡単に作ることができます。

逆に、ふつうのボタンブロックを使ってアフィリエイトのボタンを作ろうとするのはおすすめしません

なぜならアフィリエイトタグの改変になるから、タグはそのまま使わないといけないんですよね。

そこらへんの事情とか、囲みボタンのキチンとした使い方の説明を下の記事にてしていますので、詳しくは関連記事をご覧ください。
関連記事≫【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

ヘッダーに検索ボタンとか置きたいとき

▼スマホ表示でよく見るボタン▼

上の画像のような検索メニューボタンはCocoon設定とメニューを使うと専門知識とか全く必要なく簡単に設定することができます

当ブログでも1記事しっかり使って解説していますので、設定をしてみたい方は下の関連記事から詳細を確認してください。
関連記事≫【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

Cocoonボタンの使い方まとめ

本記事では【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】

ということで、ブロックエディタにおけるボタンの使い方を見てきました。ボタンの装飾関係はほとんどサイドバーで完結するので、覚えやすいかと思います。

ぜひあなたのサイトでももっとみるボタンとか、トップに戻るボタンを使ってわかりやすいブログにしていってあげてください。

▼Cocoonにはまだ知らないブロックがある▼

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

  1. はじめまして。
    当方今月からブログを開設いたしましたアチヒロと申す者です。
    こちらの記事だけではなく他の記事も参考にさせていただきましたが、最初にたどり着いたのがこちらだったのでこちらにコメントさせていただきます。
    非常に参考になりました!ありがとうございます!

    • アチヒロさま
      当ブログを参考にしていただきありがとうございます!
      ブログ始めたてということなので、これからどんどん記事書いていってください