アクセストリガー

暮らしのエンタメブログ

ネットサービス

Lineで送るボタンを好きなサイズに自作して設置する方法!

Lineで送るボタンを好きなサイズに自作して設置する方法!

皆さんLineはお使いですか?

ほとんどの方がお使いだと思います。

私もかれこれ2年以上は使っているのではないでしょうか。

Webサイト(ブログ)とLineで送るボタンの関係

Lineで送るボタンの設置をしている方は、どれくらいいるでしょう!

意外と少ない印象を私はもっています。

この投稿時点でも、10のサイトをみて1つ位設置しているのを見るかどうかといった感じです。

この比率ってサイトの扱うジャンルなどによって全然違うのでしょうけれど。

Line関係のサイトなら高確率で見かけるかもしれません。

また、ついつい「この話題って面白いよ」って送りたい時なんかは、Lineで送るボタンがあったらつい押してしまいそうです。

TwitterやFacebookやGoogle+でも情報をシェアするときに送りますが、Lineで送るってお手軽さにかけてはなかなか便利ではないでしょうか!?

コメントなしでも送れてしまえそうな気軽さがあります。

さてこのLineで送るボタンを当サイトでも少し前より設置してきましたが、レイアウトの変更などで撤去することもしばしばありましたし、あんまり重要視していませんでした。

一番初めにLineで送るボタンを設置したのは、プラグイン「WP Social Bookmarking Light」を用いての試みであったと思います。

このプラグインは、WordPress無目のプラグインですが、各種のSNSボタンを設置できる当初はなかなか重宝して使用していました。

しかし、Lineで送るボタンのサイズがやや小さすぎて、昨今の大きなSNSボタンブームに対してやや使うのに躊躇してきたころには設置を外していました。

最近では、WordPressのテーマによっては、Lineで送るボタンもディフォルトで利用可能になっているものも多くなりましたね。

公式ページでリリースされているものは、やや小ぶりなのかスマートフォン向けとされるボタンは結構小ぶりのようです。

そして、私が使用しているテーマで使えるサイズのボタンもスマートフォン向けサイズなので同様に小さい印象です。

「スマートフォンでしかLineって使わないんだし、いいんじゃないの?」という声が聞こえてきそうですが、それはその通りなのです。

例外としてPCでもLineは利用できるようですが。私は使いにくいのであきらめました。

そのボタンのサイズはスマートフォンでみても、やはり私には他のSNSボタンと比べて少し小ぶりなのです。

何だかしっくりきません。こんな感じのやつです。

設置方法|LINEで送るボタン

そんなわけでサイズ感がしっくりこないので、自作して設置できないかと考えていましたがあっさりと可能であったので早く気づけばよかったと思いました。

なので同じようにその方法を探していた方にご紹介しておきます。

ボタンの作成は公式ページで紹介されています。

Lineで送るボタン公式ページ

次の「記述例」を見ますと、WordPressようのコードは下の方のものを使うようです。

Lineで送るボタン公式ページ

次のコードの内容を見ていただければわかりますが、「ボタン幅」や、「ボタン高さ」そして「ボタン画像のURL」の各項目を指定して使うようです。

という事は、一旦画像を取得しその画像URLをコード内に書き込み、サイズも指定してあげればいいという事ですね。

実際に、その後の手順を公開していきます。

次は公式ページでダウンロード可能な画像の種類です。スマートフォン用のそれと比べて大きく見やすく作成可能です。

各種Lineで送るボタン

公式ページにてZIPで高画質の画像をダウンロード可能ですのでそちらで取得してくださいね。

WordPressにLineで送るボタンを設置する方法

まずは先ほどの公式ページにて、WordPressのコードと画像を取得しておいてください。

それでは、作成していきましょう!

まずはWordPressのダッシュボード画面を開きます。

メディアのアップロードをするために、「メディア」➡「新規追加」を選びます。

メディアのアップロードの方法

先ほどダウンロードしておいたZIPファイルを解凍してから、アップロードします。

Lineで送るボタンのアイコン

今回はlinebutton 82×20.pngを使いました。横長のボタンです。

メディアのアップロード ‹ アクセストリガー — WordPress

メディアのアップロードが完了したら、非常にわかりずらいのですが、右下に「編集」できるところがあるのでそこを選択します。

メディアを編集 ‹ アクセストリガー — WordPress

編集画面を開いたら画像(ファイル)のURLをコピーします。

それを先ほどコピーしておいたコードの中に組み込みます。

「ボタン画像のURL」というところにそのまま貼り付けたらオッケイです!

あとは「ボタン幅」と「ボタン高さ」に任意の値を設定すればコードの完成です。

コードはお好きなところにウィジェットなどで、テキストとして貼り付ければ使用可能となります。

サイドバーウィジェットの編集 WordPress

このようにウィジェットテキストエリアへコードを貼り付けます。

実際の表示画面はこんな感じになります。

アクセストリガーでLineで送るボタンを設置

何だか左に詰めて寄ってしまっていますね。

こんな時はセンター寄せにしてしまいましょう!

WordPressの投稿を新規作成する画面にして「エディター画面」で「テキスト」モードにして先ほどのコードを貼り付けます。新規投稿を追加 ‹ アクセストリガー — WordPressその後「ビジュアル」モードにして中央寄せにします。

新規投稿を追加 2‹ アクセストリガー — WordPress

最後にもう一度「テキスト」モードにしてコードをコピーします。

それを先ほど作成していたウジェットへ上書きして保存します。

これでボタンが中央配置されました!

アクセストリガーにLineで送るボタンを設置した

 

以上でLineで送るボタンを設置が完了です。

PC画面からボタンを押すと次のページに移動するだけです。

無料通話・メールアプリ LINE(ライン)

スマホでの表示をしたらこんな感じになります。

スマホ画面

ボタンを押した時がこれです。

Lineで送るボタンスマホ

この画面はスマホのアプリにもよります。

Lineで送るボタンの設置により、誰かにお知らせしていただける確率がUPすることを期待します。

以上、「Lineで送るボタンを好きなサイズに自作して設置する方法!」でした。


コメントをどうぞ

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

アクセストリガーは暮らしの総合エンタメブログです!

こんな人がこのブログを書いています

このブログ「アクセストリガー」の管理人のおかえりなさい @okaerinasainet です。 妻と子ども1人の3人暮らし現役看護師➕ライター兼業のアラフォーパパ。

詳細なプロフィールを見る 

取材・寄稿・ネット対談などの依頼は お問い合わせページ からお願いしますm(__)mまた雑談や相談が出来る友達も募集しています。よろしかったらポチっとだけお願いします。

友だち追加

アクセストリガーの購読はこちらから

SNSをフォローする

follow us in feedly
  • ピックアップ