「Stylish」という Safari の拡張機能を使って、自分が使っているパソコンだけ表示を変える

以前、記事「記事中に自分だけ(ではなくて、WordPress.com にログインしている人だけ)が見れるメモ欄を挿入する」において、自分だけが見える部分を作って、そこにメモをする方法についての覚書をしたつもりでしたが、「自分だけ」ではなくて、「WordPress.com にログインしている人」になっていたので、改めて、自分だけが見れる部分を作る方法についての覚書です。

例えば、このサイトのフッター部分には、私だけが見れる領域を設定しています。

image

私だけが見れる部分の領域は、タグ

<div class="”memo”">~</div>

で囲っており、

adfcafsada

以下の CSS を CSS スタイルシートエディターに追加し、

/* 自分だけ見れるボックス */
.memo {
display: none;
border: 1px solid #c9c9c9;
padding: 10px 5%;
width: 80%;
margin: 10px auto 10px 14px;
background-color: #efefef;
border-radius: 4px;
overflow: hidden;
position: relative;
font-size: 13px;
}

.memo:before {
position: relative;
content: '';
width: 70px;
height: 40px;
float: right;
}

.memo p {
margin: 1em 0;
}

.memo ul,.memo ol {
margin: 1em 0 1em 2%;
}

@media (max-width: 767px) {
.memo ul,.memo ol {
margin: 1em 0 1em 5%;
}
}

.memo:after {
position: absolute;
content: 'memo';
background-color: rgba(0,0,0,0.2);
color: #777777;
border: 1px solid rgba(150,150,150,0.2);
top: -2px;
right: -17px;
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Safari and Chrome */
-o-transform: rotate(30deg);
/* Opera */
-moz-transform: rotate(30deg);
/* Firefox */
padding: 2px 20px 2px 50px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.4), 0 0 10px rgba(255,255,255,0.4);
text-shadow: 1px 1px 1px rgba(255,255,255,0.2);
font-weight: bold;
}

以下の CSS を mac の Safari の拡張機能「Stylish 」に追加しております。

.logged-in .memo {
    display: block;
}

以前の記事「記事中に自分だけ(ではなくて、WordPress.com にログインしている人だけ)が見れるメモ欄を挿入する」と違うところは、Stylish に追加している CSS が、CSS スタイルシートエディターから Stylish の方へ移されただけです。

Stylish に CSS を追加するには、まず、以下のアイコンをクリック後、「Manage」ボタンをクリック。

Menubar

「Edit」をクリック。

adfafdas

すると、以下のような欄が現れるので、

fsafasd

CSS を追加し、

afafads

「Spplies to:」のところに

afadfs

表示を修正したいページの先頭部分の URL を追加し、

adfafdas-1

「Save Style」ボタンをクリックすると、

adsfasfdas

該当ページでは以下のような表示になります。

agdvfafdas

該当ページでないところでは以下のような表示になります。

adsgfagvdfs

「Disable」ボタンを押すと、

adsfasdfsa

以下のように表示が薄くなり、

adsfafd

以下のような感じの表示になり、

adfafafads

CSS の登録はしていても、一時的にその CSS が効かないようにすることが可能です。

adsfafasd

rect3015

adfadfad

たとえば、自分のパソコンでだけ、以下のように表示を変更したりすることができます。実際にはこのような使い方はしませんけれども、CSS 編集のトレーニングにはなると思います。

Google-1

rect3015

Google

以上、以前の記事の修正を兼ねての、自分のパソコンでだけ表示を変更することのできる mac の Safari の拡張機能「Stylish」の紹介でした。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。