サポート » 使い方全般 » ブログタイトルのフォント変更方法

  • 恐れ入ります。

    ワードプレスを始めたばかりで、スタイルシート等、ほぼ全般使い方がわからない状態です。

    とりあえずウェブサイトのタイトルの書式を変えたいなと思ったので、調べてみたのですが、
    それによると、style.cssの中のfont-family:を修正する必要があるらしいのですが、どのfont-familyを修正すれば良いのかわかりません。

    entry-titleや、html{ など、どちらをいじれば良いかアドバイスをいただけないでしょうか。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • テーマ次第で異なります

    トピック投稿者 mexico6364

    (@mexico6364)

    テーマ次第とはどういうことでしょうか?

    書式のことでしょうか??

    書式はLobsterというものなのですが、、、、、

    おっしゃってる、意味を違って捉えていましたら申し訳ないです。

    Twenty Sixteen テーマの場合。
    ブログタイトルは、site-title
    entry-title は投稿のタイトルです。

    トピック投稿者 mexico6364

    (@mexico6364)

    熊本地震東区避難所86日目様。ご対応感謝いたします。

    おっしゃられているのはTwenty Sixteenのstyle.cssの内容でおまちがいないでしょうか。

    site-titleの項が見つからなかったのですが、スタイルシート内において検索欄などでsite-titleを検索することは可能でしょうか。

    また、site-titleの項が見つかった場合はfont-family: , sans-serif;をfont-family: ‘Lobster’, cursive;に置き換えればいいのでしょうか。

    無知な質問で失礼いたします。

    おっしゃられているのはTwenty Sixteenのstyle.cssの内容でおまちがいないでしょうか。

    おまちがいないです。
    1572行目にあります。Twenty Sixteen を初めてインストールして確認しました。

    .site-title {
    	font-family: Montserrat, "Helvetica Neue", sans-serif;
    	font-size: 23px;
    	font-size: 1.4375rem;
    	font-weight: 700;
    	line-height: 1.2173913043;
    	margin: 0;
    }

    site-titleの項が見つからなかったのですが、スタイルシート内において検索欄などでsite-titleを検索することは可能でしょうか。

    デベロッパーツールを使い慣れてください。また、テーマによってはブートストラップを使っているデザインもあるので「スタイルシート内において検索」してもヒットしない場合はあります。

    また、site-titleの項が見つかった場合はfont-family: , sans-serif;をfont-family: ‘Lobster’, cursive;に置き換えればいいのでしょうか。

    フォントファミリーが替わるかどうかは置き換えればいいです。変わらなければフォントが入ってないというだけです。

    無知な質問で失礼いたします。

    そのとおりです。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    無知なことは何も失礼なことではありませんよ。
    こちらは多くの初心者の方が助けを求めて集まる場です。安心して質問してください。
    回答者のみなさんもご配慮をお願いします。

    CSSなどもWordPressの一部ということでサポートしてもよいのでは、という議論もあります。
    https://ja.forums.wordpress.org/topic/158964?replies=5

    さて、mexico6364さん。
    Lobsterというのはこちらのフリーフォントとのことですよね?(違っていたらご指摘を)
    http://jp.ffonts.net/Lobster.font

    こういったフリーフォントは、一般的なPCに入っていないフォントなので、font-familyで指定しても適用できません。自分のPCだけでは適用できると思いますが。
    Webフォントで対応する必要はありますが、ライセンスが問題ないか確認したり、実装のテクニックとか、ある程度ベースのスキルは必要になります。

    この辺りの情報が参考になると思います。
    http://www.hp-stylelink.com/news/2013/08/20130829.php
    https://thinkit.co.jp/story/2011/08/18/2233
    http://allabout.co.jp/gm/gc/394994/

    ただやはり基本的なところは勉強していただく必要はあると思います。
    HTMLやCSSの初心者向けサイトなどやドットインストールなどの学習サイトが助けになると思いますよ。

    トピック投稿者 mexico6364

    (@mexico6364)

    熊本地震東区避難所87日目様。ご回答感謝いたします。

    無知というのは重々承知です。これから思慮を深めていければと思っております。

    早速デベロッパーツールなるものを用いて、スタイルシートを選択し、フィルターにてsite-titleの項目を検索いたしましたが、出現しませんでした。

    フォントが入っていないということでしたが、webフォントのことでおまちがいないでしょうか。

    全くの素人ながら、イメージとしては、HTMLにwebフォントなるものの記述をコピペして、挿入することで、style.cssでの準備を整えることができるのでしょうか。

    つまり今回でしたら、

    1.Lobsterの書式をタイトルに加えたい。
    2.HTML(header.php)にまずLobsterを反映させるための記述を挿入する
    3.スタイルシート内site-titleの項目、font-family; ”Lobster” , sans-serif;を挿入
    4.プラグインでのfontなどを使って反映。

    上記の手順であっているのでしょうか。。。

    mypacecreator様。回答ありがとうございます。そう言っていただけますと助かります。
    知識がないのも事実ですので、精進いたします。

    Lobsterのフォントはおっしゃる通りです。

    貼っていただいた、URL非常に勉強になります。

    ただ、素人すぎて、専門用語が苦しいですが笑

    ちなみに使用しているPCはMacBook Air (13-inch, Mid 2013)、バージョン10.11.5(15F34)
    です。

    また、新たな質問なのですが、現在、ロリポップサーバーとムームードメインを使用しておりますが、新たにサブドメインの取得をし、別サイトも構築しようと考えております。

    サブドメインはムームードメイン側から取得できるようなのですが、ここも??状態です。

    こちらで質問できないことでしたら、控えます。

    では、失礼いたします。

    モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    あれからもう少し調べまして、Lobster Webフォントについての情報ページを見つけました。Googleフォントで提供されているものだったんですね。こちらもちゃんと調べてからお答えすればよかったです。

    https://www.google.com/fonts/specimen/Lobster
    http://www.cssfontstack.com/Lobster

    Googleフォントを使う方法についてはこちらの記事が初心者の方にも比較的分かりやすいと思います。
    http://www.sria.co.jp/blog/2014/10/lets-use-web-fonts/

    1.Lobsterの書式をタイトルに加えたい。
    2.HTML(header.php)にまずLobsterを反映させるための記述を挿入する
    3.スタイルシート内site-titleの項目、font-family; ”Lobster” , sans-serif;を挿入

    ここまで手順としては合っています。4.のプラグインはなくても良いと思いますが。

    header.phpに、Googleフォントを使うためのCSS記述↓を追加します。
    <link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

    ※追加CSSは、WordPressだとfunctions.phpで設定する方法が主流なのですが、おそらく初心者の方にはハードルが高いと思うのでheader.phpでも大丈夫です。

    あとはstyle.cssの編集で多分いけると思います。

    また、新たな質問なのですが、現在、ロリポップサーバーとムームードメインを使用しておりますが、新たにサブドメインの取得をし、別サイトも構築しようと考えております。

    サブドメインはムームードメイン側から取得できるようなのですが、ここも??状態です。

    こちらで質問できないことでしたら、控えます。

    新たな質問に関しては、別のトピックとして新たに作成してください。
    ただし、サブドメインの取得方法に関してはここではなく、ムームードメインさんのサポートに確認いただいたほうが確実です。ここはWordPressのサポートフォーラムですので。
    ドメイン取得・サブドメイン設定後のインストールでつまづかれた場合はまたご質問いただければよいですし。

    トピック投稿者 mexico6364

    (@mexico6364)

    世話役さん。ご回答いつもありがとうございます。

    早速フォントを!と行きたいところだったのですが、新たに致命的な問題が発生してしまいました。。。

    サブドメイン取得できたのですが、取得後、利用データベースを本サイトと同一にし、インストール先に新しいドメイン(サブドメイン)を指定し、インストールしまして、ワードプレスより確認したところ、本サイトが消失してしいました。

    とりあえず、復旧方法を調べ、php my adminより復旧可能ということでしたが、php my admin項において、サーバの選択のサーバーが多数ありまして(chicappaやlolipop.jpなど)

    どれを選択しても復旧できそうにありません。

    幸いにも、ウェブサイト自体はまだ、始めたばかりでして、新たに作成したいと思っておりましたので、良いのですが、ワードプレスのドメイン名がサブドメイン表示のままです。

    まずは、サブドメイン表示を独自ドメインの方に切り替えたいのと、それが完了したらマルチサイト操作を可能にしたいと思っております。

    話が別件にすり替わりそうですけど、「Lobster」はGoogleFontのAPIを向けると容易です。

    トピック投稿者 mexico6364

    (@mexico6364)

    ご回答感謝いたします。

    とりあえず、サーバー側よりなんとかサイトは復旧できました。

    未だにタイトルのフォントが変更できないです・・・

    とりあえず、現状はテーマヘッダー内においてグーグルフォントでコピペした<link href=’//fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>を
    <head>タグ内に貼り付けました。下記の通りです。

    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?> class=”no-js”>
    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <link rel=”profile” href=”http://gmpg.org/xfn/11″&gt;
    <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>”>
    <?php endif; ?>
    <?php wp_head(); ?>
    <link href=’//fonts.googleapis.com/css?family=Lobster’ rel=’stylesheet’ type=’text/css’>
    </head>

    また、反映させるためにfont-family: ‘Lobster’, cursive;を下記のentry-title内、font-familyに置き換えたのですが、何か間違っていたのか、またサイトが飛びました笑(こちらも復旧済み)。

    .entry-title {
    font-family: ‘Lobster’, cursive;
    font-size: 28px;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1em;
    }

    原因としては

    1.font-family末尾にsans-serif;を付けなかったから。
    2. ‘Lobster’, cursive;を” ”で囲ってない、もしくは<>で囲ってない。

    何れにしても原因がわからず、また飛ぶのではないかと思います。。

    熊本地震東区避難所87日目がおっしゃったAPIを向けるというのは下記のURLに記載されているような方法でしょうか。

    http://www.yasuhisa.com/could/article/google-font-api/

    まず、CSS をリンクするというのが?でした。

    また、載っている

    <link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”&gt;

    の変更方法などもわかりませんでした。

    ↓の情報より、それぞれ置き換えていくのでしょうか??

    <link href=’https://fonts.googleapis.com/css?family=Lobster&#8217; rel=’stylesheet’ type=’text/css’>

    まず、ブログタイトルは site-title で、
    entry-title は投稿のタイトルです。どちらのフォントを変更したいのですか。
    もちろん、twenty sixteen のケースで、テーマが変われば同じではありません。

    試しに mexico6364 さんが提示した以下コードで、適用しました。

    .entry-title {
    	font-family: 'Lobster', cursive;
    	font-size: 28px;
    	font-size: 1.75rem;
    	font-weight: 700;
    	line-height: 1.25;
    	margin-bottom: 1em;
    }

    ブログタイトルはfont-size: 50px;で影付けしてわかりやすくしました。
    http://wp.me/P70yGs-D

    Google Fonts は API を向けています。
    「下記のURLに記載されているような方法でしょうか。」とリンクされた情報は、2010年5月とあるので随分と古い情報ですね。
    こちらを参照して下さい。セットアップできるはずです。
    https://www.google.com/fonts#UsePlace:use/Collection:Lobster
    「A new version of Google Fonts is available.」と、ありますがネット上のサービスは数ヶ月で使用が変わるのでこまめなメンテナンスを要しますよ。

    「また飛ぶのではないかと思います」の“飛ぶ”というのが、どういうトラブルなのかわからないのですけど。

    原因としては
    1.font-family末尾にsans-serif;を付けなかったから。
    2. ‘Lobster’, cursive;を” ”で囲ってない、もしくは<>で囲ってない。

    「末尾にsans-serif;を付けなかったから」、「” ”で囲ってない、もしくは<>で囲ってない」と判断されているのはなぜですか。

    最後に、mexico6364 さんがサイトのフォントを変更しても、そのサイトにアクセスする他者のPC,タブレット,モバイル携帯に該当フォントがインストールされてない場合は、それらでセットされているフォントで表示されるだけです。
    つまりは意図したとおりのデザインで見せることは期待しないで行いましょう。

    Google Fonts API は<link>に配信してくれるサービスです。その為、他者がサイトにアクセスした時に、フォントの表示にワンクッション入ります。サイトの安定した表示と、高速なアクセスを期待してくるようになると課題となるところですよ。

12件の返信を表示中 - 1 - 12件目 (全12件中)
  • トピック「ブログタイトルのフォント変更方法」には新たに返信することはできません。