comivelへようこそ♪
 
comivelのご利用には利用規約へのご同意が必要です。
必ずご確認、ご同意をお願いいたします。
運営ブログのご閲覧には利用規約へのご同意は必要ありませんが
一度注意事項をご確認いただけますと幸いです。

自由にデザインが変えれるブラウザ拡張「Stylish」のご紹介

こんにちは。こんばんは。
comivel運営のみきです。

本題に入る前にStylishを知ったきっかけをご紹介します

きっかけを書き終えたのですが予想以上に長くなってしまいました
ここから本題に移動することができます。

comivelはWordPressと言うCMS(コンテンツ・マネジメント・システム)を利用しています

WordPressにはテーマと言うサイトのテンプレートを決めれる機能があります

実際に見ていただくと分かりやすいかもしれません

comivelは寝ログを運営されているわいひらさんが製作されているSimplicity(シンプリシティー)と言うテーマを利用させていただいています

Simplicityのサイトはエックスサーバーを利用されています

このエックスサーバーが2016年11月29日にこんな発表をしました

この度エックスサーバーでは、
旧仕様のサーバー(sv1~sv1999.xserver.jpサーバー)をご利用のお客様を対象に、
サーバー性能の大幅向上および基盤システムを刷新した
最新サーバー環境(sv2001.xserver.jp 以降)へ簡単に移行できる
「新サーバー簡単移行」機能の提供を開始いたしました。
参考:最新サーバー環境(sv2001サーバー以降)へ簡単に移行できる「新サーバー簡単移行」機能提供のお知らせ

この新サーバー簡単移行を頼んでいて2017年2月16日に順番がまわってきたようです

当サイトは、エックスサーバーにて運営しています。 先日、エックスサーバーの新サーバー簡単移行サービスを利用できる順番が回ってきました。ですので、この機会に当サイトを新しいサーバーに移行したいと思います。当サイトが利用しているサーバーは、3年

この移行のためのCSS(カスケーディング・スタイル・シート)を使ってサポートフォーラムのフォーム、コメントフォームを非表示にされていました

そして2017年2月18日に移行が完了したとお知らせがありました

エックスサーバーの新サーバー簡単移行サービスを利用したサーバー移転が終了しました。コメント・フォーラムの入力制限を解除いたしましたのでお知らせいたします。「フォーラム(もしくはコメント)に書き込んだはずなのに、表示されていない」なんて場合は
エックスサーバーの半自動サーバ移転機能を利用してCPUとメモリの増強を行う手順を紹介です。

そしてフォームを非表示にしていたCSSをおそらく削除されたのだと思います

しかし…
ここから問題が始まります

フォーラムを開いてみてもフォームが表示されていません

これはキャッシュだなと思いシークレットモードで確認してみました

しかしそれでも表示されませんでした

これはおかしいのでわいひらさんに聞いてみました

聞いたというかつぶやきみたいですが

この投稿にわいひらさん

質問から時間が空いていたので「まだ今もフォームが表示されていませんか?」と質問をいただきました

このときもまだ表示されていなかったので

と返信しました

するとわいひらさん

以前のサーバーが表示されている可能性があるので確認をしてみてくださいといただきました

長くなるので飛ばしますがIP(サーバー)ではなかったです

そしてその後長々とやりとりをさせてもらいました

わいひらさん
長々とすみませんでした m(_ _)m

そして下のページをご紹介いただきました

Chrome拡張機能「Stylish」を使えば、GoogleChromeでユーザースタイルシートを使用することができます。その「Stylish」のインストール方法と、実際にユーザースタイルシートを適用させる方法を詳しく説明します。

このページはStylishと言うChrome拡張の紹介記事でした

そしてその後Stylishを使いフォーラムを表示することに成功しました!!

CSSも書いていただきました

とまぁこんな長くなってしまいましたが
(ここまで1500文字以上)

このご紹介いただいた拡張Stylishが便利&面白かったのとわいひらさんにご紹介いただいたページが若干古くなっていたのでcomivelでもご紹介します

前置きが長くなってしまい申し訳ございません m(_ _)m

広告

Stylishとは?

StylishGoogle Chromeの拡張機能(ブラウザアドオン)です。

調べてみるとFireFox版もありました

Stylishはどんなブラウザ拡張かと言うと
通常WEBページのデザインはWEBページの管理者からしか変更できません

デベロッパーツールを除く

しかしこのStylishを使えばだれでも(CSSが分かる方であれば)webサイトのデザインを変更することができるのです!!

つまり自分の好きなように他のサイトをカスタマイズすることができるのです!!

と言うわけで早速使ってみたいと思います!!

Stylishのインストール

ではStylishをインストールしていきます!!

まずはChrome版をダウンロードしていきます

Chrome版Stylishのインストール

まずはChromeウェブストアのStylishのページにアクセスします

Customize any website to your color scheme in 1 click, thousands of user styles with beautiful themes, skins & free backgrounds.

アクセスしたら右上にある[CHROMEに追加]をクリックしてください

Chrome版stylishのインストール

クリックすると権限の確認がでてくるので権限を確認してから[拡張機能を追加]をクリックしてください

chrome版stylishの権限確認

これでインストールが完了しました!!

Chromeにstylishが追加された案内

簡単ですね

続いてFirefox版をインストールしていきます!!

Chrome版stylishの使い方にここから飛ぶことができます

Firefox版Stylishのインストール

まずはFirefox版Stylishのインストールページにアクセスします

ユーザースタイルのマネージャー Stylish で Web のスタイルを新しくする。

アクセスできたら[Firefoxへ追加]をクリックしてください

firefox版stylishのインストール

すると以下のダイアログが表示されるので[インストール]をクリックしてください

firefox版stylishのインストール確認

すると再起動を促すダイアログが表示されます
Stylishのインストールには再起動が必要なので[今すぐ再起動]をクリックしてください

[stylish] firefoxの再起動

Firefoxの再起動が終わるとツールバーにStylishが表示されます

これでインストールは終わりです

firefox版stylishのインストール完了

Firefox版stylishの使い方にここから飛ぶことができます

Stylishの使い方

Stylishの使い方です

まずはChrome版から説明していきます!!

Chrome版Stylishの使い方

まずはツールバーのStylishをクリックしてください
すると下のような画面が表示されるので[新しいスタイルを作]をクリックしてください

[新しいスタイルを作]は[新しいスタイルを作る]などのミスか、
環境の可能性もあります
(端末サイズなど)

chrome版stylish、新規スタイルの作成

クリックすると新規タブで以下のようなページが開きます

chrome版stylish、スタイル作成ページ

ここからはcomivelのデザインを変えていきたいと思います!!

まずは右上の[名前を入力してください]と書いてある入力ボックスに分かりやすいスタイルの名前を入力してください
今回は「comivelのカスタマイズ」と入力します

Chrome版stylishのスタイル作成、スタイルの名前

ではCSSを書いていきます
今回は分かりやすいようにheaderの色、メニューの色、背景の色を変更したいと思います

今回入力するCSSは以下です

#header,
#header-in {
background-color:#20932d;
}
#navi,
#navi ul {
background-color:#ff4949;
}
#navi ul {
border-color:#ff4949;
}
body.custom-background{
background-color:#ffe96d;
}
執筆時点で適用可能なCSSです
仕様の変更等により動作しなくなる可能性もございます

上記のCSSをコード 1と書かれたところに記入してください

chrome版stylishのCSSの記入例

記入ができたら適用サイトを指定します

※comivel.netを開いた状態でスタイルの作成を行った場合は自動で入力されています

適用サイトの指定はCSS記載場所の下にある[適用先]で指定します

今回はcomivelすべてで適用させるので以下のように設定してください

ドロップダウンからドメイン上のURLを選択して入力ボックスに[comivel.net]と入力

入力後の画面↓
chrome版stylishの適用先サイト

適用するサイトの設定ができたら保存をクリックしてスタイルを適用させてください

chrome版stylish、スタイルの保存

保存が完了するとスタイルが適用されます

通常時のcomivel↓

[chrome]stylish適用前のcomivel

上記CSSを適用状態comivel↓

chrome版stylish、スタイル適用済みのcomivel

どうです?
すごいでしょ!!

ちなみに色はChromeを意識して緑、赤、黄色を利用しました

適用後の画像で赤く囲みましたが
スタイルが適用されているページには適用されているスタイルの数がツールバーに表示されます

chrome版stylish、スタイルの適用数

このスタイルを無効化させたいときはツールバーからstylishをクリックして[インストールされたスタ]を選択してください

若干、続きが見えたので環境によっては[インストールされたスタイル]と表示されている可能性があります

chrome版stylish、インストールされたスタイル

選択できたら[comivelのカスタマイズ]と言う項目があるのでカーソルを合わせて[無効にする]をクリックしてください

chrome版stylishのスタイル無効化

サンプルではcomivelのカスタマイズだけですが
さまざまなサイトにスタイルを適用した場合にすべてのサイトからスタイルを無効化したい場合は[インストールされたスタ]の
一番上にある[All styles]をオンからオフにすればすべてのサイトからスタイルが無効化されます

chrome版stylish、すべてのスタイルを無効化

以上でChrome版stylishの主な使い方の説明は終了です

Firefox版Stylishの使い方

続いてはFirefox版Stylishの使い方です

多分Chrome版と変わらないと思いますが…

では、行きます!!

Firefox版ではカスタマイズしたいサイトもしくはページにアクセスしてから
Stylishの操作をするようです
今回はcomivel.net全体に適用させます

ではcomivel.netにアクセスしてください

続いてツールバーにあるStylishをクリックしてください
クリックすると以下のように表示されるので
[新しいスタイルを書く]にカーソルを合わせて[comivel.net専用…]をクリックしてください

Firefox版stylish、新規スタイルの追加

すると新規タブで以下のようなスタイル作成ページが開きます

firefox版stylishのスタイル作成ページ

Chrome版と違い以下のコードが記述されています

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("comivel.net") {

}

CSSを記述する場所は

@-moz-document domain("comivel.net") {

}

の間です

今回記述するCSSは以下です

#header,
#header-in {
background-color:#1f58ba;
}
#navi,
#navi ul {
background-color:#e0812f;
}
#navi ul {
border-color:#e0812f;
}
body.custom-background{
background-color:#e8d035;
}

Chrome版と同じくヘッダー、メニュー、背景の色が変わります

デフォルトの記述のCSSを記述するとこんな感じになります

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("comivel.net") {
#header,
#header-in {
background-color:#1f58ba;
}
#navi,
#navi ul {
background-color:#e0812f;
}
#navi ul {
border-color:#e0812f;
}
body.custom-background{
background-color:#e8d035;
}
}

記述できたら左上にある[お試し(P)]をクリックしてみてください

firefox版stylish、スタイルのお試し

クリック後comivelを見てみると…

firefox版stylishでカスタマイズしたcomivel

Firefoxの色である青、オレンジ、黄になっています

個人的にはChromeの色よりもFirefoxの色のほうがしっくりきます

そういえばスタイルの名前をつけるの忘れていました

コードを入力するエリアの上にある[名前(N)]に名前を入力します
今回は「comivelカスタマイズ」と言う名前にします

firefox版stylish、スタイルの名前

名前を記入したらスタイル作成ページの右上にある
[保存(S)]をクリックしてスタイルを保存してください

firefox版stylish、スタイルの保存

これでサイトのカスタマイズは完了です!!

最後に今適用したスタイルを外してみましょう!!

これはChrome版より簡単です

まずはツールバーのstylishをクリックしてください
すると「comivelカスタマイズ」と言う項目が追加されているのでクリックしてチェックをはずしてください

firefox版stylish、スタイルの無効化

これだけです
簡単ですよね♪

では最後にまとめです

まとめ

思った以上にChrome、Firefoxで違いがあってびっくりです…

個人的にはChrome版の方が使いやすかったです

ただ無効化の方法についてはFirefoxのほうが楽でした!!

カスタマイズにはidやclassなどのコードを調べないといけませんが
他の方のサイトをカスタマイズできるので面白そうです!!

皆さんもcomivelをアレンジしてみてください!!

アレンジできた方はTwitterなどで画像と一緒にご報告いただければうれしいです!!

と言うわけで今回はここまでです

シェア、コメント、作品投稿 笑よろしくお願いします m(_ _)m

それではまた次回の運営ブログでお会いしましょう

バイバイ♪

トップへ戻る