ナコさんのブログ | nako-log WEB制作のヒントと日常の便利を紹介。WEB制作はWordPressをメインにCSSやコーディングのHOWTOをまとめています。

注目キーワード

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

  1. HOME
  2. WEB制作のヒント
  3. coding
  4. HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
最終更新日：2024.05.29

話題になっているネタを厳選して並べたい
自分のツイートで特定のタイムラインだけ抜粋したい・・・

twitterはつぶやきの埋込APIを提供していますが、タイムライン全て、もしくは１件しか引用できないので自由自在に表示できるマイタイムラインを作ってみました。

ナコ
利用は商用利用含め自由！どこでも使ってくださいね♪


こんな感じのタイムライン風エリアが表示されます。
ソースコード一式は下にダウンロードボタンがありますのでそちらからGETしてください。

目次

「chat_twitter_css.zip」の中身

このページでダウンロードできるzipファイルの中身です。

index.html HTMLのソースファイルです
svgフォルダ アイコンsvgです。https://icomoon.io/を使用しています
function.php WordPress用です。不要な方は削除してください。
icon.png アイコンサンプルです
sample.jpg 画像表示のサンプルです
style.css CSSファイルです
style.scss Sass(SCSS)ファイルです。上のCSSと同じ内容になります。


文字コードは【UTF-8】で作っています。
アイコンはhttps://icomoon.io/を使っています。
フォントVERにするとWordPressのテーマで使っている場合、競合してしまうのでsvgを使用しています。

更新履歴

2018/06/27 Ver.1.0

ソースを公開しました

twitter風チャット画面Ver.1.0をダウンロードする(chat_twiiter_css.zip)

基本のベース

twitter画面のベースを表示します。タイトルエリアは無くてもOKです。
CSS「style.css」は全部をコピペして読み込んでいるCSSの一番最後に貼り付けるかインポート(@import)してください。
SCSS「style.scss」はインポート(@import)しちゃってください。
style.cssってみんな使ってると思うのでインポート時はファイルのリネームをお願いします。

Sass(SCSS)専用カラー変更変数

SCSSの先頭部分にパーツカラーを変更できる変数を用意しました。

コピー


// color
$baseColor:   #58aeed; //ベースカラー

画面枠を作ろう

HTML

コピー


  <!-- ▼▼twitter風ここから -->
  <div class="twitter__container">
    <!-- タイトル -->
    <div class="twitter__title">
      <span class="twitter-logo"></span>
    </div>

    <!-- ▼タイムラインエリア scrollを外すと高さ固定解除 -->
    <div class="twitter__contents scroll">
    <!-- ここに吹き出しやスタンプのタグを追加していく -->
    </div>
    <!--　▲タイムラインエリア ここまで -->
  </div>
  <!--　▲twitter風ここまで -->

class=”twitter__contents scrollにするとタイムラインエリアの高さが固定になりスクロールバーが表示されます。

表示


CSSのwidth指定を外すと横幅いっぱいに表示されます

CSS

コピー

.twitter__container {
  padding: 0;
  background: #ffffff;
  overflow: hidden;
  //max-width: 400px; ←コメントアウトする
  margin: 20px auto;
  font-size: 80%;
  border: solid 1px #eeeeee;
}


画像を表示する

画像のサイズは自由です。角丸に勝手にトリミングされます。
GIFアニメを使っても面白そうですよ。

HTML

コピー


      <!-- 記事エリア -->
      <div class="twitter__block">
        <figure>
          <img src="icon.png" />
        </figure>
        <div class="twitter__block-text">
          <div class="name">うさきち<span class="name_reply">@usa_tan</span></div>
          <div class="date">1時間前</div>
          <div class="text">
            残業でお腹空いたから朝までやってるお店でラーメン食べることにした(^o^)神の食べ物すぎる・・うまぁ
            <div class="in-pict">
              <img src="sample.jpg">　//ここに画像を配置
            </div>
          </div>
          <div class="twitter__icon">
            <span class="twitter-bubble">1</span>
            <span class="twitter-loop">4</span>
            <span class="twitter-heart">122</span>
          </div>
        </div>
      </div>

表示


WordPressの記事で使いたい方

WordPressはデフォルトだとテキストモードで編集した時も自動的にPタグがはいってしまいます。
そのまま貼り付けると改行部分に勝手にPタグが入ってレイアウトが崩れてしまいます。

そこでfunction.phpにショートコードで囲んだ範囲のpタグを消す処理を追加します。

function.phpの一番下に追加

コピー


//////////////////////////////////////////////////
//ショートコードで囲んだ範囲のp,&nbspタグを消す
//////////////////////////////////////////////////
function noFunc( $atts, $html = null ) {
	$html = str_replace( '<p>' , '' , $html );
	$html = str_replace( '</p>' , '' , $html );
	$html = str_replace( '&nbsp' , '' , $html );
	return $html;
}
add_shortcode('no', 'noFunc');

記事のテキストモードで挿入時ショートコードで囲む

コピー



  <!-- ▼twitter風ここから -->
  <div class="twitter__container">
    <!-- タイトル -->
    <div class="twitter__title">
      <span class="twitter-logo"></span>
    </div>

    <!-- ▼タイムラインエリア scrollを外すと高さ固定解除 -->
    <div class="twitter__contents scroll">

      <!-- 記事エリア -->
      <div class="twitter__block">
        <figure>
          <img src="icon.png" />
        </figure>
        <div class="twitter__block-text">
          <div class="name">うさきち<span class="name_reply">@usa_tan</span></div>
          <div class="date">1時間前</div>
          <div class="text">
            残業でお腹空いたから朝までやってるお店でラーメン食べることにした(^o^)神の食べ物すぎる・・うまぁ
            <div class="in-pict">
              <img src="sample.jpg">
            </div>
          </div>
          <div class="twitter__icon">
            <span class="twitter-bubble">1</span>
            <span class="twitter-loop">4</span>
            <span class="twitter-heart">122</span>
          </div>
        </div>
      </div>

      <!-- 記事エリア -->
      <div class="twitter__block">
        <figure>
          <img src="icon.png" />
        </figure>
        <div class="twitter__block-text">
          <div class="name">うさきち<span class="name_reply">@usa_tan</span></div>
          <div class="date">2018/06/24 5:34</div>
          <div class="text">
            睡眠２時間で出社なんだけど…
            <a href="https://nakox.jp/">https://nakox.jp/</a>
          </div>
          <div class="twitter__icon">
            <span class="twitter-bubble">1</span>
            <span class="twitter-loop"></span>
            <span class="twitter-heart"></span>
          </div>
        </div>
      </div>

    </div>
    <!--　▲タイムラインエリア ここまで -->
  </div>
  <!--　▲twitter風ここまで -->

完成！！



twitter風チャット画面Ver.1.0をダウンロードする(chat_twiiter_css.zip)

LINE風もあるよ！
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)
記事はこちら