記事中に自分だけ(ではなくて、WordPress.com にログインしている人だけ)が見れるメモ欄を挿入する

どうやら「自分だけ」ではなくて、「WordPress.com にログインしている人だけ」になっていたようです。自分だけ見れる部分を作りたい場合には、記事「「Stylish」という Safari の拡張機能を使って、自分が使っているパソコンだけ表示を変える」をご参照ください。

自分自身にはこのように見えるところ、

sdfadgad

ログアウトすると、

gsfgs

見えなくなる、というメモ欄の作り方についての覚書です。

fdgsfdgsd

私はブログの記事を書くとき、iThoughtsHD で情報をブックマークし、

dfgsdfgfds

UPAD でネタ帳を作り、

sfgsfdgsfd

CSS などのこまごました断片情報は Simplenote に保管し、

Simplenote

作成中の記事は下書きとして保存し、ということをやっています。

fgdfgdf

自分だけ見たい記事については「非公開」に設定しておく方法もあると思うのですが、

dgagasdg

私の場合、記事まるごと見せたくない、ということはほとんどなく、かといって、同じ内容について、いろんなところにメモが散らばっているというのは、やや頭が混乱する部分があります。

そこで、すでに公開している記事に自分にしか見えないメモ欄を作ることを思いつきました。

原理としては、ログインしている状態のときだけ、body のクラスに「logged-in」が追加されている、というのを利用します。

fgadgadfgafd

カスタム CSS に以下の CSS を追加し、

  • CSS「自分だけ(ではなくて WordPress.com にログインしている人だけが)見れるボックス」の改訂履歴
    最終更新日:2013年4月19日
    改訂内容:「ul, ol, p」の余白の設定を追加。
    /* 自分だけ見れるボックス */
    .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;
    }
    
    .logged-in .memo {
    	display: block;
    }
    作成日:2013年3月29日
    /* 自分だけ見れるボックス */
    .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;
    }
    
    .memo:before {
        position: relative;
        content: "";
        width: 70px;
        height: 40px;
        float: right;
    }
    
    .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;
    }
    
    .logged-in .memo {
        display: block;
    }
/* 自分だけ見れるボックス */
.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;
}

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

記事の方に以下のような記述を追加すると、

<div class="memo">
WordPress.com のカスタマイズ例
</div>

ログインしている状態で、以下のように表示されます。

sdfadgad

とりあえず作成しては見ましたが、実際に活用していくことになるかどうかについてはまだわかりません。かなり頻繁に活用しています(2013年5月22日追記)。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中