サイドバーに、twitterのタイムラインを表示させてみました。
さり気なくバーの一番下に置いてあります。
いろいろ非表示に設定してあるので、デフォルトよりもシンプルに見えると思います。
あと枠で囲って背景を変えてあるので、少しスッキリ見えるでしょうか。
うちと同じような表示にする方法を紹介します。
twitterのタイムラインを表示する方法自体はここでは割愛します。
私はこちらの記事を参考にしました。
アメブロに twitterタイムライン を表示する【ameblo ツイッター 埋め込み】
https://keimatsumoto.com/twitter-timeline-setting-ameblo/
上記の手順で作成したコードに一手間加えます。
枠と背景を設定するため、コードを<DIV>で挟みます。
<DIV style="background:#ffffff; background-image:url(背景にしたい画像のURL); border:#CCCCCC 1px solid;"><コード></DIV>
background→背景色
background-image→背景画像
border→枠
枠はsolidをdoubleにすれば二重線、dashedで破線、dottedで点線などに変わります。
線を太らせたければ1pxの数字を変えてみて下さい。
背景を変えるためには、twitterで生成したコード自体も少し変えなければいけません。
生成したコードはだいたいこんな感じだと思います。
<a class="twitter-timeline" data-lang="ja" data-width="300" data-height="300" data-link-color="#19CF86" href="twitterURL">twitterアカウント</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
(ピンクの部分は各々違っていると思います)
<a class="twitter-timeline" (以下略)
ここに、
data-chrome="transparent"
と書き加えて下さい。これはウィジェットの背景色を透明にし、DIVで設定した背景が見えるようにするためのタグです。
DIVに背景を設定していない場合は、サイドバーに設定されている背景が表示されます。
背景が白(もしくは黒)いままで良い方は書き加えなくていいです。
ついでにdata-chrome="ここ"にはtransparent以外にも
noheader →ヘッダー非表示
nofooter →フッター非表示
noborders →境界線非表示
などを設定できます。
これらを全て非表示にすると、私と同じ表示になります。
私と同じ表示にするコードはこちら。
ピンク色の部分はご自分の趣向に合わせて書き換えて下さい。
<DIV style="background:#ffffff; background-image:url(背景にしたい画像のURL); border:#CCCCCC 1px solid;"><a class="twitter-timeline" data-lang="ja" data-chrome="noheader nofooter noborders transparent" data-width="300" data-height="300" data-link-color="#19CF86" href="twitterURL">twitterアカウント</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></DIV>
出来上がったコードを「フリープラグイン」に貼り付ければ完了です。
参考までに。