記事を書きたい時、wordpressの初期設定って「太字」「斜め」「引用」「左寄せ」「右寄せ」・・

と十ちょっとしか装飾できませんね。。

使い始めたばかりの時、テーマをいじって、デザインを変えることは、楽しくてやってみたものの、記事をもっと見やすく、もっと着色して書きたいのに、どーやるのー?って、途方に暮れていました!

調べていけば、プラグインにぶち当たるのですが、もっと可愛く色付けしたい!と思ったときは、プラグインに頼らず、可愛くカスタマイズできることをみつけました!

スタイルシートにコピペすれば、蛍光ペンや、文字色を簡単に変えることが出来るようです。

 

//・・・・・・・・・・・・ここから・・・・・・・・・・・・・・・・

// 文字装飾用のボタンを追加
function add_my_quicktag() {
?>
<script type=”text/javascript”>
QTags.addButton(‘h2′,’見出し(大)’,'<h2>’,'</h2>\n’);
QTags.addButton(‘h3′,’見出し(中)’,'<h3>’,'</h3>\n’);
QTags.addButton(‘bold’,’太字’,'<strong>’,'</strong>’);
QTags.addButton(‘red’,’赤字’,'<span class=”moji-red”>’,'</span>’);
QTags.addButton(‘blue’,’青字’,'<span class=”moji-blue”>’,'</span>’);
QTags.addButton(‘green’,’緑字’,'<span class=”moji-green”>’,'</span>’);
QTags.addButton(‘underline’,’下線’,'<span class=”moji-underline”>’,'</span>’);
QTags.addButton(‘pen-yellow’,’蛍光(黄)’,'<span class=”pen-yellow”>’,'</span>’);
QTags.addButton(‘pen-pink’,’蛍光(桃)’,'<span class=”pen-pink”>’,'</span>’);
</script>
<?php
}
add_action(‘admin_print_footer_scripts’,’add_my_quicktag’);
?>

//・・・・・・・・・・・・・・・ここまで・・・・・・・・・・・

 

をfunction.phpに追加する。

function.phpはどこにあるかというと、wordpressを管理者ではいって、テーマの編集。

もう一つ、スタイルシートに

//・・・・・・・・・・・ここから・・・・・・・・・・・・・・

 

div.post strong{
font-weight: bold;
}
div.post span.moji-blue{
color: #0000ff;
}
div.post span.moji-red{
color: #ff0000;
}
div.post span.moji-green{
color:#00ff00;
}
div.post span.moji-underline{
text-decoration: underline;
}
div.post span.pen-yellow{
background: linear-gradient(transparent 60%, #ffff66 60%);
font-weight: bold;
}
div.post span.pen-pink{
background: linear-gradient(transparent 60%, #ffc0cb 60%);
font-weight: bold;
}
//・・・・・・・・・・・・・・ここまで・・・・・・・・・・・・・
を追加する。
管理者から入って、テーマの編集でスタイルシート style.cssに追加します。
keikou_botan

 

投稿のビジュアルがこのように変わります!