記事タイトルにhtmlでフォントとフォントサイズの指定

meriyo ☓
meiryo ◯

ってことはないでしょうか？
他に考えられるとすれば、タグの閉じ忘れ、閉じ間違いとかなんですけれども・・・

<font face="meriyo" size="4" >ライカノカメラ</font>">

こういう感じの

わいひらさんが言うように、windows環境ならsans-serifでたいていメイリオで表示されると思います(サポートされているブラウザなら)。

メイリオに限定してしまうと、macやら他の環境でメイリオが入っていない場合の人にはどう表示されるかが問題になったりします。なので、何かしらのフォントに限定にせずに、メイリオと最後の候補にsans-serifを入れるようにするのが良いと思います。

中には、なんでsans-serifの設定が入ってないんだよと言う人もいるそうです。ゴシック体ならまだしも明朝体で表示されたり色々あるみたいで。まぁブラウザの設定次第なんですけどね。

わいひら様、hidekichi様

ご丁寧にありがとうございます。

フォント指定の件、とてもわかりやすく助かりました。

ちょっと伝わりにくかったと思うのですが、
タイトルサイズで、
英語はそのままですが、
日本語フォントは別のサイズにしたいのですが、
直接htmlで指定することなく、行うことは出来るのでしょうか？

お手数をおかけしますがよろしくお願い致します。

またはサブタイトルを付けて、
別のサイズやフォントに指定する方法があれば。。。

よろしくお願いいたします。

>またはサブタイトルを付けて、
>別のサイズやフォントに指定する方法があれば。。。

具体的にはどういう形でしょうか？

hidekichi様

お世話になります。

下記アドレスはHTMLで行ったのですが、
http://pheb.jp/wordpress/?p=48

Camera of Leica
ライカノカメラ

と2行で表示し、
ライカノカメラの部分はフォントサイズを小さくしています。

ライカノカメラの部分をサブタイトルとして表示出来れば
と、考えております。

具体的には上記の形です。

よろしくお願いいたします。

>ライカノカメラの部分はフォントサイズを小さくしています。
>ライカノカメラの部分をサブタイトルとして表示出来ればと、考えております。

現在の「ライカノカメラ」部分の設定を取り除き、カスタマイザー(WPのメニューのカスタマイズ、なければダッシュボード→外観→カスタマイズ)から「サイトタイトルとキャッチフレーズ」の中のキャッチフレーズに「ライカノカメラ」と入れて、親・子テーマどちらか(できれば子テーマ)のstyle.cssに

#site-description{
  //お好きなスタイル
}

で設定されるのが良いかと思います。メイリオにしたいのであれば、

#site-description{
  font-size: 18px; //現在と同じぐらいのサイズにしました
  font-family: meiryo, sans-serif;
  /* あとは色なりマージンなりを設定します */
  /* ひとまとめに書く書き方(font: style size/line-height font-family;)
  font: nomal 18px/100 meiryo,sans-serif;
  */
}

こんな感じかと思います。

カスタマイズが進んでどこをどうしたら直るかわからない場合は、現在のローカルディレクトリをバックアップして、テーマの再インストールをされると良いかも知れません。バックアップせずに再インストールすると上書きされて現在のカスタマイズがクリアされてしまうので注意して下さい。
まぁテーマの再インストール(あるいはアップデート)したら上書きされるので、バックアップしたファイルから再度いろいろと適用していかないとダメなんですけどね（笑）
このための子テーマなので有効利用の程を。親テーマをいじっている場合は手動でしかムリなんですけれども…。

それとは別件で。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-url="http://pheb.jp/wordpress/?p=48" data-text="Camera of Leica<br /><font face=" meiryo"="" size="4">ライカノカメラ" data-count="vertical">Tweet</a>

ここがおかしいです。

<font face="meiryo" size="4">ライカノカメラ</a>
か、
<font face="meiryo" size="4" data-count="vertical">Tweet</a>
なのか、
<a href="https://twitter.com/share" class="twitter-share-button" data-via="" data-url="http://pheb.jp/wordpress/?p=48" data-text="Camera of Leica<br /><font face='meiryo' size='4'>ライカノカメラ</font>" data-count="vertical">Tweet</a>
がおそらく正しいと思いますけれども、はたまた別の書式かわかりませんので要チェックです。

data-text=”…”と「”」で囲んでいるため、もしdata-textにfontタグが有効なのであれば、face=’meiryo’等とシングルクォートにするべきだろうと思います。
まぁどう処理しているかによるんですけども、仮にphpであればdata-textには、”Camera of Leica<br /><font face=”が入ったりして残りはゴミ扱いされるかも知れません(そういう不要な部分が変な場所に文字を出したりするわけです)。

ただし、data-textが何をしている部分かは不明ですけれども、通常は「Tweet」の部分が表示されるので(aタグに囲まれているのはtweetのため)あってもなくても良い部分なのではなかろうかと思います。もしtooltipsのようなもの(たとえばjQueryなどでdata-text部分を読み込んで表示など)なのであれば必要なのだろうとは思うんですが…。あるいはシェアした時の名称とかになるのかなぁ、いやぁそれはリンクのアドレスから判断するだろうし…うーむ、何に使ってるんですかね（笑）

仮にリンクにマウスオーバー(ホバー)した時に表示される名称なら
<a href="何かしらのリンク" title="Camera of leica">Tweet</a>
でよいわけですし、title属性でbr(あるいはそれっぽい改行)が使えるのはIEぐらいだろうと思うので、きっとうちの環境では文字が改行されず続いて文字が表示されるのではないかなぁと思ったりします。

twitterのシェア部分で記事下あたりです。

ちなみに、今現在の向後隆さんのサイトがlinuxでどう見えているかの画像を貼っておきます。たぶんmacあたりでもメイリオがない場合は同じような感じなんじゃなかろうかと思います。まぁmacの場合はヒラギノとか入ってるのでわかりませんけども。

たぶん、font faceの最終候補にsans-serifを入れておくだけで、windowsに近い表示になると思います。おそらくですけどね（笑）

あああ、書きなおそうと思っていた部分を忘れててそのまま投稿してしまった(滝汗

<h1 class="entry-title">
        Camera of Leica<br><font face="Meiryo" size="4">ライカノカメラ</font>
</h1>

//これを　↓ みたいにする

<h1 class="entry-title">
        Camera of Leica<span class="subTitle">ライカノカメラ</span>
</h1>

style.cssで、

.entry-title .subTitle {
  clear: both;
  display: block; /*←これ重要*/
  font-size: 18px;
  font-family: meiryo, sans-serif;
  /*その他諸々*/
}

書いてる途中で、あれタイトル違うやん書き直さねばと思っていて、完璧に忘れてました。前のレスはこのレスと読みかえながら参考にして下さい（汗）

ちなみにspanはインライン要素なのでclear:bothを効かせるためにはdisplay:blockが必要です。

んで、途中で投稿しまうっていうね（笑）

まずタイトルには、Camera of leicaとだけ入れておきます。該当の記事のIDはpost-48なので、

javascript.js(できれば子テーマの)に、

(function($){
  $(function(){
    $("#post-48").find(".entry-title").append("<span class='subTitle'>ライカノカメラ</span>");
  });
})(jQuery);

ってのはどうでしょうか？

すでに運用されていてタイトルを変更するのはアレだと言う場合は、

(function($){
$(function(){
var title_text = $(“#post-48”).find(“.entry-title”).text();
var srp = title_text.replace(“ライカノカメラ”, “<span class=’subTitle’>ライカノカメラ</span>”);
$(“#post-48”).find(“.entry-title”).html(srp);
});
})(jQuery);

とかもついでに書いておきます。ただしコレ、Camera of leicaの後ろのスペースは残ったままなので注意が必要です、といっても注意するにも半角スペースを消す処理をすればよいだけなんですけどね（笑）また「半角スペースがあったらどうなんだ？」と言う別段問題がない場合は上記のままでも良いのではないだろうかと思います。
取り除く場合はreplace部分に、” ライカノカメラ”と半角スペースを入れるとかが簡単でしょうか。

わいひら様、hidekichi様

ご丁寧にありがとうございます！

ちょっと私の知識では分からないところが多々ありましたが、
勉強しつつチャレンジしてみます。

また、なにかありましたらよろしくお願い致します。