【WordPress】やっとブログ名のフォント変更できた(たぶん自己流)

ブログ運営

ブログ始めてから2週間、さっそく更新頻度が落ちてきて

そろそろなにか記事更新しないとなーと思いつつ

ネタが見つからないので、とりあえずブログの見た目をカスタマイズ。

まずはブログ名のフォント変更をしみようとネットでいろいろ検索。

そして試す。

できない。

また検索して試す

できない…あぁぁぁぁああぁぁもぉぉぉおうぅぅ

と、かれこれ1週間たちました。(笑)

暇だったので今日もフォント変更方法の模索。

今日は自己流でやってみることにしました。(HTMLとかCSSとか全く理解してないくせに自己流とか言うやつ…)

結果できたので、その方法をとりあえずアップしてみようかと。

使っているテーマ

https://wp-cocoon.com/ より

使っているテーマは「Cocoon」。

おすすめテーマで検索するとこのテーマが出てきたので

ほかのテーマと使い比べたりはしていません。

ブログ初心者から抜け出す(収益が発生)ことができたら

有料テーマの使用も考えていこうかと。

試した方法

いつまでたってもブログ名がデフォルトのフォントだと、

なんかやる気が出ないので

「Googleフォント」というものに変更したい!

とりあえずネットで

「ワードプレス サイト名 フォント変更」

「ワードプレス ブログ名 Googleフォント」

などと検索するとたくさん出てきます。

私は検索結果のトップ付近にあるものからどんどん試しました。

説明はとってもわかりやすいです。

Googleフォントのサイトhttps://googlefonts.github.io/japanese/ にアクセスして

2種類のコードをコピー&ペーストするだけ!

「php」とか「css」とかのコードをそれぞれのシートにコピペしますが

全く変化なしでした。(多分私が間違っているだけ)

どこのページをみてもこんな感じの方法なので

ここまでで培ってきた0.5㎅ぐらいの知識をもとに

自己流でやってみることにしました。

自己流?

自己流なのかどうかはひとまず置いといて

私が実際にやった手順を書いていきます。

Googleフォントで使いたいフォントを探す

まずは使いたいフォントを先ほどのリンクから見つけてきます。

Google Fonts + Japanese • Google Fonts + 日本語
As Google makes progress on supporting Japanese web typography, we invite designers and developers to experiment with these Japanese web fonts now available fro...

中には漢字非対応のフォントもあるので、ブログ名に漢字が混じっている場合は注意。

9種類あります

WordPressの「外観」から「テーマエディター」を選択

次にWordpressを開いて、「外観」から「テーマエディター」を選択します。

これでコードの書き込みができる画面に行くことができます。

「Cocoon Child」の「head-insert.php」を編集

まずは。「Cocoon Child」の「head-insert.php」というシートを編集します。

「テーマファイル」の一覧から「tmp-user」を探し

「head-insert.php」を開きます。

先ほどのGoogleフォントで使用したいフォントが決まったら

赤枠で囲われた部分の1番目のコードをコピーして、
「head-insert.php」 に貼り付けます。

<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">

↑のようなコードのことです。

以上で半分くらい作業が終わりました。

「Cocoon」を選択し「style.css」のコードの一部をコピー

次に画像の赤枠の部分で囲われたところを、▼ボタンをクリックして「Cocoon」に変更します。

そのあと「選択」ボタンを押し、

「style.css」のコードがうじゃうじゃ書かれた部分から

.site-name-text {
font-size: 28px;
}

↑のコードを探し出してコピーします。もしくはこのコードをコピーします。

「Cocoon Child」を選択し「style.css」にペースト

コピーしたら先ほどの画面から「Cocoon Child」を選択して

「Cocoon Child」のスタイルシート「style.css」に貼り付けます。

そして、Googleフォントからもう一つのコードをコピーして持ってきます。

できあがったコードは以下のようになります。

.site-name-text {
font-family:”Nico Moji”;
font-size: 56px;
color:green;
}

font-family ではブログ名に使用するフォントを選択しています。

font-size では文字サイズ、color では文字色の変更ができます。

色のコードは以下のリンクで確認できます。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

プレビューで確認して調整

あとは自分の好みの色や大きさに設定したら終わりです。

ほかにも様々なカスタムコードがあるはずですが、

私はまだこの程度しか知識がないのでもっと勉強しないといけません…

ちなみに私の場合は↓から

こんな感じにイメージチェンジできました。↓

ほかのブロガーさんのブログ名をみると、

ロゴみたいなのを作っていたり、画像を張っていたりと

おしゃれでカッコよくてうらやましいです!コピーしたいぐらいです!

著作権表記的なことしたらOKですか?(嘘ですしません)

私も勉強して頑張ろ…

この記事を読んでくれた人の誰か一人でも役に立てたら幸いです。

コメント