カラーピッカー＆文字リサイズ for Serene Bach

SereneBach 2007.03.23

カラーピッカー＆文字リサイズごめぷろぐ | Serene Bach管理画面のカラーピッカー作ってみました♪
こちらで紹介されていたカラーピッカーを参考に、さらにカスタマイズしてみました。
DL：FontresizeColorpicker.zip

FontresizeColorpicker/lib/resource/ja/
　　　　　　　　　　　　　　　　　　　entry.html
　　　　　　　　　　　　　　　　　　　script.js
　　　　　　　　　　　　　　　　　　　style.css

が入っています。
Serene Bachを置いているディレクトリにアップすれば、管理画面が変わります。

手動でカスタマイズしたい方は、続きへ↓
心配な方、自信のある方も、バックアップはとりましょうね。
-------------------------------------

【追記】
記事（エントリー）に絵文字を使う for Serene Bach
sb絵文字入力支援スクリプト
などを導入されている方は、手動でentry.htmlにソースを挿入しないと、絵文字がが使えなくなってしまいます。私自身絵文字は導入してなかったもので詳しくなかったので、既にうっかり上書きしてしまった方がいらっしゃったらごめんなさい(-_-;)

■entry.html
122行目あたり（先に追記部分にある、下部の方を挿入しましょう）

<div class="entry_tool">

<a href="#" onclick="return addHtmlTag('entry_more','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>

<ul class="entry_tool_fontresize">
<li><a href="#" onclick="return fontResize('entry_body','10px')">10px</a></li>
<li><a href="#" onclick="return fontResize('entry_body','12px')">12px</a></li>
<li><a href="#" onclick="return fontResize('entry_body','14px')">14px</a></li>
<li><a href="#" onclick="return fontResize('entry_body','16px')">16px</a></li>
<li><a href="#" onclick="return fontResize('entry_body','18px')">18px</a></li>
</ul>
<ul class="entry_tool_colorp">
<li><a href="#" onclick="return addColor('entry_body','ED3E2C')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','F77A00')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','5EB42A')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','4487F2')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','333333')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','666666')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','999999')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','CCCCCC')">■</a></li>
<li><a href="#" onclick="return addColor('entry_body','FFFFFF')">■</a></li>
</ul>
</div>

88行目あたり（本文部分、挿入しましょう）

<div class="entry_tool">

<a href="#" onclick="return addHtmlTag('entry_body','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>

<ul class="entry_tool_fontresize">
<li><a href="#" onclick="return fontResize('entry_more','10px')">10px</a></li>
<li><a href="#" onclick="return fontResize('entry_more','12px')">12px</a></li>
<li><a href="#" onclick="return fontResize('entry_more','14px')">14px</a></li>
<li><a href="#" onclick="return fontResize('entry_more','16px')">16px</a></li>
<li><a href="#" onclick="return fontResize('entry_more','18px')">18px</a></li>
</ul>
<ul class="entry_tool_colorp">
<li><a href="#" onclick="return addColor('entry_more','ED3E2C')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','F77A00')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','5EB42A')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','4487F2')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','333333')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','666666')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','999999')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','CCCCCC')">■</a></li>
<li><a href="#" onclick="return addColor('entry_more','FFFFFF')">■</a></li>
</ul>
</div>

■style.css
265行目あたり

.entry_tool ul {
line-height:1.2;
list-style-type: none;
margin: 0px;
padding: 0px;
float:right;
clear:right;
}
.entry_tool li {
height:20px;
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.entry_tool li a {
text-decoration:none;
display:block;
}
.entry_tool_fontresize li {
font-size:10px;
}
.entry_tool_fontresize li a {
color:#333;
background-color: #DDDDDD;
padding: 2px 5px;
margin-left: 2px;
border: 1px solid #999999;
}
.entry_tool_colorp li {
}
.entry_tool_colorp li a {
font-size:12px;
margin-left: 2px;
padding: 0px 2px;
}

■script.js
最後尾に

// color picker
function addColor(idName, tag, option) {
var obj = this.document.getElementById(idName);
if (!obj) return false;
var bgnTag = (!option) ? Array('').join('') : Array('').join('');
var endTag = Array('').join('');
if (document.selection) {
obj.focus();
var str = document.selection.createRange().text;
document.selection.createRange().text = Array(bgnTag,str,endTag).join('');
} else if ( (obj.selectionEnd - obj.selectionStart) >= 0 ) {
var bgnPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var bfrStr = obj.value.substring(0, bgnPos);
var fcsStr = Array(bgnTag,obj.value.substring(bgnPos, endPos),endTag).join('');
var difLen = fcsStr.length - (endPos - bgnPos);
var aftStr = obj.value.substring(endPos, obj.value.length);
obj.value = Array(bfrStr,fcsStr,aftStr).join('');
obj.setSelectionRange(bgnPos,endPos + difLen);
} else {
obj.value = Array(obj.value,bgnTag,endTag).join('');
}
return false;
}
// fontResize
function fontResize(idName, tag, option) {
var obj = this.document.getElementById(idName);
if (!obj) return false;
var bgnTag = (!option) ? Array('').join('') : Array('').join('');
var endTag = Array('').join('');
if (document.selection) {
obj.focus();
var str = document.selection.createRange().text;
document.selection.createRange().text = Array(bgnTag,str,endTag).join('');
} else if ( (obj.selectionEnd - obj.selectionStart) >= 0 ) {
var bgnPos = obj.selectionStart;
var endPos = obj.selectionEnd;
var bfrStr = obj.value.substring(0, bgnPos);
var fcsStr = Array(bgnTag,obj.value.substring(bgnPos, endPos),endTag).join('');
var difLen = fcsStr.length - (endPos - bgnPos);
var aftStr = obj.value.substring(endPos, obj.value.length);
obj.value = Array(bfrStr,fcsStr,aftStr).join('');
obj.setSelectionRange(bgnPos,endPos + difLen);
} else {
obj.value = Array(obj.value,bgnTag,endTag).join('');
}
return false;
}

Comments:6

はゆる 2007年3月23日 23:43

初めまして。これは便利！と感動しまして、
早速、導入させていただきました。
ありがとうございました〜っ！

mico 2007年3月25日 10:33

おはようございます。
EVERYPLUSサマの記事を拝見して、こちらへ来ました。
前々からフォントを変えて記事を書きたいと思っていたので、
早速、ＤＬさせて頂きました。

ありがとうございました。

ハマダ 2007年9月 7日 15:49

導入させてもらいました♪

柚子 2008年7月 7日 04:42

初めまして、こんにちは。
カラーピッカー導入に関して質問がございます。
お忙しいかと思いますが、よろしくお願いいたします。

文字サイズやカラー変更に便利だと早速導入させていただきましたが、
当サイトの新記事画面で文字化けしてしまいました。
おそらく、当サイトが【UTF-8版】を利用しているからかな？と思ったのですが、
他に何か考えられる原因がありますでしょうか。
文字化けしていても、機能的には利用できるようなので問題はないのですが、
記事を書く際に分かりづらくなってしまったので、お知恵を拝借できれば…と
コメントさせていただきました。

お忙しい中ぶしつけな質問で申し訳ありません。よろしくお願いいたします。
*色々な記事を拝見させていただきました。とっても参考になりました！*

otogawa 2008年7月 8日 01:53

＞柚子さん
はじめまして。
おそらくお察しの文字コードの問題だと思います。
テキストエディタで、直接entry.htmlを開き、該当ソース部分だけを直接書き込むか、
もしくは、DLいただいたentry.htmlの文字コードを、秀丸など、文字コードを変換できるテキストエディタで、EUC→UTF8に変えて、保存していただければ、そのままアップロードしてもOKかと思います。

またご不明な点などございましたら、あおってくださいませ☆
こちらも文字コードの注釈をつけていなかったので、説明不足で申し訳ないです（汗

柚子 2008年7月12日 04:13

お忙しい中レスありがとうございます！

やはり文字コードだったんですね＞＜
早速、entry.htmlの文字コードをEUC→UTF8に変更して保存後、アップロードしたところ、
文字化けがきちんと直りました！！ありがとうございました！！
"変換すればいい"という簡単な事に思い至らなくて、色々考えてしまいました。

問題なく利用もできましたし、これで随分楽になりました！
本当にありがとうございます〜○┓
また何かありましたらよろしくお願いいたします！

Trackbacks:4

TrackBack URL for this entry: http://www.otogawa.com/cms/mt-tb.cgi/99
Listed below are links to weblogs that reference: カラーピッカー＆文字リサイズ for Serene Bach from px*blog

カラーピッカー＆文字リサイズを使う from E V E R Y P L U S 2007-03-25 (日) 06:01: 普段エントリーを書いていて、フォントを弄りたいと思うことはあまりないのですけれど（笑）、そういう機能があれば使うかなとちょっと思ったので、導入してみました。カラーピッカー＆文字リサイズfor Serene Ba...
カラーピッカー＆文字リサイズＤＬ！ from KISS AND KISS 2007-03-25 (日) 11:09: 雨が降っていて暇だったのでカスタマイズ。参考にしたサイト様は、以下の通りでしゅ。E V E R Y P L U S 様| カラーピッカー＆文字リサイズを使うpx*blog 様| カラーピッカー＆文字リサイズ for Serene Bach絵文字...
気分転換＠超一時的！？ from good boy !! 2007-04-08 (日) 01:16: 久しぶりにブログをいじってみました。
新鮮な風はグリーン from 楽園ノ片隅デ 2007-04-08 (日) 21:30: チョコレートのアイスが食べたい。こんばんは、若菜です。今日はブログをちょこっといじってみました[26]といっても、見ているほうからはわか...

カラーピッカー＆文字リサイズ for Serene Bach

関連エントリー

Comments:6

Trackbacks:4