部分的にフォントの種類を変えてみたいじゃん?

 

「ラスベガス」を「ラスベガス」にしてみるってことです。
けいふぉんと
こども丸ゴシック
やさしさゴシック
源柔ゴシック
●はらませにゃんこ
●らこふぉんと
●フィバー!
●アンニャントロマン

G餌の助
●チカラヅヨク ダヨーーー!
●の付いたフォントは漢字が入ってない可能性が高いのでひらがな・カタカナ・数字で使って下さいね。
投稿者の皆さんは、文章を書いて、選択&反転させておいて、フォント名の書いてあるボタンを押すだけです。「更新をプレビュー」ボタンを押して、結果表示がOKなら「更新」ボタンを押して下さい。
下の方にも書きましたが、フォントサイズを大きくしたい時は、テキスト編集画面で、↓のように「 font-saze; 24px」(数字は任意ですが200とか300とかはやめてね)の記述を書き加えて下さい。

<span style="font-family: フィバ字; font-size: 48px;">フィーバーー!</span>

更にSpeechBubbleとの合わせ技も可能です。
先に文字列のフォントを変えておいてから次に吹き出し効果をかけると上手く行きます。
逆だとダメですね。
↑の最後のやつは↓こうなっています。

G餌の助
<span style="font-family: チカラヅヨク; font-size: 48px;">●チカラヅヨク ダヨーーー!</span>

フォント表示がおかしい時は、記号の半角全角やスペースのあるなし等を注意深く見比べてみて下さい。
「わーーん、できないよ~」って泣きそうになった時は全力疾走で「ラスベガスあなたのお悩み相談窓口」に来て下さい。
夜中の時はそのまま何もかも忘れてすぐに寝て下さい。一晩寝ればきっと何とかなります。

以下は、導入手順です。興味がある人は読んでみて下さい。
備忘録として書き殴っていきますので箇条書き的な部分が多いですよ。手順としてはおおまかに下の5ステップです。

1,ローカルにフォントファイルをダウンロード

2,ファイルサイズを小さくする

3,サーバーにアップロード

4,style.cssに、使うフォントの場所やファイル名の指定をを書き込む

5,投稿ページや固定ページの編集画面で、フォントを変えたい文字列や文章にフォントタイプを呼び出すコードを付け足す

 

それぞれのステップで次のようなことをやります。

1,まずはフリーフォント探し。「商用利用OK」のフォントを探す。

「FONT FREE
http://fontfree.me/

2-1,「サブセット化」(文字数を減らす)

「サブセットフォントメーカー」
http://opentype.jp/subsetfontmk.htm

「第一水準漢字・記号・ローマ字・カタカナ・ひらがな」を抜き出す
https://drive.google.com/file/d/0Bza38quoCtHqM004SE1QUVlNLWc/view

2-2「woff」化して(ファイルサイズが小さい形式に変換する)サーバーにアップ

「woffコンバーター」http://www.forest.impress.co.jp/library/software/woffconvert/

woffだけでもほとんどの端末で読めるはずなんだけど、読み込めない場合に備えて軽量化したttf/otfファイルもアップロードしておく

注/ ttf=truetype、otf=opentype

3,各テーマディレクトリ内のstyle.cssと同じ階層に「fonts」ディレクトリを作って、そこにフォントファイルをアップロードする

ここでサーバーのファイルに直接アクセスするために、「FTPクライアントソフト」が必要になります。
今回はフリーソフトの「FileZilla」を使いました。
https://techacademy.jp/magazine/2447 ←に使い方を書いてくれています。ありがとう。お世話になりました。

フォントファイルをアップロードするのは、/theme/テーマ名/fonts/ここ。フォントのフォルダだから「fonts」にしましたが、アルファベット小文字なら何でも好きな名前で良いです。

初心者の方は、そもそも↑がどこにあるのか分からないと思いますが、
/ドメイン名/コンテンツのあるディレクトリ/wp-content/themes って感じの場所にあります。サーバーによって「wp-content」の場所が違うようですから、レンタルサーバー等のヘルプファイルで探して下さい。

ディレクトリの指定は絶対パスもしくは相対パスで書くんですけど、今回は相対パスで、

./fonts/フォントファイル名

としました。
「./」ってのは今内容をいぢっているstyle.cssと同じ階層にあるって意味です。
フォントファイルはそこにある「fonts」フォルダに入っているので、「./fonts/フォントファイル名」になります。

4,style.cssを直接いじらずにプラグイン「Simple Custom CSS」を入れて、そこに追加記入していく。 もしくは、子テーマを作ってそっちでいぢっていく。

@font-face{
font-family: 'フォント名'; /* 分かりやすい名前を勝手に付けてOK */
src:url('./fonts/フォントファイル名'), /* eotファイルはIE9以上用に対応する場合アップしておく */
url('./fonts/フォントファイル名.eot?#iefix') format('embedded-opentype'), /* IE8以前用に対応する場合 */
url('./fonts/フォントファイル名.woff') format('woff'), /* モダンブラウザ用に対応する場合 */
url('./fonts/フォントファイル名c.ttf') format('truetype'); /* iOS, Android用に対応する場合 */   
}

style.css内に変更点などが後で分かりやすいようにメモ書きを記入しておきたい時は、/*メモメモ*/ で囲んでコメントアウトしておく。 フォントのurlを複数並べて指定したい時は「,」で繋いでいく。最後に「;」を書き忘れないように。

font-family:で指定する「フォント名」は自分で分かりやすい名前に変えて良い。url(‘./font/フォントファイル名.woff’)で指定するフォントファイル名は、サーバーにアップしたファイル名をそのまま正確に書くこと。

src:url(‘./fonts/フォントファイル名’),の部分で、フォント名にスペースが入っているものはシングルクォーテーション「’」もしくはダブルクォーテーション「”」で囲むこと。

例: “MS ゴシック”、’MS ゴシック’

5,投稿・編集ページで、まずは普通に文を書き込む。次に選択反転させておいて、タグで囲む。

<span style="font-family : フォント名"> 書き込んだ文字列</span>

フォントサイズを大きくしたい時は、

<span style="font-family: フィバ字; font-size: 48px;">フィーバーー!</span>

フィーバーー!
「48px」ってのが、大きさを表す数値です。10でも16でも24でも変更したい数値にして下さい。
ちなみに「フィバ字」のライセンスは「個人使用は自由ですが商用・同人で使用する場合は自己責任でお願い致します。」だそうです。ありがとうございます!

●クラス指定で設定する場合

@font-face{
font-family: 'フォント名'; /* 分かりやすい名前を勝手に付けてOK */
src:url('./fonts/フォントファイル名'); /* eotファイルはIE9以上用に対応する場合アップしておく */
src:url('./fonts/フォントファイル名.eot?#iefix') format('embedded-opentype'), /* IE8以前用に対応する場合 */
url('./fonts/フォントファイル名.woff') format('woff'), /* モダンブラウザ用に対応する場合 */
url('./fonts/フォントファイル名c.ttf') format('truetype'); /* iOS, Android用に対応する場合 */   
}
 
.WebFontClass {
font-family: 'フォント名';
}</pre> 

↑の「.」が付いている「WebFontClass」が呼び出すクラス名になります(勿論自分で好きに名前を付けて良いです)ので、これを投稿画面から呼び出します。 「WebFontClass」を付けた要素のテキストにwebフォントが適用されます。

ちなみに、「Komika Title – Brush フォント」っていうフリーフォントの説明には↓って書いてありました。

@font-face {
    font-family: 'KOMTITBR';
    src: url('./fonts/KOMTITBR.eot');
    src:  url('./fonts/KOMTITBR.woff') format('woff'), url('./fonts/KOMTITBR.ttf') format('truetype');
}
/* use this class to attach this font to any element i.e.
&lt;p class="fontsforweb_fontid_296"&gt;Text with this font applied&lt;/p&gt; */

.fontsforweb_fontid_296 {
    font-family: 'KOMTITBR' !important;
}

/* Font downloaded from FontsForWeb.com */ 

そのとおりにやってみます。まず上のコードをstyle.cssに追加しておきます。次に、投稿編集画面ではこう書きます。「LAS VEGAS」の部分がフォントを変えたい文字列ですよ。

<p class="fontsforweb_fontid_296">LAS VEGAS;/p>

LAS VEGAS

出来ました!

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA