blogger

Twitterのタイムライン埋め込み時の「ヘッダー」と「フッター」を削除（非表示）する方法！

 

BloggerのサイドバーにTwitterを埋め込むとタイムラインを表示できるようになります。

【参考】BloggerのサイドバーにTwitterのタイムラインを埋め込む方法については、コチラの記事で詳しく解説しています。
＞＞＞BloggerにTwitterのタイムラインを埋め込む方法！

Twitterのタイムラインが表示されると動きがでて、おもしろいです。デザイン的にも少しだけ豪華な感じになりました。

ただ、デフォルトで埋め込んだタイムラインの「ヘッダー」と「フッター」のデザインに、若干の違和感があります。

今回の記事！

■Twitterのタイムラインを埋め込んだ際にできる「ヘッダー」と「フッター」を削除する方法についてまとめてみました！

Twitterタイムラインの「ヘッダー」と「フッター」とは？

Twitterのタイムラインを埋め込むと、タイムラインの上下に「ヘッダー」と「フッター」も埋め込まれ、ごちゃごちゃした感じになってしまいます。

今回、ヘッダー部分とフッター部分を削除（非表示）し、シンプルなタイムライン表示にカスタマイズします！

Twitterタイムラインのカスタマイズ！

Twitterのタイムラインをカスタマイズするコマンドがいくつかあります。ヘッダー部分とフッター部分を非表示にするコマンドは、以下の通りです。

【ヘッダー非表示】
data-chrome=”noheader”

【フッター非表示】
data-chrome=”nofooter”

今回は、ヘッダー部分とフッター部分の両方を非表示にするので、記述は以下のようになります。

 【ヘッダーとフッター両方を非表示】
data-chrome=”noheader nofooter”

■カスタマイズコマンドの挿入手順

【１】Twitterのタイムラインのコードを埋め込んだBloggerのウイジェットを編集します。

【２】開いたタイムラインのコードに【 data-chrome=”noheader nofooter” 】を挿入します。

※1  [<a class="twitter-timeline"]の後ろに挿入して下さい。
※2  カスタマイズコマンドの前後に「半角スペース」を入れて下さい。
※3  サンプル画面で［data-］と［chrome］の間にスペースがあるように見えますが、Bloggerの仕様です。実際には、スペースはありません。

【３】編集したウィジェットを「保存」して完了です。

■カスタマイズ結果の確認

【１】プレビューボタンを押下します。

【２】表示結果を確認します。うまく表示されていない場合は、「カスタマイズコマンドの挿入手順」をやり直します。

以上で完了です。

■本記事は、Bloggerでの動作確認結果となります。Twitterのタイムラインのカスタマイズコマンドは、どのプラットフォームでも同様に有効だと思われますが、十分注意してカスタマイズして下さい。