▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

Twitterをシンプルな表示にするカスタマイズ

f:id:bless-you:20161101021725j:plain

 

 

サイドバーに埋め込むTwitterをスッキリとしたシンプルなデザインにカスタマイズする方法についてお話しするね!

 

 

 

 

 

まえおき

 

 【前回の にっき。】

www.xn--28j2a0gvbiy.com

 

前回の日記でね、ブログのサイドバーにTwitterを埋め込んだんだよ。

 

こんな感じになったよ!

f:id:bless-you:20161101014622j:plain

 

 

でもね、▼・ェ・▼これくらいじゃ満足しないよ?

 

だってさ?

よそのブログで、もっとシンプルな表示になってるの見たコトあるんだもん!

 

▼・ェ・▼調べたよね。

めっちゃ調べて、試しまくったよね。(← けっこう盛ってる)

 

 

そんでできたよね!!! ‧˚₊*̥(∗*⁰͈꒨⁰͈)‧˚₊*̥

 

 

だから、▼・ェ・▼のTwitterみたいにしたい!!

って人に教えてあげるよ!

▼・ェ・▼やっさすぃー!

 

 

サイドバーのTwitterを シンプルにカスタマイズ

 

f:id:bless-you:20161101021725j:plain

 

どうよ!!

どうなのよ!!

 

野暮ったいヘッダー部分と、邪魔くさいフッター部分が消えた時

▼・ェ・▼大興奮だったよね!!

 

じゃぁ、方法書くね。

 

コピペするコードは以下。

data-chrome="noheader nofooter noborders noscrollbar" 

 

あ、▼・ェ・▼プログラマーさんとかじゃないから!

細かい理屈とかわかんないからね。

コピペして、いらない部分は削除してね!

 

  • noheader:ヘッダーの表示をしない
  • nofooter:フッターの表示をしない
  • noborders:呟きと呟きの境目の線を表示しない
  • noscrollbar:スクロールバーの表示をしない

 
コピーしたコードをどこに貼り付けるかっていうと、TwitterウィジェットのHTMLを開いて<a> ~ </a> の間。

▼・ェ・▼は下の画像みたいにしたよ。

 

f:id:bless-you:20161101023748j:plain

 

これで保存して反映させたらシンプルTwitterのできあがり!

やったね!(๑•̀ㅂ•́)و✧

 

 

オリジナリティのあるヘッダーにカスタマイズ

 

TwitterウィジェットのHTML画面を眺めてたらさ。

▼・ェ・▼思い付いたよね!( ✧д✧)カッ!

 

ただのHTML画面なんだからさ。

画像とか文字とか入れられるよね???

 

そこで、すかさず Photoshop 使って挿入する画像作りましたん!

 

コレ。

f:id:bless-you:20161101025653j:plain

 

  • 作った画像を記事編集の画面でアップロード
  • 「編集 見たまま」→「HTML編集」の画面に切り替える
  • <p>~</p> で括られた画像のタグをコピー

 

 

f:id:bless-you:20161101071534j:plain

 

 

コピーしたタグをTwitterウィジェットのHTMLの上部に貼り付けるよ!

 

f:id:bless-you:20161101071854j:plain

 

できあがり!

やったね!(๑•̀ㅂ•́)و✧

 

 

オリジナルのTwitterヘッダー画像にリンクを追加する

 

このままの状態だと、クリックしたときに画像が開くだけなんだよね。

こんな感じ。

f:id:bless-you:20161101072325j:plain

 

 

クリックできないようにする方法は、▼・ェ・▼わからないのねん。

なので、クリックしたら▼・ェ・▼のTwitterに別窓で飛ぶようにしてみたよ!

 

 

<a href="https://twitter.com/Twitter ID" target="_blank"></a>

 

f:id:bless-you:20161101073631j:plain

 

画像コードの<p>タグを挟むようにして、リンクコードの<a>タグを張り付けるの。

これで、Twitterのヘッダー画像をクリックすると、別窓で自分のTwitterページが開くようになるはずだよ!

やったね!(๑•̀ㅂ•́)و✧

 

 

古いバージョンのコードではできないかもね

 

▼・ェ・▼さ。

最初、古いバージョンの方のコードで、シンプル表示になるコード試してたん。

でも全然できなくって、(。・ˇ_ˇ・。)ムゥ…ってなってたんだよね。

で、今回新しくコード取得して試してみたらできたんだよ!!(๑•̀ㅂ•́)و✧

 

 

旧バージョンのコードで諦めてた人がいたら、試しに新しくコード取得し直してみるとできるかもしれないよ!

お試しあれ!( *´罒`* )

 

 

まとめ

 

ブログのカスタマイズってぶっちゃけ手間だよね!

でも、そこで一工夫することで自分のブログに愛着が増すと思う。

 

▼・ェ・▼の場合、よくある無料ブログの初期設定デザインのまんまとか、ブログ続けるモチベーション保てない・・・。

自分のブログ確認するたんびに、(≖ω≖) ってなっちゃう。

 

はてなブログは、初期設定でも超シンプルで使い勝手もいいと思う。

シェアしてくれてるデザインもお洒落なものが多いし、機能的にも優れてるものがいっぱいあるよね。

 

それをそのまま使うのもいいけど、やっぱり自分らしさを表現するとか、自分の好きなデザイン・機能を取り入れたいなって思うのれす。

 

  • まず自分が楽しむ
  • まず自分が心地良くある

 

自分が楽しめてもいないのに、誰かのために何かをするなんてうまくいかない。

結局、苦しくなったり、辛くなったり、つまらなくなったりして続かないんだよね。

 

自分が楽しんでる! 上手くいってる! だから幸せを御裾分けするよ!

欲しい人は受け取ってネ♡(*´꒳`*)

 

ってくらいで丁度いいんじゃないかな?

 

今回やったことで、世界で▼・ェ・▼だけの特別なTwitterに変身したからね!

ニヤニヤしてるよ!(๑→ܫ←๑)

 

 

 

お気に入りの Twitter 作ってみてね♡

 

 

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

Thank you.

I love you.