<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>WEBのお勉強とその他趣味的な感じで &#187; 検索結果:  &#187;  CKEditor</title>
	<atom:link href="http://matai.main.jp/wp/search/CKEditor/feed/rss2" rel="self" type="application/rss+xml" />
	<link>http://matai.main.jp/wp</link>
	<description>覚書的な・・・ことから初めていきます。</description>
	<lastBuildDate>Wed, 24 Jun 2015 08:12:39 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://matai.main.jp/wp/search/CKEditor/" />
		<item>
		<title>WordPressコメント欄のカスタマイズなどなど</title>
		<link>http://matai.main.jp/wp/wordpress_comment</link>
		<comments>http://matai.main.jp/wp/wordpress_comment#comments</comments>
		<pubDate>Sun, 03 Jul 2011 06:04:02 +0000</pubDate>
		<dc:creator>またい</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://matai.main.jp/wp/?p=832</guid>
		<description><![CDATA[CKEditorを導入したが、コメントで使用するには、 Wordpressではセキュリティの関係で制限をしてあるため、 使用できるＨＴＭＬタグを調整する必要があります。 CKEditorについては⇒投稿・コメントビジュア &#8230; <a href="http://matai.main.jp/wp/wordpress_comment">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>CKEditorを導入したが、コメントで使用するには、<br />
Wordpressではセキュリティの関係で制限をしてあるため、<br />
使用できるＨＴＭＬタグを調整する必要があります。<br />
CKEditorについては⇒<a href="/wp/ckeditor">投稿・コメントビジュアルエディタ（CKEditor）</a></p>
<p>その前に、CKEditorの使い方で忘れそうなのでメモ<br />
改行するするとき、<br />
Enterのみ：HTMLタグ「p」となり、少し間の開いた改行になる。<br />
Shift+Enter：HTMLタグ「br 」となり改行、間が開かない。</p>
<p>WordPressのコメントのテキストボックスの下部には、<br />
「次のHTMLタグと属性が使えます・・・」<br />
と記載があります。デフォルトのままだと、この制限のため、<br />
絵文字や文字色の変更が出来ません。</p>
<p>この制限を調整する方法をご紹介します。</p>
<p>何でも解除してしまうのも、問題があるので<br />
良く考えて調整しましょう。<br />
<span id="more-832"></span><br />
まずは、コメントツールバーの内容を整理してみましょう。<br />
<a href="/wp/ckeditor">投稿・コメントビジュアルエディタ（CKEditor）</a>で書いたのですが、<br />
「ckeditor.config.js」を変更します。<br />
このサイトの場合は、「記事投稿」、「ページ作成」の場合は「Full」<br />
コメントの場合は、「WordpressFull」にしてあります。<br />
「ckeditor.config.js」内の「config.toolbar_WordpressFull」の内容を変更します。<br />
設定変更する前のコメントツールバーと照らし合わせながら、作業をすれば<br />
なんとなく分かります。<br />
参考までに当サイトは</p>
<pre class="brush: jscript; title: ソースコード; notranslate">
// WordPress full toolbar
config.toolbar_WordpressFull = [
  ['Source'],
  ['Undo','Redo'],
  ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
  ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
'/',
  ['Link','Unlink'],
  ['Font','FontSize'],
  ['TextColor','BGColor'],
  ['Smiley','HorizontalRule','SpecialChar'],
  ['Maximize', 'ShowBlocks']
];
</pre>
<p>上から、<br />
ソース、ビジュアルエディタの切り替えボタン<br />
元に戻す、やり直し<br />
太字、斜体、下線、打ち消し線、[区切り線]、添え字、上付き文字<br />
段落番号、箇条書き、[区切り線]、インデント解除、インデント、ブロック引用<br />
[改行]<br />
リンク挿入/編集、リンク削除<br />
フォント、サイズ<br />
テキスト色、背景色<br />
絵文字、横罫線、特殊文字挿入<br />
最大化、ブロック表示</p>
<p>テーマをword2003にして、比較的wordっぽくし、<br />
良く使いそうなものを選別しました。<br />
また、セキュリティ上まずそうなもの（objectタグ、フラッシュなど）や、<br />
ＨＴＭＬ構文上無秩序に使ってほしくないもの（見出し文字など）は、<br />
未使用としました。<br />
使用しているHTMLタグ,属性は、</p>
<p>太字：strong<br />
斜体：em<br />
下線：u<br />
打ち消し線：strike<br />
添え字：sub<br />
上付き文字：sup<br />
段落番号：ol,li<br />
箇条書き：ul,li<br />
インデント解除、インデント：p　属性：style（margin-left: 40px（この数字を変化）)<br />
ブロック引用：blockquote<br />
リンク挿入/編集、リンク削除：a, 属性：href, target, title, relなど<br />
フォント：span 属性：style（font-family）<br />
サイズ：span 属性：style（font-size）<br />
テキスト色：span 属性：style（color）<br />
背景色：span 属性：style（background-color）<br />
絵文字：img 属性：alt, height, src, widthなど<br />
横罫線：hr</p>
<p>以上のHTMLタグ、属性を使えるように変更する。<br />
その方法は、</p>
<p>wp-includes内のkses.phpを書き換える<br />
$allowedtagsの内容で、コメント内で使用できるHTMLタグ、属性を制限しているようです。<br />
$allowedposttagsが、投稿で使えるタグのようですので、これを参考にしながら<br />
追加していきます。もともとあって、コメントアウトしてあるものもありました。<br />
参考までの当サイトの場合は</p>
<pre class="brush: php; title: ソースコード; notranslate">
/**
 * Kses allowed HTML elements.
 *
 * @global array $allowedtags
 * @since 1.0.0
 */
$allowedtags = array(
	'a' =&gt; array(
		'href' =&gt; array (),
		'target' =&gt; array (),
		'rel' =&gt; array (),
		'title' =&gt; array ()),
	'abbr' =&gt; array(
		'title' =&gt; array ()),
	'acronym' =&gt; array(
		'title' =&gt; array ()),
	'b' =&gt; array(),
	'blockquote' =&gt; array(
		'cite' =&gt; array ()),
		'br' =&gt; array(),
	'cite' =&gt; array (),
	'code' =&gt; array(),
	'del' =&gt; array(
		'datetime' =&gt; array ()),
	//	'dd' =&gt; array(),
	//	'dl' =&gt; array(),
	//	'dt' =&gt; array(),
	'em' =&gt; array (), 'i' =&gt; array (),
	//	'ins' =&gt; array('datetime' =&gt; array(), 'cite' =&gt; array()),
		'li' =&gt; array(),
		'ol' =&gt; array(),
		'p' =&gt; array(
			'class' =&gt; array (),
			'align' =&gt; array (),
			'dir' =&gt; array(),
			'lang' =&gt; array(),
			'style' =&gt; array ()),
	'span' =&gt; array (
		'class' =&gt; array (),
		'dir' =&gt; array (),
		'align' =&gt; array (),
		'lang' =&gt; array (),
		'style' =&gt; array (),
		'title' =&gt; array ()),
	'q' =&gt; array(
		'cite' =&gt; array ()),
	'strike' =&gt; array(),
	'strong' =&gt; array(),
		'sub' =&gt; array(),
		'sup' =&gt; array(),
		'u' =&gt; array(),
		'ul' =&gt; array(),
	'hr' =&gt; array (
		'align' =&gt; array (),
		'class' =&gt; array (),
		'noshade' =&gt; array (),
		'size' =&gt; array (),
		'width' =&gt; array ()),
	'img' =&gt; array(
		'alt' =&gt; array (),
		'align' =&gt; array (),
		'border' =&gt; array (),
		'class' =&gt; array (),
		'height' =&gt; array (),
		'hspace' =&gt; array (),
		'longdesc' =&gt; array (),
		'vspace' =&gt; array (),
		'src' =&gt; array (),
		'style' =&gt; array (),
		'width' =&gt; array ()),
);
</pre>
<p>以上で、コメント欄のカスタマイズは終了です。<br />
ただ、このままでは、<br />
「次のHTMLタグと属性が使えます・・・」<br />
の文字がたくさん増えてしまいとても邪魔です。<br />
ここに文字を出さなくしてもいいのですが、確認も出来なくなるので、<br />
CSSで隠すことにしました。<br />
方法は、使っているCSS（テーマのフォルダにあるstyle.cssなど）に<br />
下記の項目を追加</p>
<pre class="brush: css; title: ソースコード; notranslate">
.form-allowed-tags {
    display:none;
}
</pre>
<p>以上が、一連の変更内容です。</p>
<p>また時間があったら、絵文字追加してみようかと思っています。</p>
]]></content:encoded>
			<wfw:commentRss>http://matai.main.jp/wp/wordpress_comment/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://matai.main.jp/wp/wordpress_comment" />
	</item>
		<item>
		<title>投稿・コメントビジュアルエディタ（CKEditor）</title>
		<link>http://matai.main.jp/wp/ckeditor</link>
		<comments>http://matai.main.jp/wp/ckeditor#comments</comments>
		<pubDate>Sun, 03 Jul 2011 04:04:47 +0000</pubDate>
		<dc:creator>またい</dc:creator>
				<category><![CDATA[HTML]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://matai.main.jp/wp/?p=821</guid>
		<description><![CDATA[WordPressプラグインの投稿・コメントビジュアルエディタ（CKEditor） を導入してみましたので、ご報告。 と、いっても実は私、ビジュアルエディタが好きではないんです。 ソースを勝手に変更してしまうため、ＣＳＳ &#8230; <a href="http://matai.main.jp/wp/ckeditor">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>WordPressプラグインの投稿・コメントビジュアルエディタ（CKEditor）<br />
を導入してみましたので、ご報告。</p>
<p>と、いっても実は私、ビジュアルエディタが好きではないんです。<br />
ソースを勝手に変更してしまうため、ＣＳＳやJavascriputで使用するものを<br />
不要と判断して、勝手に削ったり、自分の意図しないタグや、無意味な空タグを<br />
生成するからです。<br />
デフォルトで入っている改行と、ちょっとしたタグをワンタッチで生成してくれる<br />
ものが結構気に入っています。</p>
<p>そういったことから、今回は、コメントを強化のみを目的として<br />
導入しました。</p>
<p>今回ダウンロードしてみたのは</p>
<ul>
<li>CKEditor For WordPress</li>
<li>Dean&#8217;s FCKEditor For WordPress</li>
</ul>
<p>現在、「CKEditor For WordPress」を利用しています。<br />
ほぼ同じようなプラグインですが、設定の違いを長所・短所を踏まえて<br />
解説します。<br />
<span id="more-821"></span><br />
まずは、ダウンロード先<br />
<strong>CKEditor For WordPress</strong><br />
⇒<a href="http://wordpress.org/extend/plugins/ckeditor-for-wordpress/" rel="external">CKEditor For WordPress</a><br />
日本語化<br />
⇒<a href="http://lovelog.eternal-tears.com/wordpress/wp-plugin-ja/ckeditor-for-wordpress-ja/" rel="external">CKEditor For WordPressの日本語版を配布 | Lovelog+*</a><br />
日本語化の設定方法など<br />
⇒<a href="http://lovelog.eternal-tears.com/wordpress/wp-plugin/ckeditor-for-wordpress/" rel="external">CKEditor For WordPress － WordPressのビジュアルエディタを強化するプラグイン |  Lovelog+*</a></p>
<p><strong>Dean&#8217;s FCKEditor For WordPress</strong><br />
⇒<a href="http://www.deanlee.cn/wordpress/fckeditor-for-wordpress-plugin/" rel="external">Dean’s FCKEditor for WordPress &#8211; a WYSIWYG editor plugin : DEAN LEE:/DEV/BLOG</a></p>
<p>両者とも、各言語用jsがあり、使用の際にはパソコンに設定された<br />
言語にて使用できます。</p>
<p>コメントで使用する・しないは両者とも選択できます。<br />
投稿で使用しないという設定は、両者とも出来ません。</p>
<p>大きく違う点は、<br />
投稿時のエディタの選択<br />
「Dean’s FCKEditor for WordPress」：エディタかソースかの選択のみ<br />
「CKEditor For WordPress」：HTMLを選ぶことによって、従来のエディタも使用できる。</p>
<p>コメントツールバーの内容は<br />
「Dean’s FCKEditor for WordPress」：設定画面でカスタマイズできる。<br />
「CKEditor For WordPress」：設定画面では「WordpressBasic」,「WordpressFull」,「Full」の3種類の選択で、細かくカスタマイズするには、「ckeditor.config.js」を書き換えれることにより可能。</p>
<p>「Dean’s FCKEditor for WordPress」は、コメントの返信をするときにバグがありました。<br />
「ＮＵＬＬ」が出て、固まる場合があり。</p>
<p>コメントで使用する場合は、セキュリティの関係から、ｈｔｍｌタグの使用制限があるため、変更する必要があります。（実は、ここではまりました。）<br />
設定変更には、ＰＨＰファイルを直接変更する必要があります。<br />
詳細は、別記事で紹介します。<br />
⇒<a href="/wp/wordpress_comment">WordPressコメント欄のカスタマイズなどなど</a></p>
]]></content:encoded>
			<wfw:commentRss>http://matai.main.jp/wp/ckeditor/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://matai.main.jp/wp/ckeditor" />
	</item>
	</channel>
</rss>
