コメント欄・コメントパレット（$comments）の中身

[PR]

▶2024/04/27 Sat.
▶
▶CM()

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

コメント欄・コメントパレット（$comments）の中身

まとめ図解。
協賛会員のコメントパレットがどうなっているかは分からない。

▼tableやdivにclass名、id名の指定があるものを主に記載しています。

【全体像】

【コメントパレット内詳細】

【コメントパレット内詳細２】

【協賛会員コメパレ推測】
会員じゃないので勘です。間違ってたらすんません。

【外部スタイルシート（公式設定）について】
コメントパレットには公式が指定している外部スタイルシートが２種類存在する。
パレットVer.7を使用した場合に適用されるのが「CommentPalette.css」
パレットVer.8とVer.9を使用した場合に適用されるのが「common/CBlogVM.css」
公式が指定するパレットの外部スタイルシートはまさかの<body>内に記載されているので、
埋め込みスタイルシートより記述が優先される事になる。らしい。
この外部cssより埋め込みcssを優先させるには、条件付きセレクタを使用する必要がある。
「!important」を使っても良いかもしれないが、多用するものでもないと思うので。
↓（参考URL：cssの優先順位について、分かりやすくまとめて下さっています。）
＜ttp://www.ne.jp/asahi/hatakeyama/design/csslayout/tips/index07.html＞

以下、外部スタイルシート（２種）の中身メモ。
２つのcssで共通する指示にハイライトを入れています。

※【Ver.7】の89行目、【ver.8 ＆ ver.9】の124行目にある「#UploadCmd .UploadButton」は「#UploadCmd #UploadButton」の間違え。なので中の記述は無効となる。

【Ver.7】CommentPalette.css【中身】

@charset "utf-8";

#PalletPaneH {
	/*float: left;
	width: 100%;*/
	text-align: center;
	background-color: #ffffff;
}		
#PalletPaneH .PalletButtonTitle {
	font-size: x-small;
	text-align: center;
	background-color: #dddddd;
}
#PalletPaneH #ColorButton,
#PalletPaneH #PenButton {
	border-collapse: collapse;
	border: 0px;
}
#PalletPaneH #ColorButton td,
#PalletPaneH #PenButton td {
	border: none;
	padding: 0px;
	text-align: center;
	background-color: #ffffff;
	cursor: pointer;
}
#PalletPaneH #PenButton td {
	width: 15px;
}
#PalletPaneH #ColorButton td:hover,
#PalletPaneH #PenButton td:hover {
	background-color: #bbccff;
}
#PalletPaneH .PalleteCommand {
	text-align: center;
}
#PalletPaneH .PalleteCommand select {
	font-size: x-small;
}
#PalletPaneH #ColorButton .Color {
	width: 14px;
	height: 28px;
	border: solid 1px #eeeeee;
	margin: 3px 1px 3px 1px;
}
#PalletPaneH #ColorButton .ColorRainbow {
	width: 14px;
	height: 15px;
	border: solid 1px #eeeeee;
	margin: 3px 1px 3px 1px;
}
#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
	border: none;
	width: 14px;
	height: 3px;
	font-size: 0em;
}
#PalletPaneH #PenButton .PenWidth {
	font-size: 1px;
	border: solid 1px #eeeeee;
	background-color: #000000;
	margin: 3px 1px 3px 1px;
	margin-left: auto;
	margin-right: auto;
	height: 28px;
}
#PalletPaneH #UndoButton {
	color: #666666;
	font-size: xx-small;
	text-align: center;
	cursor: pointer;
	float: left;
	height: 38px;
	width: 34px;
	background: white url("http://img01.pipa.jp/tegaki/img/UndoV.png") no-repeat bottom center;
	margin: 0 auto;
}
#PalletPaneH #UndoButton:hover {
	background-color: #bbccff;
}
#UploadCmd {
	/*float: left;*/
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	border: 0px;
	margin: 2px 0px 15px 0px;
}
#UploadCmd .UploadButton {
	width: 56px;
	height: 23px;
	border: none;
	background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
	font-size: 0em;
	color: #ffffff;
	cursor: pointer;
	vertical-align: top;
}
#PalletPaneH #RedoButton {
	color: #666666;
	font-size: xx-small;
	text-align: center;
	cursor: pointer;
	float: left;
	height: 38px;
	width: 34px;
	background: white url("http://img01.pipa.jp/tegaki/img/RedoV.png") no-repeat bottom center;
	margin: 0 auto;
}
#PalletPaneH #RedoButton:hover {
	background-color: #bbccff;
}

【ver.8 ＆ ver.9】common/CBlogVM.css【中身】

@charset "utf-8";

table {
	border-collapse: collapse;
	border-spacing: 0;
	padding: 0;
	margin: 0;
}
table td {
	padding: 0;
	margin: 0;
	vertical-align: top;
}
#PalletPaneH {
	text-align: center;
	width: 484px;
	background-color: #ffffff;
	border: 2px solid #ddd;
	margin: 8px auto 0px auto;
}
#PalletPaneH .PalletButtonTitle {
	font-size: x-small;
	text-align: center;
	background-color: #dddddd;
}
/*#PalletPaneH #ColorButton,
#PalletPaneH #PenButton {
	border-collapse: collapse;
}*/
#PalletPaneH #ColorButton td,
#PalletPaneH #PenButton td	{
	padding: 0px;
	text-align: center;
	background-color: #ffffff;
	cursor: pointer;
}
#PalletPaneH #PenButton td {
	font-size: 12px;
	width: 16px;
}
#PalletPaneH #PenButton td .WidthNum {
	float: left;
	width: 16px;
}
#PalletPaneH #ColorButton td:hover,
#PalletPaneH #PenButton td:hover {
	background-color: #bbccff;
}
#PalletPaneH .PalleteCommand {
	text-align: center;
	padding-top: 4px;
}
#PalletPaneH .PalleteCommand select {
	/*font-size: x-small;*/
}
#PalletPaneH #ColorButton .Color {
	width: 14px;
	height: 28px;
	border: solid 1px #eeeeee;
	margin: 2px 1px 2px 1px;
}
#PalletPaneH #ColorButton .ColorRainbow {
	width: 14px;
	height: 15px;
	border: solid 1px #eeeeee;
	margin: 3px 1px 3px 1px;
}
#PalletPaneH #ColorButton .ColorRainbow .ColorRainbowPart {
	border: none;
	width: 14px;
	height: 3px;
	font-size: 0em;
}
#PalletPaneH #PenButton .PenWidth {
	font-size: 1px;
	border: solid 1px #eeeeee;
	background-color: #000000;
	margin: 3px 1px 3px 1px;
	margin-left: auto;
	margin-right: auto;
	height: 28px;
	float: left;
}
.CommandButton {
	font-size: 7px;
	text-align: center;
	cursor: pointer;
	height: 20px;
	width: 20px;
	border: solid 1px #aaa;
	margin: 0 4px 4px 0;
	overflow: hidden;
	float: left;
}
.CommandButton.Small {
	font-size: 13px;
	height: 18px;
	width: 18px;
	margin: 0 2px 0 0;
}
.CommandButton:hover {
	background-color: #bbccff;
}
#UndoButtonS {
	background: white url("http://img01.pipa.jp/tegaki/img/UndoV4.png") no-repeat bottom center;
}
#RedoButtonS {
	background: white url("http://img01.pipa.jp/tegaki/img/RedoV4.png") no-repeat bottom center;
}
#ExpandButton {
	background: white url("http://img01.pipa.jp/tegaki/img/Expand.png") no-repeat bottom center;
}
#ShrinkButton {
	background: white url("http://img01.pipa.jp/tegaki/img/Shrink.png") no-repeat bottom center;
}
#UploadCmd {
	/*float: left;*/
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	border: 0px;
	margin: 2px 0px 15px 0px;
}
#UploadCmd .UploadButton {
	width: 56px;
	height: 23px;
	border: none;
	background: url(http://img01.pipa.jp/tegaki/img/UploadButton3.png) no-repeat 0 0;
	font-size: 0em;
	color: #ffffff;
	cursor: pointer;
	vertical-align: top;
}
#CommentPane {
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
	top: 0;
	overflow: hidden;
}
.ContentsList .CommentDetail,
.ContentsList .CommentDetail .CmtImg {
	height: auto;
	min-height: 160px;
}
#ColorButton #EraserButton {
	border-left: solid 1px #cccccc;
	border-top: solid 1px #cccccc;
	border-right: solid 1px #888888;
	border-bottom: solid 1px #888888;
	margin: 2px 1px 1px 1px;
	height: 28px;
	width: 14px;
}
#ColorButton #EraserButton #Eraser {
	height: 18px;
	width: 14px;
	padding-top: 4px;
	border-top: 6px solid #ffffff;
	background-color: #00dddd;
	font-size: 9px;
}

Comment

現在、新しいコメントを受け付けない設定になっています。