2010年3月 3日

Movable Typeと三点リーダー:変換と表示

 MTで、三点リーダー(…、てんてんてん、点点点)が三つのコンマに変換されてしまったり、下付きに表示されてしまったりする問題についての備忘録です。

コンマに変換されてしまう

 これについては、「オンライン小説なオリジナル小説サイト うにたな」さんがくわしい。

三点リーダーとMovable Type 4(問題解決) - オンライン小説なオリジナル小説サイト うにたな

[ブログ記事設定]内で[Word特有の文字を置き換える]という項目がある。デフォルトでは[Smart Replace]において[対応するASCII文字]にチェックがはいっていると思う。[置き換えない]に変更してほしい。

 バージョンが4.1よりも古い場合(コメント欄も参照)→ MovableType4で三点リーダーを表示する方法 - オンライン小説なオリジナル小説サイト うにたな

下付きに表示されてしまう

 これは下の画像にあるように、文字列の中央に点点点がほしいのに、コンマがならんでいるように下に配置されてしまう現象です。

 これはフォント指定に問題があります。欧文フォントが和文フォントより先に指定されていたり、欧文フォントだけしか指定されていなかった場合に、欧文フォントの配置が適用されてしまうことでこのように下付になってしまいます。
 ですから、和文フォントを指定してやれば、この問題は解決します。

 「ブログ」と「MTの入力画面(ブログの入力画面)」とで変更箇所が異なります。

 ブログ本体のフォント指定は、テンプレートのスタイルシートを変更してやります。
 このブログのテンプレートだと、フォント指定は以下のようになっていました。

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
 
body {
    font-size: 100%;
}
 font-familyでフォントを指定しているので、並びの先頭に和文フォント名を記入しましょう。Windowsだとメイリオや"MS Pゴシック"がいいでしょう。
* {
    margin: 0;
    padding: 0;
    font-family: "MS Pゴシック", Verdana, Arial, sans-serif;
}
 
body {
    font-size: 100%;
}
 ただフォント指定の継承を考えると下記の方が各部のフォント指定がしやすいので使い勝手がいいかな、と思います。
* {
    margin: 0;
    padding: 0;
}
 
body {
    font-size: 100%;
    font-family: "MS Pゴシック", Verdana, Arial, sans-serif;
}

 これでブログの表示はなおります。(ブラウザのキャッシュに古いファイルが保存されている場合があるのでページを再読み込みしてやりましょう)。

 他のテンプレートでも同様にフォントの指定箇所をさがして変更していってください。
 ブログ全体に和文フォントを指定すると、装飾につかっている英語の文字のフォントまで変わってしまう場合があるので、「三点リーダーの表示が必要な箇所だけ和文フォントを指定する」か、「全体に和文フォントを指定し、装飾部分には個別に欧文フォントを指定する」かのどちらかの方針でフォントを指定していきましょう


 MTの入力画面のフォントを変更する場合は、MTのシステムのスタイルシートmain.cssを変更する必要があります(バージョン4.34-jaの場合)。main.css は、MTのインストールディレクトリから mt-static → css とディレクトリをたどっていくとみつかります。

変更前: main.css

/* Movable Type (r) (C) 2001-2010 Six Apart, Ltd. All Rights Reserved
 * This file is combined from multiple sources.  Consult the source files for their
 * respective licenses and copyrights.
 */:link,:visited{text-decoration:none;}html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}table{border-spacing:0;}fieldset,img,abbr,acronym{border:0;}address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}q:before,q:after{content:'';}a{text-decoration:underline;outline:none;}hr{border:0;height:1px;background-color:#000;color:#000;}a img,:link img,:visited img{border:none;}address{font-style:normal;}body{font-size:12px;line-height:1.3;color:#000;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;}a:link,
a:visited{color:#33789c;}a:hover,
a:active{color:#a2ad00;}.system a:link,
.system a:visited{color:#7f8833;}.system a:hover,
.system a:active{color:#33789c;}strong{font-weight:bold;}em{font-style:italic;}h1, h2, h3, h4, h5, h6{font-weight:bold;margin:1em 0 .25em;}h1{}h2{font-size:16px;}h3{font-size:14px;}p, ul{margin:0 0 .75em;}dt{font-weight:bold;}textarea{font-size:12px;}select,
input,
textarea{font-family:Arial,Helvetica,clean,HiraKakuPro-W3,Osaka,sans-serif;font-size:14px;}input,
textarea{padding:2px 0;vertical-align:middle;}select,
8行目と14行目にフォント指定があります。ファイルの変更時には文字コードに気をつけてください。

変更後: main.css

/* Movable Type (r) (C) 2001-2010 Six Apart, Ltd. All Rights Reserved
 * This file is combined from multiple sources.  Consult the source files for their
 * respective licenses and copyrights.
 */:link,:visited{text-decoration:none;}html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td{margin:0;padding:0;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}table{border-spacing:0;}fieldset,img,abbr,acronym{border:0;}address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}caption,th{text-align:left;}q:before,q:after{content:'';}a{text-decoration:underline;outline:none;}hr{border:0;height:1px;background-color:#000;color:#000;}a img,:link img,:visited img{border:none;}address{font-style:normal;}body{font-size:12px;line-height:1.3;color:#000;font-family:"MS Pゴシック","Helvetica Neue", Helvetica, Arial, sans-serif;}a:link,
a:visited{color:#33789c;}a:hover,
a:active{color:#a2ad00;}.system a:link,
.system a:visited{color:#7f8833;}.system a:hover,
.system a:active{color:#33789c;}strong{font-weight:bold;}em{font-style:italic;}h1, h2, h3, h4, h5, h6{font-weight:bold;margin:1em 0 .25em;}h1{}h2{font-size:16px;}h3{font-size:14px;}p, ul{margin:0 0 .75em;}dt{font-weight:bold;}textarea{font-size:12px;}select,
input,
textarea{font-family:"MS Pゴシック",Arial,Helvetica,clean,HiraKakuPro-W3,Osaka,sans-serif;font-size:14px;}input,
textarea{padding:2px 0;vertical-align:middle;}select,

 8行目は"ダッシュボードのフォントの変更"、14行目が"入力フォーム内のフォントの変更"になっています。どちらも font-familyに"MS Pゴシック"を追加しています(好みに応じてメイリオにすることもできます)。
 ブログでちゃんと表示できていれば、入力画面の文字はどうだっていいのなら、変更する必要はありません。

コメントする