Edited at

kirakiratter.com+kktCSS+キラキラブックマークレットで、キラキラッターを楽しもう!

More than 1 year has passed since last update.

氷上スミレ( https://kirakiratter.com/@sumire, https://twitter.com/sumire_kkt )です。

みなさんはキラキラッター、してますか?

更に特別な設定をすると、パソコンでもスマートフォンでも素敵なデザインに変えられちゃいます!


更新情報

キラキラッターがMastodon 1.3.2に更新されたよ。(05/02)

今回の更新で、ついにテーマ機能が追加されたみたい。

キラキラッターを開くだけでkktCSSが読み込まれるから、設定しなくてもすぐ素敵なデザインで始められちゃうね。

(記事は、自分でCSS編集をしてみたい人のために残しておくね)


Desktop

(for Chrome/Opera/Vivaldi/Firefox)

1クリックでスタイルの追加が出来るサイトが登場したみたい。

Stylishをインストールしてから、[Install with Stylish]ボタンを押してね。

Stylish(Chrome/Opera/Vivaldi)

https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish(Operaは、Download Chrome Extensionも入れてね)

https://addons.opera.com/en/extensions/details/download-chrome-extension-9/

https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish(firefox)

https://addons.mozilla.org/en-US/firefox/addon/stylish/

userstyles.org - kirakiratter

https://userstyles.org/styles/141350/kirakiratter

 

(手動で追加する方法も残しておくね...)

めろんちゃん( https://kirakiratter.com/@melon )がとってもわかりやすい紹介をしてたから借りてきちゃった。( https://kirakiratter.com/web/statuses/23559 )

まずはStylishをインストールしてから進めてね。

Stylish(Chrome/Opera/Vivaldi)

https://chrome.google.com/webstore/detail/stylish-custom-themes-for/fjnbnpbmkenffdnngjfgmeleoegfcffe

Stylish(firefox)

https://addons.mozilla.org/en-US/firefox/addon/stylish/

(1)「Kirakiratter Custom CSS」を開いて、下のほうにある「RAW Paste Data」の中にあるコードを全選択してコピー

https://pastebin.com/QB5nngsU

qii1.png

(2)キラキラッターのページを開いた状態で、URLの右にあるStylishのアイコンから「スタイルを作る」

qii2.png

(3)「コード1」にコピーしたコードを貼り付けて、適当な名前を付けて「保存」すればオケオケオッケー!

qii3.png

...めろんちゃん、ありがとう!

3のセクションエリアに入力したCSSは、自分で編集できるから、

新しいCSSコーデ(ィング)に挑戦することだってできちゃうよ。


Android/iOS

(Android:Chrome/firefox/Sleipnir)

(iOS:Chrome/Safari)

スマートフォンはStylishがないから少し難しいかな...

"ブックマークレット"を使ってKirakiratter Custom CSSを読み込むんだけど、詳しく解説するね!

まず、ブックマークを作って、下の文字列でURLの欄を書き換えて...

javascript:(function(){var s=document.createElement('link');s.setAttribute('href','https://masterdalk.github.io/kktCSS/kirakiratter.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);})()

名前は短くて、後で打ち込みやすいのにするのがおすすめ。

私は「kkt」で登録してる。

 

準備が出来たらkirakiratter.comを開いて、そこからブックマークを開くとデザインが変わるよ

Chrome(Android/iOS)みたいなブックマーク一覧を新しいページで開いちゃうブラウザはコツがあって...

kirakiratter.comを開いた状態から、アドレス入力欄を出して、kkまで打ち込んで出てきたブックマークをクリックすればデザインが変わる、かな

コツについて詳しく解説してるページもあるから見てみてね

http://ametuku.com/archives/6858

ページを開くたびにブックマークから開かないとだめだけど、こればかりは仕方ないかな...

素敵なCSSでキラキラッターをもっと楽しんでね!