PlusOne Blog

2021年1月に投稿した記事

【HTML】youtube チャンネル登録ボタンの設置

youtube のチャンネル登録ボタンの設置方法についての備忘録
 

 
Google の下記公式ページにアクセスします。
https://developers.google.com/youtube/youtube_subscribe_button
 

 
「チャンネル名または ID:」にチャンネルID または アカウントIDを入力します。

※チャンネルID または アカウントIDは、youtubeのメニューの「設定」→「詳細設定」から確認できます。
https://www.youtube.com/account_advanced
 
チャンネルID または アカウントIDを入力すると、「プレビュー」と「コード」が更新されます。

 
コードをコピーして、任意の箇所にペーストすればチャンネル登録ボタンが表示されます。
 
 
レイアウト、テーマ、チャンネル登録者数の表示を設定することもできます。
 

 

この記事を読む

【HTML】twitter シェアボタンのカスタマイズ

twitter シェアボタン を設置する時に、投稿する twitter に任意のテキストを挿入するなどのカスタマイズしたときの備忘録。
 

 

オリジナルの twitter ボタン の作成

twitter シェアボタンをカスタマイズするには、通常のtwitterサイトからの作成より独自のボタンを作成する。
まずは、ノーマルなtwitter シェアボタンは次のように作成する。

 <a class="tw_share" href="http://twitter.com/share" target="_blank">
   ツィートする
   (テキストの代わりに画像を挿入することもできます
    <img src="画像リンク" alt="画像が表示されなかった場合の代替テキスト" />
   )
 </a>

CSSで装飾

.tw_share {
  font-weight: bold;
  padding: .8em 1.6em;
  margin: 0.4em;
  background-color: #00acee;
  color: #fff;
  text-decoration: none;
  border-style: none;
  border-radius: 5px;
}
.tw_share:hover {
  opacity: 0.6;
  transition: 1.0s ;
  color: #fff;
}

 
次のようなボタンが作成されます。
ツィートする

 

オリジナル項目をつける

作成した twitter シェアボタンの href のURLの後ろに、次のパラメータを付けて、カスタマイズすることができます。
 
 url:共有したいページのURL
 text:ページタイトルなどの共有したい文章
 hashtags:設定したいハッシュタグを入れます。#は不要。カンマ区切りで複数設定可能
 via:TwitterアカウントIDを設定しておくと、「@◯◯さんから」と表示されます。@は不要
 related:フォローを促したいTwitterアカウントのIDを設定。ツイート後に「おすすめユーザー」として表示されます。IDの後にコロン(:)をつなげて説明文を加えることも可
 
■パラメータを繋げるときは、「&」で繋ぐ

 href=”http://twitter.com/share?url=◯◯&text=◯◯&via=◯◯&hashtags=◯◯

hashtags(ハッシュタグ)を複数設定したいときは、「,」で区切ります。
 
■スペースや改行を使いたい場合
スペースや改行等の特殊文字を使う場合、URLエンコードで入力します。
 スペース:%20
 改行:%0a
 %:%25
 &:%26
 
■Wordpressで、タイトルやURLを入力するとき
・URL

url=<?php the_permalink(); ?>

・タイトル

 text=<?php echo get_the_title(); ?>

 
■ツイート画面を別ウィンドウに表示して、本場の twitter のようにする

 onClick=”window.open(encodeURI(decodeURI(this.href)), ‘tweetwindow’, ‘width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1’); return false;”

 

オリジナルの twitter シェアボタン

上記を使って次のようなボタンが作成できます。

<a class="tw_share" href="https://twitter.com/intent/tweet?url=https://plus1jp.com&amp;text=プラスワンのホームページです。%0a&amp;via=p1tweet1&amp;related=p1tweet1:介護保険業務支援ソフトウェアを作っている会社です&amp;hashtags=プラスワン,介護支援ソフトonclick="window.open(encodeURI(decodeURI(this.href)), 'tweetwindow', 'width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1'); return false;" target="_blank" rel="nofollow">結果をシェアする</a>

結果をシェアする
 

 

この記事を読む

【HTML/JS】iphoneでvideoが自動再生されない

HTMLのvideoタグで動画を自動再生するとき、iphoneのsafariでは自動再生されなかったので、その時の対応の備忘録
 

 
videoタグのvideoを自動再生するとき、autoplay属性を付与する。

  <video id="myvideo" src="●●●/×××.mp4" autoplay></video>

 
ただし、これではiphoneでは自動再生されない。
次の2つの属性を付与する必要がある
・playsinline
 ビデオをインラインで再生する。昔は、iOSではインラインで再生されなかったが、インラインで再生できるようになった。自動再生するには、インラインで再生が必須。
・muted
 ページ遷移でいきなり音が出るのはユーザビリティが非常に悪いので、音がでないようにしておかなければ自動再生できない仕様となっているらしい。
 
★→autoplay、playsinline、muted属性3つセットで次のように記述しないと、自動再生されない。

  <video id="myvideo" src="●●●/×××.mp4"  autoplay muted playsinline></video>

 
ただし、上記記述をしてもiphoneで自動再生されなかった。
何かしらの影響で、muted属性がうまく認識されなかった可能性があるので、jsで強制的にmuteにしてみたら、自動再生されるようになった。

  $(function() {
    var video = $('video').get(0);
   (または
     var video = $('#myvideo'))
    video.muted = true;
    }

 
今回は、php を使って場合分けを行い、videoタグをつけていたため、
タイミング的にvideoタグのmuted属性をうまく読み込めなかった可能性がある。
こういった場合は、jsで読み込み完了時に強制的にmutedを付与すれば解決した。
 

 

この記事を読む

【JavaScript】fadeIn()のとき、displayをflexにする方法

fadeIn で、要素を表示すると、display が block になってしまい、
flex 等にしている要素だと不都合なので、この解決方法を調べたので備忘録として
 

 
非常に単純で、fadeIn の後に css()を続けて記載してやれば良い。

  $(element).fadeIn().css('display','flex');

jQueryは、こんな風に繋げて記載できるので楽。やはり、DOM要素を操作するにはjQueryは秀悦!
 
ちなみに、こういう書きかたもある。

 $(element).next(element).slideDown({
   start: function () {
         $(this).css({display: "flex"})
            }
 });

 

 

この記事を読む
記事一覧に戻る