TinyMCEビジュアルエディタのフォントを明朝体から好きなフォントへ変更する。

2015年08月14日 正午の月齢:29.4  月名:月隠  潮汐:大潮 月齢:29.4[月隠] 潮汐:大潮 | 2年前 | 旧暦:2015年07月01日 | 先勝
WordPress | コメントはありません

この記事を読むのに必要な時間の目安: 5分ぐらい

WordPressを更新すると、いろいろと手を加えていたコアファイルの設定が元に戻ってしまいます。できれば毎回同じような作業をしたくないっていうことで、今回はビジュアルエディタのフォントを好きなフォントに設定してみます。

もともとは明朝体っぽいフォントなのですが、どうも記事を書きにくい。決して明朝体が嫌いってわけじゃなく、ワードなんかMS明朝10ポイントしか使わないんですけど、WordPressのときはダメなんだなぁ。英数字のフォントもなんかヘンだし。

tinymce-font_before

で、かつてはwp-includes/js/tinymce/skins/wordpress/wp-content.cssを毎回グリグリといじっていました。body {font-family: "xxx";}みたいな感じで。

新たな方法として、ビジュアルエディタにCSSを適用させます。

その方法を探してみると…くふふ、やっぱりありました。「WordPressビジュアルエディタの明朝体フォントを変更する方法」という、ズバリそのまんまな名前です。ま、詳しいしい方法はリンク先を見てもらえばよいのですが、ちょっと簡単にまとめておきます。

その前に、

明朝体でもまったく問題ない、という方ならそのままでも良いのですが、
できれば実際に記事を公開した時の表示と同じ書式のほうがメリットが多いです。

記事を作成していると、
“作成 → プレビュー 編集 → プレビュー → 編集…”という作業を頻繁に行うのですが、
ビジュアルエディタの書式が明朝体のままだとプレビューした時にかなりズレが出てきて
余計な編集作業が増えてしまいます。

このサイトの執筆者は句読点ごとに改行するようでして、「明朝体のままだとプレビューした時にかなりズレが出てきて余計な編集作業が増えてしまいます」というのが明朝体が気に入らない理由のようですが、ボクは決してそんな高い意識ではなくて、単に「でっかいふにゃふにゃした文字では気持ちよくカケねーよ」的な理由なのです。

で、方法。

  1. editor-style.cssというスタイルシートファイルを作る。
  2. FTPソフトを使って、今使っているテーマのフォルダ内に保存する。
  3. 今使っているテーマのfunctions.phpにビジュアルエディタのフォント変更に関する記述をする。

という順序で進めていきます。

Dreamweaver8でcssの新規作成を選び、以下の内容をコピペ。そしてUTF-8で名前をつけて保存。

/* フォントを指定するクラス */
body.mceContentBody {
font: 13px/1.6 "メイリオ", "MS Pゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
}
.editor-area a {
color: #339933;
text-decoration: underline;
}
.editor-area h3 {
padding: 3px 13px 6px;
font-size: 116%;
color: #666666;
margin-bottom: 1em;
border-bottom: 1px solid #CCCCCC;
}

をそのまま使わせてもらいましたが、お好みに応じて値を変更すればいいと思います。

次にテーマ内へ保存するのですが、これもDreamweaver8のFTPでサイト管理しているので、特に転送ソフトを使わずにテーマファイルのフォルダ内に転送完了。

今使っているテーマのfunctions.phpをこれまたDreamweaver8からほじくり出して、

//---------------------------------------------------------------------------
// ビジュアルエディタのフォント変更
//---------------------------------------------------------------------------
add_editor_style('editor-style.css');
function custom_editor_settings( $initArray ){
$initArray['body_class'] = 'editor-area'; //オリジナルのクラスを設定する
return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

と、コメントアウト部分も含めてまたまた丸ごとパク&コピペ。functions.phpのいちばん下に追加しました。

tinymce-font_after

むはーっ、きたきたー。MSゴシックだー。これがWordPressをバージョンアップしても変わらずに維持されるなんて、ぼかぁ幸せだなぁ。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2015/08/tinymce-font.html/trackback

今が買い時!! 在庫が尽きる前にnexus7(2013)を購入した。

2015年08月10日 正午の月齢:25.4  月名:二十六夜  潮汐:若潮 月齢:25.4[二十六夜] 潮汐:若潮 | 2年前 | 旧暦:2015年06月26日 | 先勝
nexus7 | コメントはありません

この記事を読むのに必要な時間の目安: 2分ぐらい

nexus7の2012は持っていて、これといった不満はなかったのですが、伊織が「友達との連絡にLINEを使いたい(正確に言うと、伊織の友達が、電話だとメンドクサイのでLINEで連絡したい)。」ということで、じゃあ2012は家に常置しておいて、通勤のお供にもう1つ買おうか、というのが発端です。

何を買うか、という点ではもうnexus7(2013)しか候補になくて、生産中止になってから在庫は減っているのでいつまで買えるかわからない。でもあまりお金はない。そんな理由もあって、安い16GBを探して購入しました。かなり値段が下がっていて嬉しかったー。

そんなわけで、nexus7(2012)、ユミコちゃんのMeMOPad7に加えて、わが家に3台目のタブレットがやってきました。

nexus7-2012 nexus7-2013 memopad7

さて、最初の感想ですが、薄くて軽い! 薄すぎて逆に持ちにくく感じたほどです。いちばん理想の厚さはMeMOPad7かな。

それから、背面カメラがついていて、画質も悪くないところも評価できます。実際このカメラを使う機会はあまりないとは思うのですが、今後の使い方次第では役に立ってくれそう。

16GBということで容量で不安はあるものの、余分なものを入れなければ大丈夫でしょう。

このテの製品で気になる、充電部分のUSBのコネクタですが、もういつ壊れるか不安で仕方がありません。でもnexus7(2013)はQi(ワイヤレス給電)にも対応しているので、安心。

最近は8インチや9インチのように大型化の傾向があるスマートフォン・タブレットですが、普段持ち歩くんだったら7インチがちょうどいいんじゃないかな。これ以上大きくなったら重くなるしかさばるし、寝転んで使うことも難しそう。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2015/08/get_nexus7-2013.html/trackback

念願の「KATO 113系湘南色」を手に入れた。

2015年08月3日 正午の月齢:18.4  月名:寝待月  潮汐:中潮 月齢:18.4[寝待月] 潮汐:中潮 | 2年前 | 旧暦:2015年06月19日 | 赤口
鉄道模型 | コメントはありません

この記事を読むのに必要な時間の目安: 2分ぐらい

113

子供のころから利用していた113系。30年以上前のTOMIXのカタログに載っていた113系は、あまりにもありふれた感があって、面白くない存在でした(でも関西線快速色は欲しかった)。

最近になって、117系、221系、223系とだんだん手元に集まってくると、「あーそういえば113系がないなぁ。」なんて思ったものの、買いたいときに買えないのが鉄道模型の世界。このたびようやく縁があって入手することができました。

KATO 10-808 113系 湘南電車」は鉄道模型の初心者用セットのような売られ方をしていますが、出来栄えは申し分なく、十分満足させてくれます。

唯一気になるのは連結器。最近の自分的な恒例儀式として、いつものように連結器を交換です。

113-02

貨車とは違い、電車でこれくらいの間隔であればそんなに不満ではないのですが、ここはやはりジャンパ線の表現という毒牙にかかった悲しい性で、KATOカプラー密連形をねじ込みます。

113-03

M車は台車周りをバラすのに少し苦労しましたが、それでも就寝前の限られた時間で作業は終わり。

113-04

1mmくらい間隔が狭まったかな。あと2mm縮まるとより実感的なんでしょうけど、いやもうこれで十分満足です。あまり無茶な改造はやめときましょう。でもパンタグラフだけは塗装したいなぁ。

113-01

大都会からど田舎までどんな風景にもぴったりな113系湘南色。風景を選ばないという点ではまさに最強クラス。誰でも知っているので、ウケがいいんですよねー。

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2015/08/kato-113.html/trackback