Webフォントってご存知ですか？

スタイルシート（CSS）でフォントを指定するだけで、ユーザーのパソコンにインストールされていないフォントでも表示することができるようになるというスグレモノです。

フォントがインストールされていなくて、制作者が意図した見え方になっていないというケースがこれまで良くありましたが、WEBフォントを使えばこれらの問題も解決できます。

今回はWEBフォントをものすごく簡単に使う方法を紹介します！

とにかく簡単に使えるGoogle Web Font

Google Web Fontを今回は使います。

これはGoogleが提供してくれているWEBフォントでして、とても簡単に使用することができます。

フォントの数はなんと！

約700種類ものフォントが提供されています！！

わずか4ステップで使えます！さっそく使ってみましょう！

使いたいと思ったフォントが見つかったら、下図の赤枠のアイコン「Quick-use」を押します。

Step1：フォントの太さを選びます

使用するフォントの太さをチェックボックスで選択します（複数選択可）

Step2：サブセットを選びます

サブセットの種類があるものに関しては、こちらも選択します（複数選択可）

Step3：CSSをコピー＆ペーストします

@importのタブをクリックしてください。

そしてCSSファイルに以下のように書きます。

@import url(http://fonts.googleapis.com/css?family=Oswald:300);

body {
    font-family: 'Oswald', sans-serif;
}

CSSのファイル名はstyle.cssとして、Step4のHTMLファイルと同じディレクトリに置いておきます。

Step4：HTMLファイルでCSSを読み込みます

<link rel="stylesheet" type="text/css" href="style.css" media="all">

これでHTMLファイルを再読み込みすると・・、変わりましたか？？

HTMLファイル内のフォントが指定したフォントに変わったと思います。

WEBフォントをドンドン活用しましょう！

Google Webフォントなら今回説明したように本当に簡単に誰でも利用することができます。

英字フォントは種類も豊富で無料版が多く提供されているのですが、和文フォントはちゃんとしたものは有料ばかりなのが残念なところです。。。

今後さらにWEBフォントは活躍の場が増えそうです！

簡単に使えるので試してみましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPressのプラグインの1つである「Jetpack by WordPress.com」はSNS（Twitter、Facebook、Google+）などにブログに投稿した内容を同時に反映してくれる便利なプラグインです。

そんな便利なJetpackなんですが、使用しているテーマによってはなぜかSNSに自動投稿された時の画像が実際の投稿の内容とは全くことなるものになってしまうことがあります。

そんな問題を今回は解決します！

[今回の記事の概要]

• どういう問題が発生しているのか？
• アイキャッチの画像サイズが200x200pixel未満の時に発生
• 【対策①】アイキャッチに使用する画像のサイズを200x200pixel以上にする
• 【対策②】サムネイルのサイズを200x200pixel以上にする

どういう問題が発生しているのか？

以下の画像はFacebookへの投稿されたものです。

「藤野ぐるっと陶器市」のイベントのはずなのに、なぜかWEBマーケティングセミナーのアイキャッチが使われています。

本当ならこの画像になって欲しいところですが、残念なことになっています。

問題はアイキャッチの画像サイズが200x200pixel未満の時に発生

Facebookへの投稿画像はOGP（og:image）で指定された画像を使用するという仕様になっており、Jetpackでもアイキャッチの画像がOGPに設定されています。つまり、jetpackは正しいアイキャッチを指定しているのです。

なのになぜ！？

原因は画像サイズにありました。

FacebookはOGPで画像が指定されていても、200x200pixel未満の画像は使われないという仕様があり、アイキャッチが正しく投稿に反映されないのはこの画像サイズの問題だったのです。

確認する対策としては2つあります。

【対策①】アイキャッチに使用する画像のサイズを200x200pixel以上にする

アイキャッチ画像に指定する画像ファイルのサイズを必ず200x200pixel以上にしましょう。

一般的なテーマを使用しているのであれば、これで問題は解決することができるでしょう。

【対策②】自動リサイズ機能付きの場合、サムネイルのサイズを200x200pixel以上にする

最近のテーマではアイキャッチの画像の自動リサイズ機能が付いているものもあり、その場合は対策①で大きな画像をアイキャッチとして指定しても自動的に小さなサイズに変換されているのでさらに対策が必要です。

弊社で使っているテーマの場合、function.phpに以下のようにサムネイルを生成するコードがあります。

//　サムネイルの設定 --------------------------------------------------------------------------------
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size( 'mid_size', 225, 120, true );
add_image_size( 'small_size', 64, 64, true );
}

弊社のテーマのアイキャッチはこのmid_sizeという名前のサムネイルをアイキャッチに使用していたので、以下のように縦横比を1.8倍に変更してしまいました。

//　サムネイルの設定 --------------------------------------------------------------------------------
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size( 'mid_size', 405, 216, true );
add_image_size( 'small_size', 64, 64, true );
}

こうすることでFacebook、Google+などに投稿されるOGPの画像サイズが200x200pixel以上になるので正しいアイキャッチが投稿されるようになります。

スタイルシートも忘れずに変更しておく

Jetpackのほうはこれで解決なのですが、対策②の場合、サムネイルのサイズを大きくしてしまっているのでホームページのデザインが崩れているはずです。

その場合はスタイルシートで画像の縦横サイズを指定してしまえば縮小表示されるので元と同じように見えます。

例えばこんな感じでblog_thumbnailsクラスのimg要素のwidthとheightを指定してしまいます。

#blog_thumbnails img {
  width: 225px;
  height: 120px;
}

これにて一件落着です！

ずっとJetpackのバグだと思っていました。開発者の皆様、申し訳ありません。。。

今回の対策で完全に直ったので、同じ問題を抱えている方はぜひお試しください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Word（ワード）に関連するブログ記事を書くとき、当然ながらタイトルにはWordというキーワードを含めるべきですが、「Word」と英語表記にしたほうが良いのか、「ワード」とカタカナ表記にしたほうが良いのか？疑問に思ったこと、ありますよね？

ブログの記事：3ステップでWord文書を画像（JPEG）に変換してみる

のアクセス解析結果を基に、この疑問を解き明かしてみたいと思います。

英語VSカタカナ　流入キーワード対決！

一定期間で英語表記の「Word」とカタカナ表記の「ワード」で、どちらが流入が多いかを見てます。

英語表記の流入数

英語表記での流入数は「1,198」でした。

カタカナ表記の流入数

カタカナ表記での流入数は「1,685」でした。カタカナ表記での流入の方が多いんですね！
記事のタイトルが「3ステップでWord文書を画像（JPEG）に変換してみる」ですから、Wordという英語で記載しているにも関わらず、カタカナでの流入が多いという結果になりました。ちょっと意外です。

英語VSカタカナ　検索総数対決！

そもそも、検索総数はどっちが多いのでしょうか。
Googleトレンドで「Word　画像」と「ワード　画像」で検索してみた結果、「ワード　画像」が2011年6月あたりから逆転しています！

パソコンに詳しくない人ほど、カタカナで検索する傾向

「ワード　画像」で検索する人は、パソコンにあまり詳しくありません。

おそらく、Word文書に画像を入れたけど、うまく配置ができない・・・「よし、検索で調べよう！」ということで

「ワード　画像」とか「ワード　画像　配置」などのキーワードで検索をします。

このとき、パソコンに詳しくない人が、わざわざ「Word　画像」などのように、日本語入力モードをいちいちオフにして英語表記で入力はしません。

パソコンに詳しい人は英語表記で検索しています

Googleトレンドで「Word　マクロ」と「ワード　マクロ」で検索してみた結果です。
マクロを使うような人はパソコンに詳しい人です。Wordでマクロなんて！よっぽどのマニアです！！
この場合は、「Word　マクロ」の方が多いです。
つまり、いちいち「Word」と英語表記に切替て入力しているということですね。次に続く文字が「マクロ」という日本語にも関わらずです。

Yahoo!知恵袋もカタカナ表記が多い

困ったとき、気軽にネット上で質問ができるYahoo!知恵袋ですが、Wordに関して初歩的な質問をしている人は、やはりカタカナ表記の「ワード」を使用している人が多く、「Word　画像」のQ&Aの数が「175,177」に対し、「ワード　画像」は「664,592」と3倍以上ありました。

今回はカタカナ表記の勝利！

「Word文書を画像に変換する」という内容の記事なら、カタカナ表記の方が良いでしょう。
なぜならパソコンに詳しくない人向けの内容であり、そのような人はカタカナの「ワード」で検索をするからです。

もちろん「Word」と表記していても検索にはちゃんとヒットしますが、検索する人が「ワード」で検索しているのであれば、ページ内でも「ワード」とカタカナ表記があった方が、よりその人の潜在意識とマッチします。結果、流入を増加させることができるでしょう。

しかし、マクロの例もあります。こちらは英語の「Word」の方が適していると思います。

つまり、ケースバイケースであり、迷ったらGoogleトレンドなどで調べてみましょう！ということですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。