Museで手軽にWebサイト制作

Twitterボタンの設置

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Twitterに関連する、tweetボタンやフォローボタンなどをの設置方法や、テストに関連する注意項目などを解説します。
講師:
07:13

字幕

このレッスンでは Twitter 関連の ボタンの設置について解説します 今はですね こうしたウェブサイトもつくるだけでなく 作った後に ソーシャルメディアで 拡散してもらうのが大変重要となっています その中でですね つぶやきというかたちで 非常に多くのユーザーに使われているのが Twitter ですね Muse では 簡単に Twitter 関連のボタンですね 連携したボタンを作ることができます そうしたソーシャル関連の ボタンを作る時なんですが 様々なページですね それぞれに置いてると 作業量が増えてしまいます どのページを見ている時もすぐに ソーシャルにアクセスできるように ソーシャル関連のボタン 原則として マスターに置いておくのをお勧めします ではマスターのページを開けます そしたらマスターの中の フッターのエリアですね この部分に ソーシャル関連のボタンを置いて 全部のですね ページに反映させようと思います では「ウィジェットライブラリ」これを開けて ソーシャルのフォルダーを開けます その中に Twitter のボタンんですね 二種類入ってます 「Twitter: フォロー」というものと 「Twitter: ツイート」という ものですね この二つなんですが まず フォローボタン こちらからやってみましょう では 「Twitter: フォロー」を ドラッグアンドドロップで持ってきます この Twitter の フォローボタンですが 自分のですね Twitter ID を 入れてもらって これをクリックしてもらうと クリックした人にですね 自分がフォローされるという そのようなボタンとなっています このように 吹き出しの部分に この ID は何人に フォローされてますよという 表示も出るようになってます ではですね このオプションの項目 設定しておきましょう まずこの フォロー@ とありますが ここが Twitter の ID に なります 今ですね デフォルトで AdobeMuse の ID となってますが これ本当はですね サイトを作る時は 自分の Twitter ID の @から後ろの部分ですね ID だけをここに入力するとこれが 自分のフォローボタンとして機能します そしてサイズですね 今 中 となってますが これ「大」にすると ボタンのサイズがですね 変化します このように目立たせたい時には 大のボタンを使ってもいいですし 今回は 中のままにしておきましょう そしてですね ユーザー名を表示とありますけど これがですね 入ってると この何々さんをフォローと このような表示になります これ外しておくと ただ単にフォローするといった表示が 出てくるので このですね サイト全体を フォローするというニュアンスにしたい時には このようにユーザー名を 消してもいいかもしれません 今回は入れておきましょう そしたらですね このボタンですね この吹き出しが出た場合を含めた上で レイアウトを作っておきます では ドラッグして フッターの中ですね この下の方に 配置しておきましょう そしたら もう一個「Twitter: ツイート」 ボタンというのがあります これもドラッグアンドドロップで持ってきます ツイートボタンな これをクリックすることで Twitter のですね つぶやきの入力画面が出てきて このページを 見に来た人に ツイートしてもらうというボタンですね これかなり重要なボタンとなります では オプションの項目ですね 見ていきましょう まず「シェアする URL」ですが 「現在のページ」というのが入ってると 今開いている そのページ自体をですね ツイートすることになります 例えばですね どこからツイートされても トップページ ホームにリンクするように つぶやいてほしいといったような場合には これがですね「現在のページ」ではなく これ外して 具体的なアドレスですね 例えば ホームのページのアドレスなんかを それを入れておきます 今回はですね ページごとの つぶやきにしておきましょう では サイズですね これは「大」「中」両方あります 今回は「中」にしておきます そして ツイートテキストとありますが これですね この部分に入った テキストが そのまま つぶやきの欄の中に自動的に 入力されるというものになっています これあまり長くしすぎると ツイートしてくれる方が 追加してですね 書き込む余地が減ってしまうので 短めにしておきましょう 例えば こんな感じですね メッセージを入れておくと このようなことが可能となっています そしてこの「おすすめ@」には こちらと同じですね 自分の Twitter ID を 入れときます で一点 この カウントを表示 というものなんですが 今 オン になってますけど これ何件ツイートされたかというカウント 出てないですよね これなんですが 実は Twitter 本体の方で このカウントを表示するのを 廃止してしまったんですね なので Muse の機能としてはカウントを 表示 というチェックはあるんですが これ入れていても 何件ツイートされたか 表示されません ここですね ちょっとややこしいので これはどちらでも変わらないんですが ツイートの数は表示されないというのを 覚えておいてください ではですね このボタンも 同じ位置に持ってきて 配置しておきます そしてこれですね マスターにボタンが入っていると 他のページにも自動的に このようなかたちで ボタンが配置されます ではですね このボタン これをですね ブラウザーでページをプレビューして 動作を見てみましょう そしたら開いたページで 例えば「ツイート」ですね これをクリックしてみると このような窓が開いて そしてですね 自分の Twitter に ログインしていると この部分ですね Twitter のですね ログイン情報が表示されます そしてここにですね 内容を入力して つぶやくことで サイトの内容を拡散してもらうことが 可能となっています 特にですね 日本は Twitter のユーザーが 特に多い国の一つですので 是非とも「ツイート」ボタンですね こちらを用意してください

Museで手軽にWebサイト制作

MuseはWebデザイナー以外でもスタイリッシュなWebサイトを作ることができる画期的なツールです。このコースでは架空のアーティストのニューアルバムのPRサイトを例に、サイトの構成や素材のレイアウト、動画や音声といったリッチメディアの埋め込み方、TwitterやFacebookなどのSNSとの連携、またモバイル機器への対応などを学ぶことができます。

1時間45分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。