朝からげっそりしているがちゃまにあですどーもおはようございます。疲れが抜けないんだよう・゚・(PД`q。顔とか腕とかべたべたするこの湿度。これはあせもからのアトピーコンボにつながるよね。)クーラー使うと冷えすぎるしなー。今日は昨日の記事の続き。2014はてなさん紹介してくれたけど、むしろあれは前振りくらいの感じです(笑)ほんと力尽きたんですごめんなさい(結局寝付けなかったんだけど)。こんな風にしましたこれが最終形。前のイラストは、「口の中に表示させようという体で作ってたけどしっくり来なくて急遽吹き出しつけました」というやつだったんですが、今回は最初から吹き出しつけたので顔小さめ。絵はkritaさんを使って描きました。無料って信じられない。kritaのダウンロードページ今の所ゆるい絵しか描いてないけど、こんだけ楽しいと昔好きだったアニメの絵とか描きたくなりますね(笑)まあそれはともかく。今回は縦400px、横300pxの画像を作りました。この辺はサイドバーに合わせたサイズで作っていただければいいんですが、あまり小さいとツイートが見にくくて使えないのでご注意を。うちのサイドバーは白なので、背景透過pngで保存。それをフォトライフにアップロードします(透過部分真っ黒に表示されるけど気にしない)。フォトライフでその画像を右クリックして、画像のURLをコピー。後で使うのでメモ帳などに貼り付けておきます。ツイッター公式のウィジェットを使うツイッター公式の設定画面に「ウィジェット」っていう項目があります。そこでウィジェットを新規作成。ユーザー名とオプション、テーマだけ決めたら後はどうせいじるので適当でOKです。コードを発行してもらわないと始まらない!こんなのができます。js,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>これも後で使うのでメモ帳にコピペ。サイドバーにモジュール追加はてなダッシュボードのデザイン設定で、サイドバーに「HTML」を追加。そこにまず以下の文章をコピペします。src="フォトライフのURLをペースト"></div>3行目にさっきメモ帳に貼っといた画像のURLを貼り付け。このまま続けてさっきコピーしたtwitterウィジェットのコードも貼ります。js,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の方のコードを少しいじります。公式に書いてあったやり方をそのままするだけです。>の「<」と「>」の間に以下の文章をコピペ。date-tweet-limitの数字は「取得するツイートの数」をあらわします。今回は吹き出しっぽくしたかったので1個にしました。---*追記*---ブコメで「表示のガイドライン的にどうか」というご指摘あったのでご報告。いくつか条件あるうちの1つ、「ロゴorフォローボタンは常に表示しろ」をクリアしてなかったので、上記の「noheader」を消して、フォローボタンを表示させました。画像にツイッターロゴを埋め込むとか(画像使用には別のルールがあるのでご注意を)。あとはひっかかっていないはず!詳しくはこのページ参照。(id:C_L)さん、ご指摘ありがとうございました!---*追記終了*---あ、ここで注意が1つ。前後に半角スペースが入るようにコピペしましょう!!ここずれると反映されません。あとは画像とtwitterの間と文末にもちょっと追加して、最終的にはこうなります。js,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></div></div>前後を改行で挟んだやつが最終追加部分です。ページ上部に戻るボタン(解決・設置編)【ブログカスタマイズ】ツイート表示を復活させてみた【JavaScript】callback関数で躓いてるのだよ【JavaScript】作りたいものができたのでJavaScriptの勉強をいきなり始めてみる注目記事スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。