LINEで送る
Pocket
このエントリーをはてなブックマークに追加


こんにちは、管理人のKn0wsです。

この度、公式LINE@を開設致しました。

友達追加

記事を更新後のお知らせメッセージや、お得な情報、ITに関する疑問や質問、パソコンやスマホに関するご相談などを受け付けております。

ぜひ追加して、ここでしか受け取れないマル秘情報を手に入れてくださいね!

スポンサーリンク




WordPressのウィジェットエリアに友達追加バナーを設置する方法

さて、宣伝の後ですが、今回はWordPressのウィジェットエリアに友達追加バナーを設置する方法を紹介します。

WordPressでは設置できる公式プラグインがないため、基本的に手動で行う必要があります。

しかし、追加方法は簡単ですので、この際にぜひサイト運営者の方は設置してみましょう。

まず、LINE@にてリンクを取得します。

スマホアプリからは、プロフィールへアクセスし、友だちに教えるへ進みます。

下の友だち追加ボタンへアクセスします。

ボタンURLのコードをコピーします。

PCで取得する場合は、LINE@ MANAGERへアクセスし、アカウント情報→基本設定友だち追加ボタンのコードをコピーします。

コピーしたら、WordPressの管理画面へアクセスし、外観→ウィジェトへアクセスします。

テキストを表示したいウィジェトエリアにドラッグアンドドロップします。

お好きなタイトルと内容を記入したら、先ほどコピーしたコードを貼り付けます。

右下の保存をクリックすれば終了です。

ボタンのデザインを変える

ここからは、ボタンのデザインを変える方法を紹介します。様々な方法がありますので、お好きにカスタムしてみてください。

ボタン・バナー画像を変える

まず、変えたい画像をアップロードします。管理画面からメディア→新規追加から、画像をアップロードします。

アップロードしたら、右側の編集をクリックします。

右側のファイルのURLをコピーします。

コピーしたら、最初に既述した自分のコードを以下のように編集します。

すると、画像が変更されます。
友だち追加

このように、オリジナルのアイコンやバナーを編集できます。

画像クリック時に新規ウィンドウで開く

画像をクリックした際、新規ウィンドウで開くようにしてあげると、閲覧者様がサイトにまた戻ってきてもそのままページを見てもらえます。

以下のようにコードを編集しましょう。

target=”_blank” を追加するだけで、新規ウィンドウで開くことができます。

画像の高さ・横幅を変える

せっかく作ったアイコンでも、大きさが納得いかない時があります。

画像の高さを変える場合は、先ほどのコードの以下の部分を編集します。

height=”数値” … 画像の高さを指定します。小さければ高さが小さく、大きければ高さが大きくなります。

width=”数値” … 画像の横幅を指定します。小さければ狭く、大きければ広くなります。

基本的にはheightのみを変えれば良いのですが、もし横幅も変えたい場合は使ってみましょう。

画像の角を丸くする

アイコン・バナー画像を作ったはいいけど、画像の角を丸くしたい…という場合は、以下のように編集します。

このように、style=”border-radius: 数値px;”を追加してあげると、数値により画像の角がまるくなります。

友だち追加

数値が小さければ角の丸さが軽減され、大きければ角の丸さが強調されます。

ただし、これは画像本体の角を丸くするだけですので、画像によっては違和感が出る場合もありますのでご注意ください。

いかがでしょうか。基本的にはHTMLを使った画像の編集ですので、多少はHTMLの知識があった方が楽でしょう。

CSSというカスタマイズ方法を学べば、より高度に編集できますが、今回は簡易的な方法を紹介しました。

ぜひ参考にしてくださいね。


スポンサーリンク