WordPressのCocoonは、私のようにブログを始めようとする者には、実に至れり尽くせりの親切な無料テーマです。
どこかで見覚えのあるSNSのシェアボタンも、初期設定でちゃんと表示されています。
でも、今から読み始めようとする本文の上にも、読み終わった本文の下にもドデン！と並ぶこの色あでやかなボタンの列…
文字通り幅を利かせていて、「存在感ありすぎ‼」と感じるのは私だけでしょうか。
白状すれば、「はてブ」とか「Pinterest」とか、本当はよく知らないものもありまして、
それをそのまま無責任に表示していることにも、少し気が引けておりました。
そこで、表示するボタンの種類・数・位置を、自分らしくすっきりとカスタマイズしてみたいと思います。
実は、ボタンの選択、表示・非表示など、Cocoon設定から簡単に変更できるんですね。
シェアボタンの意味と役割
そもそもシェアボタンというのは、記事の拡散を促すためのもの。
ちょっとおこがましいしい気もするのですが、
「この記事を読んで面白かったな、よかったなと思ってくださったら、あなたがお使いのSNSで他の方々にも紹介してください」
ということですよね。
【X】、【Facebook】、【LINE＠】、【LinkedIn】
などのボタンがこれにあたります。
一方、
【はてなブックマーク】、【Pocket】、【Pinterest】
の３つのボタンは、読者自身が使っているこれらのブックマークやクリップボードに、記事や画像を保存するために設置するものです。
【タイトルとURLをコピー】のボタンは、押すと投稿のタイトルとURLがコピーされて、よそへ貼り付けることができます。
そのほか、読者からの【コメント】を促すボタンもあります。
さて、Cocoonに準備されているこれらのシェアボタンの役割が大体つかめたところで、カスタマイズに移りましょう。
今回のカスタマイズのポイント
・シェアボタンの表示は、本文の下だけにする
・ボタンは、X，Facebook，LINE，コピー，コメント の５個を表示する
設定の手順
では、実際に設定を進めていきましょう。
まず、ダッシュボードのCocoon設定⇒SNSシェアを開きます。
1.「トップシェアボタンの表示」の✓をはずす
これで、本文の上にシェアボタンは表示されなくなりました。
ここで念のために、一旦画面上部の「変更をまとめて保存」をクリックしておくといいですね。
そのまま、ボトムシェアボタンのブロックまでスクロールしていきます。
2.「ボトムシェアボタンの表示」を✓する
✓が、本文の下にシェアボタンが表示されている状態を表します。
3.「シェアメッセージ」を入力する
シェアボタンの上にシェアを促すメッセージを表示できます。
未記入でもOK
今回は、＜よかったらシェアしてね＞ と入力しました。
4.「表示切替」で、表示するボタンを選択する
今回は、X，Facebook，LINE＠，タイトルとURLをコピー，コメント の５つを選び✓しました。
5.「表示ページ」で、表示するページを選択する
今回は、「投稿」にのみ✓を入れ、シェアボタンを表示するようにしました。
6.「ボタンカラー」で、ボタンの配色を３つの中から選択する
モノクロ
ブランドカラー
ブランドカラー（白抜き）
使うスキンによっても、ボタンの形や配色が違うことがあるようです。
確認するのが、ちょっと楽しみですね。
7.「カラム数」で、横一段に並ぶボタンの数を、１～６列のうちから選択する
今回は、「４列」を選択しました。
５つのボタンのうち、【コメント】を別に置きたいと考えたからです。
8.「ロゴ・キャプション配置」で、ボタンのロゴとキャプションの配置を選択する
ロゴ・キャプション左右
ロゴ・キャプション上下
キャプション・ロゴ上下
9.「シェア数の表示」で、シェアされた数を表示するなら✓を入れる
度胸がないので、私には✓はムリです（笑い）
10.画面上下にあるどちらかの「変更をまとめて保存」をクリックする
プレビューで、ボトムシェアボタンの様子が確認できます。
これで、シェアボタンの表示についての設定は完了です。
まとめ
見よう見まねで始めたブログも、Cocoonの初期設定のお陰で必要最低限の体裁を保ってきました。
でも、本当にそれが必要最低限の体裁と言えるものなのかどうかもわかっていない、まだまだ常に知らないことだらけです。
今回取り組んだ、シェアボタンの設定についてもそのひとつでした。
シェアボタンというものの役割を確認し、いくつかのボタンの意味を知って初めて、
「読者の方には、ぜひここでこのボタンに目をとめてほしい。あわよくば、役に立ててほしい」
と考えて、現時点の私なりに最もシンプルなカスタマイズを実現できたと思っています。
もちろん、Cocoon設定の変更の範囲内ではありますが…
そして、これは想定外の気づきとなりましたが、
５つ目のボタン【コメント】の表示の意味についても改めて認識することができました。
もともとコメントの記入欄はページの最下部で、本文の終わりからもかなり離れた位置にありました。
いやいや、こりゃ気付かんでしょ
つまり、本文のすぐ下に表示される【コメント】ボタンを押すことで、瞬時にコメント記入欄へと画面が切り替わります。
「ひと言反応してやろうか」という読者さんのありがたい思いつきを、キャッチできるチャンスが増えるかも・・・です。
コメント