Autopagerize
以前のようにhistory.pushState()等で履歴を弄るのは悪手だと思ったので、次のページに進む為にキー操作を感知するようにしました。例は西野さんのブログです。
document.onkeydown = pageMove; function pageMove() { if (event.keyCode == 78) //「N」が押されたか確認 { //history.back(); var result = document.evaluate('//li[@class="prev" or @class="paging-next"]/a',document, null, 7, null); location.href=result.snapshotItem(0).href; } }
Nを押すと次のページへ飛びます。Autopagerizeだとフッターが見れないよとかの不満がある方はどうぞ。
CSS絡み(Stylishとか)
display:noneをGresemonkeyで機能させる手法はもう既に何度か紹介していますので、marginやpaddingを弄る方法です。これも例は西野さんのブログです。
var result = document.evaluate('//*[@class="article-date" or @class="article-title" or @class="article-header" or @class="article-footer" or @class="article-share-buttons"]',document, null, 7, null); for(var i=0;i<result.snapshotLength;i++) { result.snapshotItem(i).style.margin="0"; result.snapshotItem(i).style.padding="0"; }
Twitterで画像ズーム
PageExpand等で画像にマウスカーソルを乗せると画像が拡大する機能を使っているのですが、これを減らせないか考えました。CSSで機能します。
@-moz-document url-prefix("https://twitter.com") { .AdaptiveMedia-photoContainer img{-moz-transition: -moz-transform 0.2s linear; -webkit-transition: -webkit-transform 0.2s linear; -o-transition: -o-transform 0.2s linear; -ms-transition: -ms-transform 0.2s linear; transition: transform 0.2s linear;} .AdaptiveMedia-photoContainer img:hover { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2);} }
この辺からです。
https://qiita.com/midasmn/items/d930a5cb1e77828265be
あくまで拡大しているだけなので完全な画像が表示されるわけではありませんが、これで気になるようならTwitter 原寸びゅーで表示しています。こちらはユーザスクリプト版もあるので安心ですね。