9月, 2013年

Twitter埋め込みタイムライン(ウィジェット)カスタマイズ方法

2013-09-25

埋め込みタイムラインの詳しいカスタマイズ方法をご紹介します。コードの作成方法については過去の記事をご覧ください。

Twitterの旧公式ウィジェットから新公式ウィジェットへ設置し直す方法

「埋め込みタイムライン」はTwitterのタイムラインを自分のサイトに表示できるツールです。タイムラインはリアルタイムで更新され、タイムライン上から直接、返信、リツイート、お気に入りに登録することができます。

埋め込みタイムラインのタイプ

ユーザーやお気に入り、」リスト、ハッシュタグのタイムラインを埋め込むことができます。

埋め込みタイムラインの作成

Twitterへログインし、設定のウィジェットページからタイムラインを作成できます。

埋め込みコードの一例です。

<a class=”twitter-timeline” href=”https://twitter.com/vlstaff” data-widget-id=”382837768763604993″>@vlstaff からのツイート</a><script type=”text/javascript”>// <![CDATA[!function(d,s,id){varjs,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>

このコードを埋め込むと以下のようになります。


Twitter埋め込みタイムラインの公式のカスタマイズ方法

公式のカスタマイズについては下記サイトをご覧ください。

埋め込みタイムライン|Twitter Developers

一部抜粋してご紹介します。

カスタマイズは「ウィジェットを作成」で発行されたHTMLタグの中にある<a>タグに情報を追加してできます。

テーマ

data-theme=”dark”またはdata-theme=”light”

リンクの色

data-link-color=”#cc0000″

サイズ(幅・高さ)

「ウィジェットを作成」で調節できます。初期設定では520×600pxです。

width=”300″ height=”500″

インターフェース

data-chrome属性でウィジェットのレイアウトやインターフェースをカスタマイズできます。

・noheader
タイムラインのヘッダーやフォローボタンをなくします。
フォロワーを増やしたい場合は別途ボタンを表示しておきましょう。

・nofooter
タイムラインのフッターやツイートボックスをなくします。
メンションを送ってもらいたい場合は表示しておいたほうがいいです。

・noborders
ウィジェットの周りやツイートの間のボーダー(境界線)をなくします。

・noscrollbar
タイムラインのスクロールバーが表示されないようにします。スクロールができないわけではありませんが、スクロールできない印象を与えてしまう可能性があるのでアクセシビリティやユーザビリティが悪くなる場合があるので要注意です。

・transparent
タイムラインの背景を透明にします。オリジナルの背景画像を使用したい場合、サイトの背景になじませたい場合は便利です。

ボーダー(境界線の色)

data-border-color=”#cc0000″

ツイートの間の境界線やウィジェットの周りの色を指定できます。先ほど紹介した data-chrome で noborders を指定していると、設定しても無視されます。

ツイート数の固定

data-tweet-limit=”5″

表示するツイート数を1から20まで指定できます。指定されている場合、そのツイート数が表示されて、ウィジェットの高さが全てのツイートがスクロールせずに見られるように調整されます。ウィジェットのサイズが固定になるので、サイトの高さにあわせて表示したい場合には不向きです。また、通常のウィジェットは自動更新されますが、表示ツイート数を固定すると、自動更新されません。

おすすめしたいユーザー

data-related=”benward,endform”

返信、リツイート、お気に入り登録の際にユーザーにおすすめしたいユーザーを指定示できます。複数指定が可能ですが、カンマ区切りで指定します。

【まとめ】無料で使えるブログサービス 2013年度版

2013-09-06

2年前に投稿した記事では、情報が古くなってしまったので、追記という形で無料ブログサイトについて紹介します。

【1】livedoor Blog
ライブドアブログ

データ容量が毎日3MBづつ増量されるようになり、長く利用すれば、するほど容量が増える。Evemoteと連携ができる。ひとつのテーマにみんなで答える共通テーマ、お絵描き機能などもある。なお有料版は支払い方法等により料金が異なる。

有料:315円/月(PRO) 840円/月(ADVANCE) 1,890円/月(PREMIUM)
容量:実質無制限
HTML/CSS:○/○
独自ドメイン:△
ライブドアブログ

【2】Yahoo!ブログ
Yahoo!ブログ

ゲストブックがあり、記事と関係ない内容でも書き込みがしやすい。Yahoo!アバターで作成したアバターを自分のブログに表示することができたり、Yahoo!ブログユーザーが自分のブログをお気に入りに登録すると、「ファン」として登録されるといった機能がある。

有料:なし
容量:2GB
HTML/CSS:×/×
独自ドメイン:×
Yahoo!ブログ

【3】JUGEMブログ
JUGEMブログ

テンプレートの種類が豊富で5000種類以上ある。 HTML と CSSが使用可能なのでカスタマイズも自由にできる。画像も一度に3枚同時にアップロードが出来、絵文字も豊富。

有料:315円/月(初期費用:368円)
容量:1GB
HTML/CSS:○/○
独自ドメイン:△
JUGEMブログ

【4】Amebaブログ
Amebaブログ

ブログだけでなく、ゲーム、ミニブログ、コミュニティなどが充実。芸能人・有名人で使用されている方が多い。毎日更新しているブロガーが多いのも特徴の一つ。なお、広告は有料プランに加入した場合、PCモバイルともにはずすことが可能。

有料:画像容量アップコース:189円/月、広告非表示コース:980円/月
容量:2GB
HTML/CSS:×/○
独自ドメイン:×
Amebaブログ

【5】FC2ブログ
FC2ブログ

一定時間ごとに自動下書き機能があるので記事を誤って消してしまった場合も安心。テンプレートは5000種類以上。リアルタイムプレビュー機能があるので確認しながら記事が書ける。

有料:なし

容量:1GB
HTML/CSS:○/○
独自ドメイン:×
FC2ブログ

【6】エキサイトブログ
エキサイトブログ

画像をドラック&ドロップでアップロード出来、500KBを超える写真をアップロードすると自動で縮小される。ブログにバナー広告の表示がない。

有料:250円/月
容量:30MB(最大1GB)ネームカードに登録(無料)すれば1GB
HTML/CSS:△/△(制限有)
独自ドメイン:×
エキサイト

【7】yaplog!
yaplog!

予め用意されているテンプレートのほかにHTMLによるページのカスタマイズも可能。可愛いテンプレートが多く、どちらかというと女性向きなイメージ。

有料:367円/月、2,200円/半年、4,410円/年
容量:1TB
HTML/CSS:○/○
独自ドメイン:△
yaplog!

【8】はてなダイアリー
はてなダイアリー

はてなダイアリーポイントプログラムというものが初期設定であるがそれをはずすとブログに広告が表示されない。しかし90日以上更新がないと広告が入ってしまう。また、携帯電話やスマートフォンでは、有料プランである「はてなダイアリープラス」に未加入の場合は常に広告が掲載されてしまう。

有料:280円/月(プラス)、380円/月(ダイアリープラス+フォトライフプラスセット)
容量:月30MB
HTML/CSS:△(ヘッダーフッターのみ可)/○
独自ドメイン:×
はてなダイアリー

【9】Blogger
Blogger

Googleが運営しているブログサービス。広告表示がなく、1 アカウントで、複数のブログを運営できる。ブログにコメントがあるとメールでお知らせしてくれる機能もある。

有料:なし
容量:1GB
HTML/CSS:○/○
独自ドメイン:○
Blogger

【10】WordPress
WordPress

レンタルサーバーにインストールして利用するWordPressが無料レンタルブログで登場しました。Akismet装備でたいていのスパムは防げます。複数ブログを作成することも可能で、制限はありません。基本的なアクセス解析もできます。

有料:あり
容量:3GB
HTML/CSS:×/△(有料オプション)
独自ドメイン:○
WordPress

【11】忍者ブログ
忍者ブログ

忍者ブログは実質容量無制限。独自ドメイン対応、HTML・CSSを直接編集してテンプレートのカスタマイズも可能、編集エディタも使いやすく高機能です。iPhone、Androidにも対応。基本的な機能は、ほぼ装備されています。

有料:あり
容量:100MB
HTML/CSS:○/○
独自ドメイン:○
忍者ブログ

※一部の有料版は容量の多きさ等により金額が異なります。

2011年度版の記事もご覧ください。

【まとめ】無料で使えるブログサービス 2011年度版

© 2009 山梨県パソコン入門書 ホームページ執事(無料のパソコンオンラインスクール) Theme by ホームページデザイナー Powered by VISUAL LITERACY