このサイトに関して




  • 2018/11/08
    ブログを更新しました。
    2018/04/20
    冷やし中華...じゃなかった、Twitterはじめました。


当サイトご利用上の注意

  • 記事へのリンクはご自由になさって結構です。
    但し、画像等、記事内のコンテンツの無断転載、画像への直接リンクによるまとめサイト等他サイトへの転載は固くお断りします。(加計学園問題関連の画像はご自由にお使い下さい。)

    コメントにURLを貼る場合は、「http://」、「https://」を除いて貼り付けて下さい。(NGワードに指定しています。

    上記に関し、詳しくは下記バナーから「当サイトについて」をお読み下さい。



    このブログの趣旨など。コメント欄はゲストブックとしてご利用下さい。


    記事についてご不明な点などはメールでは回答しかねますので、各記事のコメント欄にお願いします。




特設コーナー












外部サイト(その他)

  • 台湾の名前で東京オリンピック参加を!署名活動


    憲法改正を実現する1,000万人ネットワーク 美しい日本の憲法をつくる国民の会

管理人ポータル

大師小同窓会関連












  • 画像を提供、あるいはオリジナル写真を貸して下さる方は管理人までご連絡ください。


我が町!大師の情報

  • 大師の歴史・町名の由来

各種ノウハウ集



私家版スクラップブック

  • ブログ主の個人的スクラップブック集です。

    100円ショップの木箱やディスプレイケースなどを利用したドールハウスのまとめページです。

    メンテナンス中のため一時アクセスを制限しています。

友達の輪・お薦めSHOP

  • CHITIのボディデザイン
    魅せるボディデザイン/カラダ作りの本質とは!?
    川崎市在住のインストラクターが近隣のスポーツ施設や公園・ご自宅でのパーソナルトレーニング受け付けます。




    かわさき楽大師

    ファッション・雑貨の店 「+R」

    ヘアーサロンE'(イーダッシュ)


« 【沖縄】早くもヘタレた玉城デニー県知事、初議会で「公約違反も」 | トップページ | 自衛隊の警備犬とは? »

2018/10/21

【ブログの楽しみ方】ツイッターのツイートをブログ本文に埋め込む【cocolog】

ツイッター(以下、Twitterと表記)のツイートをブログの本文内に埋め込む方法の覚え書きです。

詳しくはこちらのサイト(https://www.howtonote.jp/twitter/embed/index1.html)にて説明されているのですが、実際にテストして気づいたことなどをメモしておきます。

 

  • HTMLタグの取得
  • 幅の調整、センタリング(右寄せ、左寄せ)、背景色の変更方法

 

Twitterには他のサイトに貼り付けるための「HTMLタグ」を提供する機能があり、ブログへの貼り付け方は、ココログでしたら、「HTMLの編集」モードに切り替えて、そのタグを貼り付けるだけです。これは、例えば、アフィリエイトのタグとか、他社の「拍手ボタン」や「ブログランキングのボタン」を貼り付けるのと全く同じ操作方法です。

Twitterを利用していない人でも、誰かのツイートからタグを取得することは可能です。

 

 

 

 

HTMLタグの取得

下はTwitterにログインしていない状態で操作したものです。

 

Tweet_embed01

(図-1)

 

ログインしていると、プルダウンボタン(下向きの「>」)をクリックするともっと多くのメニューが表示されますが、ログインしていない状態、つまり、Twitterを利用していない方でも上の2つのメニューは表示されます。ここで「ツイートをサイトに埋め込む」をクリックすると、HTMLタグが表示されます。

 

下は別のツイートですが、これをコピーしてブログの編集画面(「HTMLの編集」画面)に貼り付けるだけです。

 

Tweet_embed04

(図-2)

「元ツイート」とは、リプライをつけられた側のツイートなので、一つ上のツイート。「メディアを含める」の「メディア」とは添付された画像や動画などです。

 

幅の調整、センタリング(右寄せ、左寄せ)、背景色の変更方法

ここでHTMLタグを見てみます。図-2で「元のツイートを含める」だけチェックを外しました。)

 

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">発展途上国→先進国の郵便代を先進国が一部負担するルールは理解できなくもないが、中国は都合のいいときだけ発展途上国を利用している。これはアメリカが不公平だと主張するのも当然。年間330億円余りも差額を負担しているとは!<a href="https://t.co/cQ8fWZdbSe">https://t.co/cQ8fWZdbSe</a><br>(画像は記事をイラスト化したもの) <a href="https://t.co/hrN02fvnNY">pic.twitter.com/hrN02fvnNY</a></p>&mdash; 大師100 (@Daishi_hundred) <a href="https://twitter.com/Daishi_hundred/status/1052894296083333122?ref_src=twsrc%5Etfw">2018年10月18日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

形式としてはツイート全体が<blockquote>~</blockquote>で囲まれていることが分かります。

また、ツイートに書き込まれている文字列も全てコピーされています。ブログの中にテキストとして書き込まれることになるので、Googleなどの検索対象となります。また、もしこのツイートが消されても、テキストはブログ記事に内に残ります。

 

ブログ内に組み込まれたツイートは自動的に500pxの幅になると、上にご紹介したサイトに書かれていました。

ブログ主が使用しているブログデザインは元々500pxの幅なので、このままコピペしてもはみ出すことはありませんが、ツイートの幅を好みのサイズにカスタマイズ(変更)することも可能です。

 

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"■■ここに要素を追加■■>(以下略)

 

 

幅を350pxにする場合は「■■ここに要素を追加■■」と書いた部分に「width="350"」と書きます。

挿入されたツイートを本文の幅の中央にセンタリングする場合は、「align="center"」と書きます。(左詰め:align="left"〔規定値〕、右詰:align="right"

要素は複数組み合わせが可能なので、幅350pxでセンタリングする場合は「width="350" align="center"」と書けばいいことになります。(要素と要素の間には必ず半角スペースを入れること。)

なお、「data-theme="dark"」を追加すると、枠内の白黒が反転し、背景が黒、文字が白くなります。

 

【width="350" align="center"】

下に表示されているのは組み込まれたツイートです。

 

 

上の部分は、編集画面では下のように表示されていますが、ブログ記事を閲覧した時には枠などが表示されます。

画像はリンクが貼られているだけだと分かります。(「pic.twitter.com/hrN02fvnNY」の部分)

 

Tweet_embed06

(図-3)

 

なお、閲覧した際、そのツイートをTwitterで表示させたい場合、下のように、ツイートした時間や日付が表示されている部分をクリックすると、そのツイートが自動的に別ウィンドウ(別タブ)で表示されます。(上部の「Donald J. Trump」の部分をクリックすると、トランプ大統領のTwitterのトップが表示されます。

 

Tweet_embed02

(図-4)

 

 

 

 


 

« 【沖縄】早くもヘタレた玉城デニー県知事、初議会で「公約違反も」 | トップページ | 自衛隊の警備犬とは? »

コメント

コメントを書く

(ウェブ上には掲載しません)

« 【沖縄】早くもヘタレた玉城デニー県知事、初議会で「公約違反も」 | トップページ | 自衛隊の警備犬とは? »

サイト内検索
ココログ最強検索 by 暴想
2018年11月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

sponsored link


ドールハウス工作おすすめ参考図書

ドールハウス工作おすすめアイテム(材料・工具)

カテゴリー

無料ブログはココログ