home :: tips

ねこまぐろBlog

ネットなどの備忘録なブログ。たまに創作ネタメモとか?

Twitterのweb版UIでTLの画像添付などを非表示にするユーザスタイルシート(2018年1月版)

追記 2018/1)どんどん新しい記述が増える。Chromeの対応方法載せました。Import楽過ぎた。

追記 2017/11)全面的に修正。まだ取得できてないのがあるかも

パソコンブラウザ版のTwitter用で、画像やらタイムラインのログを見返すのに縦に長くて困るとかそういう感じなので非表示にしましたユーザスタイルシートです。 1年くらい使ってるけど記事にしてみたよー(2015年1月)。その間に記述変わってるんですよね。

主にFirefoxのStylish用です。Chromeの追加方法を下記に載せてみました。意図的に古いFirefoxのStylish使ってるけど、今はどちらも同じですかね…。

個別へ飛んだ時(時間の所から)は表示されるようになってます( /userID/status/~ )。なので興味あるなら見れます。

@-moz-document url-prefix('https://twitter.com/'){
.VideoGuide/* 左カラムのライブ動画 */,
#timeline div[data-component-context="suggest_activity_tweet"]/* TL:いいね */,
#timeline div[data-component-context="suggest_recycled_tweet_inline"]/* TL:いいね */,
#timeline div[data-component-context="suggest_pyle_tweet"]/*TL:○さんがフォローしています */,
#timeline div[data-card2-name="summary"]/* TL:TwitterCard */,
#timeline div[data-card2-name="summary_large_image"]/* TL:TwitterCard-Large */,
#timeline div[data-card2-name="promo_website"]/* TL:プロモのTwitterCard */,
#timeline div[data-card2-name*="promo_video_website"]/* TL:プロモのTwitterCard-動画 */,
#timeline div[data-card2-name*="promo_image_convo"]/* TL:プロモのツイート機能付き画像 */,
#timeline div[data-card2-name*="promo_video_convo"]/* TL:プロモのツイート機能付き動画 */,
#timeline div[data-card2-name*="direct_store_link_app"]/* TL:PlayStore */,
#timeline div[data-card2-name*="live_video"]/* TL:プロモの動画 */,
#timeline div[data-card2-name*="live_event"]/* TL:プロモ */,
#timeline div[data-card2-name*="moment"]/* TL:モーメント */,
#timeline div[data-card2-name*="periscope_broadcast"]/* TL:動画 */,
#timeline div[data-card2-name="player"]/* TL:動画、つべ・にこ */,
#timeline div[data-card2-name="audio"]/* TL:動画 */,
#timeline .AdaptiveMediaOuterContainer/* TL:埋め込み画像・動画 */,
#timeline .QuoteTweet-container/*TL:引用ツイート(1行線になるので個別ツイートから開く) */,
#timeline li[data-item-type="recap_entry"]/* TL:最近のハイライト  */,
#timeline li[data-item-type="who_to_follow_entry"]/* TL:おすすめユーザー  */,
.wtf-module/* 左カラムのおすすめユーザー&知り合いを見つけましょう */,
.import-prompt/* 知り合いを見つけましょう */
{display:none !important;}
/* ユーザ個別ページは非表示しなくていいなら #timeline を .top-timeline-tweetbox にしてね */
/* アップデート確認→ https://blog.tailtame.com/tips/css/20150119-twitter.html */
} 

IEの場合は最初と最後を消して ie.css などのファイルを作るといいです。画像付きの詳しいサイト→ Internet Explorer 11でユーザースタイルシートを使う

不要なものは削除して使ってください。「#timeline , {display:none!important;}」みたいにカンマを「{}」の前に置くとエラーになるので注意。CSSは「a {hogehoge}」「c, b, a {hogehoge}」って感じに書くのです。

@-moz-document url-prefix('https://twitter.com/'){
#timeline div[data-screen-name="TwitterJP"] .AdaptiveMediaOuterContainer/* TLの埋め込み画像・動画、で特定ユーザは表示。サンプルは@TwitterJP */
{display:inline !important;}
}

特定ユーザの画像だけ表示する場合もできたから別枠で置いてみました。「TwitterJP」の部分がIDです。

@-moz-document url-prefix('https://twitter.com/'){
#timeline div[data-screen-name="user_a"],
#timeline div[data-screen-name="user_b"],
#timeline div[data-screen-name="user_c"]
{display:none!important;}
}

単純に特定ユーザを非表示にする場合はこちら。検索してるとブロックしてるユーザが…(ブロックし過ぎかな)

適応前と適応後

適応前
Twitterのweb版UIでTLの画像添付を表示した通常時
適応後
Twitterのweb版UIでTLの画像添付を非表示した適応時

253pxも節約! なんかこのモザイクサムネイルを見ているだけで腹立ってきたのでそのうち変えたい…。

Google Chrome(派生含む)の場合

上記はFirefox用の記述ですが、Chromeの場合はStylishアイコンを右クリック→ オプション→ 新しいスタイルを作成(左カラム)→ 「名前を入力してください」にTwitterなど適当な名前を付ける→ Mozilla Formatの下のImportをクリックして入力欄に↑のコードを張り付ける→「Append to style」でOK(「Overwrite style」は上書きのようですね。どちらでもいい)

フォロー誤爆防止用のユーザスタイルシート

@-moz-document domain("twitter.com") {
/* button.cancel-text, キャンセル */
button.pending-text, /* フォロー許可待ち */
/*button.unblock-text, ブロック解除 */
/*button.blocked-text, ブロック中 */
/*button.unfollow-text, 解除*/
button.following-text, /* フォロー中 */
button.follow-text/* フォローする */
{display:none!important;}
}

誤爆防止用のフォローボタンだけ別途非表示にしていたのを忘れてました……。ブロック中は表示にしてるので適当に変更してください。

おまけ

.js-tweet-text{white-space: normal !important;}/* 改行無効 */

改行無効。長いのよねぇ。具体的にはこういう用です→[twitter]うざいプロモ…(※見た瞬間ブロックしました)

/* 絵文字をグレースケール化 */
span.Icon--protected,
div.stream-container img[src*="/emoji/v2/72x72/"],
div.stream-container img[src*="/emoji/v1/72x72/"]{filter: grayscale(100%);width:13px;height:13px;}

絵文字をグレスケ化もできたり。スマホでは普通にカラーで見てるからまあ。

追記ログ

追記 2017/4)追加。TLに表示されるフォロワーが追加した「いいね」を消す。公式RTは全オフ派なので…。

追記 2016/10)追加。フォローしている相手のいいねがTLにまとめて表示されるやつです。使いやすいように1行コピペできるようにしてるので整理したい。

追記 2016/8)修正。

追記 2015/12)今は「#timeline .AdaptiveMedia」で全部消せるのかな?

by id:tailtame

Posted at 2018-01-30 21:08 in tips » css

rel=canonical 用のPHPに手を入れる

Google Search Console からの通知見てたんですけど、送信したサイトマップのURLが登録されなかった、という事で詳細を見ていたら、以下のような感じになってた。

スラッシュの重複『//』、index.htmlの省略派でリダイレクト飛ばしてたのに効いてなかった『index.html』と?hogehogeってついちゃってる『.html?hogehoge』の3パターンでした。

<?php
$canonical = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
?>
<link rel="canonical" href="https://<?php print"$canonical"?>">

こんな感じでアクセスしたURLでやってて、シンプルに対応してたのが裏目に出てしまったので以下のように修正。

<?php
$canonical = $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
$canonical = preg_replace("{//}","/",$canonical);
$canonical = preg_replace("{.html?(.*)}",".html",$canonical);
$canonical = preg_replace("{index.html}","",$canonical);
?>
<link rel="canonical" href="https://<?php print"$canonical"?>">

上手く動いて成功 ヾ(・ω・)ノ って今見ると1つ目と3つ目は $str_replace でもいいのか。あと「"{.html?(.*)}i"」の方が安心かねぇ。そしてGoogleの対応を待つ。

手打ち個人サイト増えるといいなぁ、という記事を増やしていきたいような。phpのおかげで楽してます。

ちなみにgoogleサイトマップは以下のサイトのを使ってます。移転されたのだろうか。

Posted at 2018-01-29 23:42 in tips » php

はてなフォトライフのSSLなURLメモ

はてなフォトライフいいですよね。 位置情報や画像の情報もつけたまま投稿できますし。その反面、個人的な位置情報を付けたままの投稿が気になる所ですが……。とまあそれは置いといて、10月29日だったか。Let's EncryptでSSL化した時に、変更していたメモになりますー。

変更前
http://img.f.hatena.ne.jp/images/fotolife/t/
変更後
https://cdn-ak2.f.st-hatena.com/images/fotolife/t/

以上だ! まあ、一度リダイレクトしておけば画像表示がSSLになってるんで楽なのですが。 自鯖に移し替えようとしてたので変えられてよかったですよー。

はてなと言えば、はてなブックマークカウンターもSSL化できないかなーと思ってたけど無理だったんですよね。無念(-ω-)

by id:tailtame

Posted at 2017-11-20 03:23 in tips » html

Gmailに独自ドメインのメールアドレスを追加したメモ

雑なメモだよ! 別のアドレスやエイリアスからメールを送信する - Gmail ヘルプにあるけど、あとで見て分からなくなるよね!

  1. いつでも捨てられるように独自ドメインのメールアドレスを作ったよ!(迷惑メールめ…)
  2. Gmailに転送するよ!
  3. メールアドレスは「aaa@hoge.example.com」みたいな感じだよ!
  4. 返信は独自ドメインのメールアドレスからがいいよね!

というわけで、

ドメイン「Value-Domain」の設定

  1. example.com のDNS設定
  2. 「a mail ***.***.***.***」
  3. 「mx mail.example.com. 10 hoge」(hogeが↑のサブドメイン部分)
  4. ※反映に5~30分くらいかかる

サーバー「コアサーバー(XREA)」の設定

  1. メールアドレス:「aaa@hoge.example.com」を入力
  2. 受信方法:「転送のみ」
  3. パスワード:************(Gmailで使うよ!)
  4. ※反映に1~3分くらいかかる

メールアドレスを変える場合は、1を「bbb@hoge.example.com」に変えて増やすだけ。サブドメインを変えたい場合はドメインの設定から。

Gmailの設定

  1. 設定(歯車)
  2. アカウントとインポート
  3. 名前:他のメールアドレスを追加
  4. 「名前」と「メールアドレス」を入力、「エイリアスとして扱います」はチェックを入れたまま。
  5. SMTPサーバー(mail.example.com)/ポート587、ユーザー名(aaa@hoge.example.com)、パスワード(サーバーで設定したもの)を入力してアカウントを追加。
  6. 認証が必要なので「Gmail からのご確認 - aaa@hoge.example.com を差出人としてメールを送信します」のURLクリックか確認コードを入力。
  7. デフォルトの返信モードを選択:「メールを受信したアドレスから返信する」

以上だ! 最後に設定のキャプチャも載せておきます。

設定のキャプチャ

by id:tailtame

Posted at 2017-08-01 14:06 in tips » web

新はてなブックマーク用ユーザスタイルシートで旧っぽい配置にした

2017年7月3日、とうとうこの日が来てしまった……。 怨念のブクマページ→はてなブックマーク - はてなブックマーク新ユーザーページを正式リリースいたします - はてなブックマーク開発ブログ

来てしまったものはしょうがないのでいつも通りにユーザスタイルシートで変更。右の広告まで消えたから真ん中にも置いてください><

@-moz-document url-prefix(http://b.hatena.ne.jp/自分のID/){
.entry-image-block, /* サムネ消し */
#right-container /* 右カラム消し */
{display:none !important;}
#center-container{width:700px !important;} /* 横幅変更 */
#left-container{float:right !important;} /* 左カラムを右に移動 */
.left-column-line{background:none!important;} /* 左カラムの縦線を削除 */
}

というか『 /id/ 』にアクセスしたら『 /id/hotentry 』にリダイレクトするの勘弁してくれませんかね…? 『 /id/bookmark 』でいいのにさー。お気に入りページをブクマしてるからから削ってアクセスが楽だったので面倒……。

あと、スマホ版も『 /id/touch 』から『 /id/bookmark 』、『 /id/favorite.touch 』から『 /id/favorite 』にリダイレクトで変更されるようになりましたねー。

by id:tailtame

Posted at 2017-07-04 08:13 in tips » css

Categories
Archives
Tagging

Page 1 of 3: 1 2 3 Last

スポンサーリンク

2006年12月から計測のページビューカウンター。