Twitter公式ウィジェットのカスタマイズ

20160516-04.jpg

どーしてもTwitterのウィジェットの文字(フォント)を
メイリオで表示させたくて4月上旬から試行錯誤を繰り返していたんですが…
5月12日 についにフォントを変えられている方を発見しまして
その方の記事を参考に…フォントをメイリオにすることに成功!

で、翌日、違うところに欲が出まして、
今度は Pinterest(ピンタレスト)のウィジェットのそれぞれの画像の上下に
スペースを空けたい
という願望 ( プレビュー画面では上下にスペースがあり、
FC2ブロガーさんのブログでも、ちゃんとスペースが空いているブログもある )
が頂点に達し、いろいろ調べてみたら…
ウィジェットに問題があるのではなくて、
テンプレートの仕様の違いだということがわかってきました。

直す箇所がわかれば、これまで2年以上に渡って使って来た
このテンプレート(スキン)にしたかったんですけど、
どこをどう直したらよいのかさっぱり見当もつかず、
未練はありましたが、 Pinterest(ピンタレスト)のウィジェットの各画像の
上下にスペースが空く、このテンプレート(スキン)に変えてみることにしました。

お陰様で、 Pinterest(ピンタレスト)のウィジェットの画像の上下に
スペースが空き、問題は解決したんですが、新たな問題が判明。
今までサイドバーに色がついていたので、白い背景のTwitterのウィジェットに、
枠があるような感覚でいたんですが
Twitterのウィジェットって枠がなかったんですね。
テンプレートのサイドバーの背景の白と一体になって
ツイート上部( ヘッダー )の 「@makunosukeさんのツイート」 や
ツイート下部( フッター )の 「埋め込む Twitterで表示」 が
今まで枠があると思っていただけに、個人的になんだか締まりがない感じに…。

枠をつけようとググっては試すを繰り返して、頑張ったんですけど、
どうやら枠はつけられない仕様なんですね。
出来る事と言えば、ヘッダーやフッターやスクロールバーの削除で、
全然その気がなかったんですけど、もうやけくそで、
それらのカスタマイズのタグをくっつけてみたら…

あれ?スッキリ見えるじゃないの!!

そうか…。Twitterの運営スタッフさんたちのユーザーに
やらせたいことってこういうことだったんだ…ってことに気がついた次第です。
スクロールバーがありませんが、マウス(iPhoneだったら指で)
Twitterのウィジェットの画面をスクロールすると
ツイートの下の方まで見ることが出来ます。
あー、これで念願だった2つの希望
1.ツイッターウィジェットをメイリオに。
2.ピンタレストウィジェットの各画像の上下にスペースを空ける。
…が叶ってスッキリしましたー!
参考にさせて戴いたブログの運営のみなさま、どうもありがとうございました。

ひいろんBLOG Twitter埋め込みタイムラインのカスタム
http://hiiron.sunnyday.jp/sb/log/eid2223.html
ITハット 
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする
http://ithat.me/2016/02/09/js-jquery-twitter-widget-timeline-customize


Twitterウィジェットカスタマイズ

ご参考までに私が使用したコードを下記に記載します。
あくまでもFC2を使っている私の個人的なカスタマイズのコードです。
もしかしたら、このコードを使ってなにか不具合が生じるかもしれませんので、
ご使用になる場合は、現在、使っているコードを、必ずコピペするか
新しいフリーエリアを作成し試して下さい。

まず、テキストエディタを使って、下記 CSS外部スタイルシートを作成します。
ファイル名の拡張子は○○○.css にします。(○○○はたとえばtwitter とか)
編集画面でファイルアップロードします。

CSS外部スタイルシート

/*
twitter timeline style
----------------------------------------------------------------------*/

p.timeline-Tweet-text {
font: 12px/1.3 verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'MS Pゴシック', sans-serif !important;

}


1.以下のコードにファイルアップロードしたURLをコピーして
CSS外部スタイルシートのURLの位置にペーストします。

2.ピンクの部分を削除して、
各自が作成したTwitterウィジェットコードにピンクの部分の太文字
data-chrome="noheader nofooter noscrollbar" 
を付けたし、コピペします。

3.Twitterウィジェット用に作成したプラグインに
1.2.で作ったコードをコピペします。
設定をクリックして保存したら終わりです。

私がFC2のプラグインに使っているコード

<div class="tweettext">

<script>
function changeTwitterWidgetDesign(){
var $twitter_widget = $('iframe.twitter-timeline');
var $twitter_widget_contents = $twitter_widget.contents();

if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
$twitter_widget_contents.find('head').append('<link href="CSS外部スタイルシート" rel="stylesheet" type="text/css">');
}

else {
setTimeout(function(){
changeTwitterWidgetDesign();
}, 350);
}
}

changeTwitterWidgetDesign();
</script>

<a class="twitter-timeline"height="500px"href="https://twitter.com/ユーザー名"data-chrome="noheader nofooter noscrollbar" data-widget-id="××××××××××××××××××">Tweets by @ユーザー名</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>



</div>


ピンクの部分はTwitterウィジェットで作成したコードに
data-chrome="noheader nofooter noscrollbar" 
( ヘッダー削除、フッター削除、スクロールバー削除)を付け足したものになります。

このコードについてはこちらのページを参考にしました。
埋め込みユーザータイムライン | Twitter Developers
https://dev.twitter.com/ja/web/embedded-timelines/user

他の指定に関しては、よくわかっておりませんのでお答えすることが出来ません。
あくまでも自己流ですので参考程度にお読みになっていただければ幸いです。

関連記事
web拍手 by FC2 ブログランキング・にほんブログ村へ ← ポチっとして下さると励みになります。


テーマ: Twitter | ジャンル: コンピュータ

タグ

  
静岡ホビーショー 2016 | Home | 静岡ホビーショーのおみやげ

コメント

はじめまして

はじめまして。
知り合いに、ひいろんのブログの話題を書かれてる方がいるって聞いて
きちゃいました(^^;

いまいち説明不足の記事でしたがお役に立てて良かったです(^^
Twitterウィジェットの仕様変更は
今までも数回行われてるんで今後も変わる可能性ありますけど(^^;

同じく拘りを持たれてる方がいらっしゃって嬉しいです♪

2016/06/07 (Tue) 19:21 | ひいろん #qmfAeVhw | URL | 編集
ひいろんさんへ

きゃー!!ひいろんさん、どうも、こんにちは!
何回か伺ったので、なんだか初めてではないような気がして…。
いや、でも、改めて初めまして。
その節は本当にお世話になりましてありがとうございました。
いろいろ参考にさせて戴き念願叶ってTwitterのフォントを
メイリオにすることが出来ました。
4月以降ずーっと悩んでいたので、ひいろんさんのページに
辿り着いた時には天国にも昇るような幸せな気持ちでいっぱいでしたー!

あの記事からでは、メイリオにする方法がわからず、
コメント欄でお尋ねしようかと迷いましたが、
いきなり教えてと言うのも失礼かとも思いまして
正直に申しますと、ちょっとソースの方を覗かせて戴きました。
勝手に覗いてしまってお気を悪くされたら申し訳ありません。
先にお断りすれば良かったと後悔しております。
でもお陰でフォントをメイリオにすることが出来て本当に嬉しかったです。

またそのようなことがありましたら、今度はコメントさせて戴きますので、
その時はよろしくお願いします。
今回は本当にありがとうございました。

2016/06/08 (Wed) 11:21 | マク→ひいろんさん #GWMyNl/. | URL | 編集

コメントの投稿


非公開コメント