2.5次元より愛を込めて

クラシックゲーム、最新ゲーム、VR、AI、ロボット、糸島グルメを紹介!


歩きながらの閲覧はお控えください


【2次元】TweetdeckのCSSをStylebotを使ってカスタマイズしてみた

ソパ!
Tweetdeck使ってる?

TweetdeckはTwitterをPCで見るときにとても役立つ。
使いやすいし、オプションもあって、それなりに設定もできる。

でも、カスタム好きの筆者は満足できなかった。
そんなわけで、CSSをいじることにした。

今回は、どんな感じでCSSをいじったのか公開しよう。


もくじ


レトロフリーク

TweetdeckとStylebot

Tweetdeckをいじるにあたって、CSSを触らないといけない。
CSS素人の筆者にとって、どこから手を付けたらイイのかわからなかった。

調べてみると、「Stylebot」というのがCSSをいじるのにイイらしいことが分かった。
Crome拡張「Stylebot」を使ってCSSをいじることにした。

「Stylebot」は変更したい箇所をカーソルで選んで、数値を入れたり、ボタンを押したりするだけで、色々変更できるのだが、それだけで満足する筆者ではなかった。

CSSを直接いじって、カスタマイズすることにした。
ちなみに、テキストエディタに保存しながらいじることにした。

消えると恐いからね。


TweetdeckカスタマイズCSS

まずは、全文を一気に紹介。 筆者が個人的な好みでカスタマイズしているので、まずは参考にどうぞ。


CSSソース全文

.activity-header .nbfc .account-link {
  display: inline-block;
  max-width: 10.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
  white-space: nowrap;
  word-wrap: normal;
}

.column-content {
  background-color: #ddd;
  background-image: url(https://pbs.twimg.com/media/Ct9HxSyUMAAkMeM.jpg:large);
  background-position: 85%;
  background-size: cover;
  top: 0px;
}

.column-head-title {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 2px 2px 2px #fff;
}

.column-header {
  background-image: url(https://pbs.twimg.com/media/Ct9HxSyUMAAkMeM.jpg:large);
  background-position: 52% 23%;
  background-repeat: no-repeat;
  color: #955;
  height: 35px;
  line-height: 35px;
  transition: 0.4s ease-out;
}

.column-header:hover {
  background-position: -100% 23%;
  transition: 0.3s ease-in;
}

.column-header-link .icon-sliders {
  font-size: 16px;
}

.column-title .attribution {
  color: #5af;
  display: none;
  font-weight: bold;
}

.column-title-back .icon {
  top: 10px;
}

.column-type-icon {
  font-size: 16px;
}

.column-type-interactions .activity-header .txt-mute .tweet-header {
  display: none;
}

.column-type-interactions .tweet-text {
  color: #600;
}

.fullname {
  color: #7d7;
  font-size: 12px;
  text-shadow: 1px 1px 1px #000;
}

.fullname:hover {
  color: #555;
  font-style: oblique;
  text-shadow: 0 0 5px #38b;
}

.icon-protected {
  font-size: 11px;
}

.js-column {
  border-right: 0px solid #000;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  opacity: 1;
}

.sprite-drag-vertical {
  height: 15px;
}

.stream-item {
  background-color: #fcfcff;
  border: 1px solid #ccc;
  border-bottom: 0px;
  border-radius: 10px;
  min-height: auto;
  opacity: 0.87;
  transition: 0.3s;
}

.stream-item:hover {
  border-radius: 5px;
  opacity: 1;
  transition: 0.3s;
}

.stream-item:hover .tweet-footer {
  opacity: 0.8;
  transform: translate(5px,-8px);
  transition: 0.2s;
  z-index: 10;
}

.stream-item:hover img.avatar.pull-right.size24 {
  opacity: 1;
  transform: scale(1,1);
  transition: 0.2s;
}

.stream-item:hover img.tweet-avatar.avatar.pin-top {
  opacity: 1;
  transform: scale(1,1);
  transition: 0.2s;
}

.stream-item:hover img.tweet-avatar.avatar.pull-right {
  opacity: 1;
  transform: scale(1,1);
  transition: 0.2s;
}

.stream-item:hover video.js-media-gif.media-item-gif.full-width.block {
  opacity: 1;
  transition: 0.2s;
}

.stream-item:hover .btd-is-verified {
  opacity: 1;
  transition: 0.5s;
}

.btd-is-verified {
  opacity: 0;
  transition: 0.3s;
}

.text-base-smallest {
  font-size: 8px;
}

.tweet-action {
  font-size: 2px;
}

.tweet-footer {
  bottom: -5px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-shadow: 0 0 9px #fff,0 0 6px #06e,0 0 2px #fff;
  transform: translate(5px,2px);
  transition: 0.4s;
}

.tweet-footer a[rel="viewDetails"] {
  display: none;
}

.tweet-text {
  color: #433;
  font-size: 12px;
  padding-top: 5px;
}

.tweet-timestamp a {
  color: #aaa;
}

.username {
  color: #8a8;
  font-size: 12px;
  font-weight: 0;
}

a.account-link {
  color: #aaa;
  font-weight: bold;
}

a.account-link.txt-bold {
  color: #aaa;
}

a.btn {
  color: #aaa;
}

a.js-account-item.compose-account.is-actionable.is-selected.cf.link-clean {
  display: none;
}

a.js-action-header-button.column-header-link.column-settings-link {
  color: #ccc;
  margin-bottom: 2px;
  margin-top: -2px;
  text-shadow: 1px 1px 2px #000;
}

a.js-action-header-button.column-header-link.column-settings-link:hover {
  background-color: #f6f6f6;
  border: 1px solid #bbb;
  border-radius: 5px;
  color: #933;
  margin-bottom: 2px;
  transition: 0.6s;
}

a.js-media-image-link {
  border-radius: 6px;
  opacity: 0;
  transition: 0.5s;
}

a.js-media-image-link:hover {
  opacity: 1;
  transition: 0.2s;
}

a.url-ext {
  font-size: 8px;
}

body {
  display: block;
  font-family: "メイリオ", Tahoma, Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
}

button.js-action-button.btn {
  margin-top: 2px;
  opacity: 0.7;
}

button.js-action-button.js-retweet-button.btn.btn-positive:hover {
  background-color: #5df;
}

button.js-send-button.js-spinner-button.js-show-tip.btn.btn-positive.btn-extra-height {
  background-color: #57a;
  height: 20px;
  width: 64px;
}

div.accs-header h3 {
  margin-top: -7px;
}

div.js-docked-compose.compose {
  background-color: #555;
  color: #ccc;
}

div.js-inreply.cmp-replyto.item-box.is-inverted-dark {
  background-color: #bbb;
  border: none;
  border-radius: 10px;
}

div.js-modal-panel.mdl.s-short.is-inverted-dark {
  background-color: #bbb;
}

div.js-quote-tweet-holder.padding-a--10.bg-r-white {
  background-color: #ccc;
  border-radius: 6px;
}

div.js-stream-item-content.item-box.js-show-detail {
  padding-bottom: 0;
}

div.js-tweet.tweet {
  padding-bottom: 6px;
}

div.mdl-inner {
  background-color: #bbb;
  border-top: 1px solid #888;
  opacity: 1;
}

div.mdl.is-inverted-dark.cmp.s-inreply.l-no-txtarea.s-fluid-height {
  background-color: #bbb;
  border-radius: 8px;
  opacity: 1;
}

div.media-sensitive-content.padding-am {
  font-size: 5px;
  padding-left: 18px;
}

div.padding-txl {
  background: #666;
}

div.position-rel.compose-text-container {
  background-color: #555;
}

h1.js-compose-title.compose-title-text.txt-ellipsis.inline-block {
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}

header.js-mdl-header.mdl-header.js-drag-handle.is-movable {
  background-color: #bbb;
  border-radius: 8px;
  height: 1px;
  opacity: 1;
}

i.icon.icon-arrow-l {
  color: #955;
  margin-top: 6px;
}

i.icon.icon-close {
  margin-top: -7px;
}

i.js-drawer-close.is-actionable.icon.icon-close.margin-vm.pull-right {
  margin-top: 5px;
}

img.avatar.pull-right.size24 {
  opacity: 0;
  transform: scale(1,0.1);
  transition: 0.2s;
}

img.media-img {
  border: 4px solid #fff;
  border-radius: 6px;
}

img.tweet-avatar.avatar.pin-top {
  border-radius: 6px;
  height: auto;
  margin-left: 1px;
  max-height: 36px;
  max-width: 36px;
  opacity: 0;
  transform: scale(1,0.1);
  transition: 0.2s;
  width: auto;
}

img.tweet-avatar.avatar.pull-right {
  height: 36px;
  opacity: 0;
  transform: scale(1,0.1);
  transition: 0.2s;
  width: 36px;
}

li.acc-twitter.js-account-item.js-show-tip.acc-selected {
  display: none;
}

p.account-bio.txt-sub-antialiased.txt-r-dark-gray.txt-italic.txt-size-variable--13 {
  font-size: 5px;
}

span.hash {
  color: #b3641e;
}

span.link-complex-target {
  color: #b3641e;
}

textarea.js-compose-text.compose-text.scroll-v.scroll-styled-v.scroll-styled-h.scroll-alt {
  height: 80px;
}

textarea.js-compose-text.compose-text.scroll-v.scroll-styled-v.scroll-styled-h.scroll-alt.padding-al {
  background-color: #bbb;
  border-radius: 6px;
  height: 100px;
}

video.js-media-gif.media-item-gif.full-width.block {
  border-radius: 6px;
  opacity: 0;
  transition: 0.5s;
}

img.avatar.compose-account-img.size30 {
  display: none;
}

button.js-send-button.js-spinner-button.js-show-tip.btn.btn-positive {
  margin-top: -15px;
  border: 2px solid #fff;
  border-radius: 5px;
  box-shadow: 0px 1px 4px #fff;
}

i.js-show-tip.sprite.sprite-verified {
  transform: rotate(-360deg);
  transition: 0.8s;
}

div.js-modal-context.js-click-trap.overlay.overlay-super.scroll-v:hover i.js-show-tip.sprite.sprite-verified {
  transform: rotate(360deg);
  transition: 0.8s;
}


そのままコピペしてもそれなりにカッコいい感じにはなるハズ。
ちょっと雑なところもあるけど、気にしない。

では、どの辺をどういじったのか説明しよう。


イイ感じにしたくてCSSをいじり倒す

どの辺をいじり倒したのか、カンタンに説明しよう。


フォントをいじり倒す

body {
 display: block;
 font-family: "メイリオ", Tahoma, sans-serif;
}


ここで、どんなフォントを使うのか指定している。
筆者は「メイリオ」が好きなので、一番前にもってきている。

ほかのフォントは「メイリオ」を持っていないPCで使われることになる。

ニックネームはこんな感じだ。

.fullname {
 color: #7d7;
 font-size: 12px;
 text-shadow: 1px 1px 1px #000;
}

.fullname:hover {
 color: #555;
 font-style: oblique;
 text-shadow: 0 0 5px #38b;
}

通常は緑#7d7に黒い影text-shadow: 1px 1px 1px #000をかけている。
1px右、1px下、1px太さの黒#000という意味だ。

さらに、hoverを追加することで、マウスを載せたときに変化するようにしている。
フォントの色を濃いグレー#555にして、斜体font-style: obliqueにした。
さらに、影は青っぽく光らせる感じ0 0 5px #38bにした。

この:hoverは、筆者が好きでよく使っているので、このあとも何度もでてくる。

つぎは、ツイート本文。

.tweet-text {
 color: #433;
 font-size: 12px;
 padding-top: 5px;
}


ここは時間表示。

.tweet-timestamp a {
 color: #aaa;
}


ここはユーザーネーム。

.username {
 color: #8a8;
 font-size: 12px;
 font-weight: 0;
}

こんな感じで、テキストは色、サイズを主に変更している感じ。
ツイート本文は、チョット詰めたかったので、paddingで位置を調整。


ツイート部分の表示をいじり倒す

.stream-item {
  background-color: #fcfcff;
  border: 1px solid #ccc;
  border-bottom: 0px;
  border-radius: 10px;
  min-height: auto;
  opacity: 0.87;
  transition: 0.3s;
}

.stream-item:hover {
  border-radius: 5px;
  opacity: 1;
  transition: 0.3s;
}

steram-itemというのが一個一個のツイート部分。


変更内容はこんな感じ。

  • 背景色:青みがかった白(#fcfcff)
  • 枠線:1px幅でsolid(通常線)、色は薄いグレー(#ccc)
  • 下枠線:表示しない(0px)
  • 枠まるみ:ほどほどに丸角(10px)
  • 最小高さ:自動
  • 透明度:後ろの画像がみえるか見えないか微妙なところ(0.87)
  • 変化時間:hover後の戻り時間(0.3s)

:hover時は、透明度をなくしたり、角を尖らせたり、微妙な変化をさせている。


でもって、マウスを重ねたときだけアイコン、サムネイル等を表示するようにした。

.stream-item:hover img.avatar.pull-right.size24 {
  opacity: 1;
  transform: scale(1,1);
  transition: 0.2s;
}

.stream-item:hover img.tweet-avatar.avatar.pin-top {
  opacity: 1;
  transform: scale(1,1);
  transition: 0.2s;
}

.stream-item:hover img.tweet-avatar.avatar.pull-right {
  opacity: 1;
  transform: scale(1,1);
  transition: 0.2s;
}

.stream-item:hover video.js-media-gif.media-item-gif.full-width.block {
  opacity: 1;
  transition: 0.2s;
}

.stream-item:hover .btd-is-verified {
  opacity: 1;
  transition: 0.5s;
}

.btd-is-verified {
  opacity: 0;
  transition: 0.3s;
}

transform: scale(1,1)でアイコンを縦に縮まる変形をさせている。
アイコン周りは全て同じ処理をさせた。

.btd-is-verifiedのところは、本当は認証バッジだけを操作したかったが、うまくいかず、バッジを含む枠全体を消している。
display: noneにしてしまうとユーザーアイコンも一緒に消えてしまう。


フッターをいじり倒す

お次はフッターだ。
ファボとかのアイコンを表示してる部分をいじる。

通常は表示されていないけど、マウスを乗せると下からニョっと出てくる。

.stream-item:hover .tweet-footer {
  opacity: 0.8;
  transform: translate(5px,-8px);
  transition: 0.2s;
  z-index: 10;
}
.tweet-footer {
  bottom: -5px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-shadow: 0 0 9px #fff,0 0 6px #06e,0 0 2px #fff;
  transform: translate(5px,2px);
  transition: 0.4s;
}

transform: translate(5px,2px)で位置を下の方にしている。
このままだと、表示がされっぱなしになるので、opacity: 0で完全に透明にしている。

z-index: 10で表示優先度を高くしている。
オプションのウィンドウが触れなくならないためだ。

position: absolute位置を相対値にすることで、各ツイートに表示されるようにしている。

text-shadow: 0 0 9px #fff,0 0 6px #06e,0 0 2px #fffでボタン周りの影を設定している。
カンマで区切ることで、複数の影を設定できる。
ここでは、3つの影を使っている。


背景画像をいじり倒す

気に入った背景画像をうっすらと表示したかった。
本当は、カラム(列)毎に違う画像をいれたいのだが、やり方が分からないという体たらく。

.column-content {
  background-color: #ddd;
  background-image: url(https://pbs.twimg.com/media/Ct9HxSyUMAAkMeM.jpg:large);
  background-position: 85%;
  background-size: cover;
  top: 0px;
}

画像はbackground-image: url(https://pbs.twimg.com/media/Ct9HxSyUMAAkMeM.jpg:large)で指定。
URLはなぜかHTTP"S"じゃないと認識しなかったので、Twitterで入手できるアドレスをつかっている。
筆者の好きな「オルフェンズ」だがあまりきにしないでw

background-size: coverで画像の縦の長さをカラムの長さに合わせている。
さらにbackground-position: 85%で画像の横位置を調整し、バルバトスだけが見えるようにしている。

続いて、ヘッダー部分だ。

.column-header {
  background-image: url(https://pbs.twimg.com/media/Ct9HxSyUMAAkMeM.jpg:large);
  background-position: 52% 23%;
  background-repeat: no-repeat;
  color: #955;
  height: 35px;
  line-height: 35px;
  transition: 0.4s ease-out;
}

.column-header:hover {
  background-position: -100% 23%;
  transition: 0.3s ease-in;
}

画像 (https://pbs.twimg.com/media/Ct9HxSyUMAAkMeM.jpg:large) は同じものを利用している。
もちろん、好きに変えてもらっても問題ない。

まずは、マウスが乗っていない状態を設定。
background-position: 52% 23%で画像のどの部分がみえるかを決めている。
background-size:をつかわないことで、画像本来のサイズをだしている。

height: 35pxline-height: 35pxは画像とは関係ない。
ヘッダー自体の高さと、HOMEなどの文字がでる高さを指定している。

マウスを乗せるとbackground-position: -100% 23%が適用され、画像の黒い部分になる。
これにtransition: 0.3s ease-inをあわせることで、スライドしたような感じになる。
ease-inはゆっくり始まりるための設定だ。
ゆっくり終わるときはease-outというのがある。


認証バッジをいじり倒す

どうしても認証バッジをいじりたい。
ということで、認証アカウントの名前をクリックして、表示されるステータス内の認証バッジをいじってみた。

ここは、別アイコン画像になっているのでいじれた。

i.js-show-tip.sprite.sprite-verified {
  transform: rotate(-360deg);
  transition: 0.8s;
}

div.js-modal-context.js-click-trap.overlay.overlay-super.scroll-v:hover i.js-show-tip.sprite.sprite-verified {
  transform: rotate(360deg);
  transition: 0.8s;
}

画面が暗転すると同時にアイコンが回り出す。
もともとの表示を-360度回転させているためだ。
カーソルが暗転部分に乗っている間はさらに360度回転する。
0.8秒の間に2回転する動きだ。

本当はアニメーションで動かしたかったのだが、うまく設定できなかったので、苦肉の策である。


実現できなかったこと

完全に勉強不足なんだけど、できなかったことは以下。

  • 認証バッジアニメ
  • カラム毎の画像指定
  • カラムヘッダー背景画像だけの透過もしくはぼかし
  • 相互、片思いなどの表示
  • 投稿クライアント名の表示
  • ニックネームにホバーさせると吹き出しがポップアップして何か表示

将来的にできるようになるとイイな~と思っている。


最後に

設定をしているときに、いろいろとつまづくことがあったので列挙。

  • 数値を指定するときに「px」などの単位を付け忘れる
  • スペルを間違える
  • Display: none;が全体にかかって何も表示されなくなる
  • オーバーレイの中身がぐちゃぐちゃになる
  • 優先度を指定しなかった為、ツイートオプション「…」のウィンドウが触れなくなる
  • CSSが全部消える

特に、最後のCSSが全部消えるのは致命的なうえに度々ある。
テキストエディタなどに保存しながら作業することをオススメする。

では、ご武運を。



他の方のブログも見たいかたはコチラからどうぞ

にほんブログ村 ゲームブログへ


▼▼▼ブログで仲間をあつめよう▼▼▼

ブログサークル
ブログにフォーカスしたコミュニティーサービス(SNS)。同じ趣味の仲間とつながろう!



スポンサーリンク
おもちゃ・ホビー・ゲーム
もしもアフィリエイト
広告を非表示にする