サイドバーに埋め込むTwitterをスッキリとした
シンプルなデザインにカスタマイズする方法についてお話しするね！
- まえおき
- サイドバーのTwitterを シンプルにカスタマイズ
- オリジナリティのあるヘッダーにカスタマイズ
- オリジナルのTwitterヘッダー画像にリンクを追加する
- 古いバージョンのコードではできないかもね
- まとめ
まえおき
【前回の にっき。】
前回の日記でね、ブログのサイドバーにTwitterを埋め込んだんだよ。
こんな感じになったよ！ ▼
でもね、▼・ｪ・▼これくらいじゃ満足しないよ？
だってさ？
よそのブログで、もっとシンプルな表示になってるの見たｺﾄあるんだもん！
▼・ｪ・▼調べたよね。
めっちゃ調べて、試しまくったよね。（← けっこう盛ってる）
そんでできたよね！！！ ‧˚₊*̥(∗*⁰͈꒨⁰͈)‧˚₊*̥
だから、▼・ｪ・▼のTwitterみたいにしたい！！
って人に教えてあげるよ！
▼・ｪ・▼やっさすぃー！
サイドバーのTwitterを シンプルにカスタマイズ
どうよ！！
どうなのよ！！
野暮ったいヘッダー部分と、邪魔くさいフッター部分が消えた時
▼・ｪ・▼大興奮だったよね！！
じゃぁ、方法書くね。
コピペするコードは以下。▼
data-chrome="noheader nofooter noborders noscrollbar"
あ、▼・ｪ・▼プログラマーさんとかじゃないから！
細かい理屈とかわかんないからね。
コピペして、いらない部分は削除してね！
- noheader：ヘッダーの表示をしない
- nofooter：フッターの表示をしない
- noborders：呟きと呟きの境目の線を表示しない
- noscrollbar：スクロールバーの表示をしない
コピーしたコードをどこに貼り付けるかっていうと、TwitterウィジェットのHTMLを開いて<a> ～ </a> の間。
▼・ｪ・▼は下の画像みたいにしたよ。
これで保存して反映させたらシンプルTwitterのできあがり！
やったね！(๑•̀ㅂ•́)و✧
オリジナリティのあるヘッダーにカスタマイズ
TwitterウィジェットのHTML画面を眺めてたらさ。
▼・ｪ・▼思い付いたよね！( ✧д✧) ｶｯ!
ただのHTML画面なんだからさ。
画像とか文字とか入れられるよね？？？
そこで、すかさず Photoshop 使って挿入する画像作りましたん！
コレ。
- 作った画像を記事編集の画面でアップロード
- 「編集 見たまま」→「HTML編集」の画面に切り替える
- <p>～</p> で括られた画像のタグをコピー
コピーしたタグをTwitterウィジェットのHTMLの上部に貼り付けるよ！
できあがり！
やったね！(๑•̀ㅂ•́)و✧
オリジナルのTwitterヘッダー画像にリンクを追加する
このままの状態だと、クリックしたときに画像が開くだけなんだよね。
こんな感じ。
クリックできないようにする方法は、▼・ｪ・▼わからないのねん。
なので、クリックしたら▼・ｪ・▼のTwitterに別窓で飛ぶようにしてみたよ！
<a href="https://twitter.com/Twitter ID" target="_blank"></a>
画像コードの<p>タグを挟むようにして、リンクコードの<a>タグを張り付けるの。
これで、Twitterのヘッダー画像をクリックすると、
別窓で自分のTwitterページが開くようになるはずだよ！
やったね！(๑•̀ㅂ•́)و✧
古いバージョンのコードではできないかもね
▼・ｪ・▼さ。
最初、古いバージョンの方のコードで、シンプル表示になるコード試してたん。
でも全然できなくって、(｡･ˇ_ˇ･｡) ﾑｩ…ってなってたんだよね。
で、今回新しくコード取得して試してみたらできたんだよ！！(๑•̀ㅂ•́)و✧
旧バージョンのコードで諦めてた人がいたら、
試しに新しくコード取得し直してみるとできるかもしれないよ！
お試しあれ！( *´罒`* )
まとめ
ブログのカスタマイズってぶっちゃけ手間だよね！
でも、そこで一工夫することで自分のブログに愛着が増すと思う。
▼・ｪ・▼の場合、よくある無料ブログの初期設定デザインのまんまとか、
ブログ続けるモチベーション保てない･･･。
自分のブログ確認するたんびに、(≖ω≖) ってなっちゃう。
はてなブログは、初期設定でも超シンプルで使い勝手もいいと思う。
シェアしてくれてるデザインもお洒落なものが多いし、
機能的にも優れてるものがいっぱいあるよね。
それをそのまま使うのもいいけど、やっぱり自分らしさを表現するとか、
自分の好きなデザイン・機能を取り入れたいなって思うのれす。
- まず自分が楽しむ
- まず自分が心地良くある
自分が楽しめてもいないのに、誰かのために何かをするなんてうまくいかない。
結局、苦しくなったり、辛くなったり、つまらなくなったりして続かないんだよね。
自分が楽しんでる！ 上手くいってる！ だから幸せを御裾分けするよ！
欲しい人は受け取ってﾈ♡(*´꒳`*)
ってくらいで丁度いいんじゃないかな？
今回やったことで、世界で▼・ｪ・▼だけの特別なTwitterに変身したからね！
ニヤニヤしてるよ！(๑￫ܫ￩๑)
お気に入りの Twitter 作ってみてね♡
今回は、この辺でお終いです。
最後までお付き合いくださいまして、ありがとうございました。
情報をｼｪｱしてくださる先人の皆々様に感謝。
どなたさまも素晴らしい Blog Life を楽しまれますように❤
愛と祝福を込めて･･ *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚
ﾟ*｡.ღ ⊹⊱ 𝔏𝔬𝔳𝔢 & 𝔅𝔩𝔢𝔰𝔰 𝔶𝔬𝔲 ⊰⊹ ღ.｡*ﾟ
𝔱𝔥𝔞𝔫𝔨 𝔶𝔬𝔲.
𝔦 𝔩𝔬𝔳𝔢 𝔶𝔬𝔲.
