Help us understand the problem. What is going on with this article?

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でキラキラッターをもっと楽しんでね!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away