【WordPress】サーバー上にアップするフォントを置いて変更する【CSS】

フォントをサーバー上に置く

以前ウェブフォントの使い方について紹介させて頂きましたが、今回は自分のサーバー上にダウンロードしたフォントをアップし、使用する方法です。

おおまかな流れは
→フォントをダウンロード
→形式をWOFFに変換する
→サーバーにアップロード
→CSSでフォント設定
→使いたい部分でフォント指定
という作業になります。

続きを読む

【WordPress】見出しのデザインやフォントでわかりやすいサイトに【CSS】

見出しのフォントや色を変更する

ワードプレスのサイトでは↑の赤い文字のように「見出し」というものがあり、H1からH6までの数字があります。
それぞれデザインを変えることもでき、見出しがあると記事も読みやすくなるため、読みやすいページを作っていくことで読んでくれる人が増え、アクセスアップにも繋げていけます。
またGoogleの検索エンジンも見出しに入れたキーワードも重要としているため、見出しに検索されたいキーワードを入れることによってSEO対策のひとつにもなります。
見出しはフォントの大きさだけでなく色や形も変更できより見やすいデザインを作ることが出来ます。

続きを読む

【WordPress】フォントカラー(文字色)の変更で見栄えよく!【CSS】

ワードプレスの文字色を変える

サイトの見やすさにとって重要な項目のひとつのサイトのフォント。
前回まではフォントの変更方法やよくあるフォントについての疑問についてのまとめ記事を公開していましたが、今回は文字色の変更についてです。
サイト全体に使われるフォント、大きさ、表示色でそのサイトの印象もかなり変わりますし、より重要な文章やリンクは他とは違った形にしてユーザーの目を引くものにするべきです。

続きを読む

【WordPress】プラグインなしのフォントの変更でより簡単に読みやすく!【CSS】

ワードプレスのフォントを変える方法

ウェブフォントはサイト内で使用可能なフォントを簡単に追加できる人気の方法です。自分でファイルをアップすることも可能ですが、ウェブフォントなら自分のサーバー上になくてもいろいろなフォントが選べるようになり、ファイルが更新された時も提供者側が更新したバージョンに自動更新されることになります。

Google FontsはGoogle提供の無料ウェブフォントサービス。様々な言語のフォントにも対応しています。
Adobe Edge web FontsもAdobeによるフォントで無料で利用できます。
今回はGoogle Fontsを例にして話を進めていきます。

続きを読む

【WordPress】スマホ画面でフッターに固定メニューを作る【CSS】

スマホ用フッターメニューの設置

色々なブログを訪れていると、サイトのいちばん下にメニューが固定されているサイトがあります。
フッターに固定されたメニューがあることによって、TOPに戻るなどの記事からの移動が簡単になりますし、押しやすい位置になるので回遊率をアップさせたり、離脱率を減らすことも期待できます。
よりサイトを見てもらうために効果的な方法と思えます。

続きを読む

【WordPress】サイトの表示をスマホ向けにする【CSS】

レスポンシブデザインとは?

レスポンシブデザインとは閲覧しているユーザーのデバイスの画面サイズに合わせて、最適な表示になるデザインです。
現在はPCだけでなくスマートフォンからサイトを閲覧する人も多くなり、画面のサイズが様々になったため、レスポンシブデザインは重要です。
スマホから見ているのにPCページしかないと見づらいと感じ、中身を読んでもらえない可能性もありますよね。そのため、スマホ対応はSEOにおいても必須と思われます。

続きを読む