★当サイトは【SWELL】を使用しています....(▽◕ ᴥ ◕▽)    ★★ 【Canva】のテンプレートで年賀状を作る方法を紹介しています(^-^)/

【ブログ作成】ヘッダーのタイトル文字をアレンジしたよ!

定年退職2年目の60代主婦です。ブログ歴16日目です。
昨日は、ヘッダーの背景変更にチャレンジして、けっこうお気に入りの仕上がりになりました。
【ブログ作成】ヘッダー画面をリニューアルしたよ!

ただ、タイトルの文字が小さくてインパクトがないなあ、何とかできないかなあ、と思っていました。でもCocoonの設定画面をいくら捜しても、タイトル文字のサイズや太さなどを変更するモードが見つかりません。残念ながら、Cocoonにはその機能がないようです。
そこで、今回もネットでCocoonのタイトル文字を大きくする方法を調べてみたところ、文字のアレンジ方法を発見したんです。さっそく試してみました。

目次

タイトル文字 ビフォアアフター

ビフォアはこちら ↓

 

アフターはこちら ↓
フォントサイズが大きくなりました(タイトルがかわうそさんに接近している)
太字になって影がつきました

 タイトル文字をアレンジするために私が行ったこと

文字をアレンジするための方法をネットで検索した

はじめに、「Cocoon」「文字サイズ変更」などのキーワードで検索し、文字をアレンジする方法を調べました。ワードプレスで文字をアレンジする方法はたくさん紹介されていましたが、「プログラミングコード」の入力が必要なことがわかりました。私には無理かなあとあきらめかけましたが、プログラミングわからない人向けに「このコードをコピぺしてください」とういうサイトもたくさんありました。そんな親切なサイトをいくつか見て回りました。そしてコードを【コピペするだけでOK】とういう方法を見つけました。「文字サイズの変更」「太字にする」「影をつける」ためのコードもありました。 ↓

文字をアレンジするコードの意味を読み解いてみた

/*サイトタイトルの文字をアレンジ*/
.site-name-text{
font-size: 30px;   →フォントサイズ
font-weight:bold;  →太字
text-shadow: 0px 0px 7px #444444;  → 影の大きさ  色
}

つたないエクセルVBAの知識を駆使して、コードの意味を読み解いてみました。
文字サイズ、太字はわかるとして、#
444444っていったい何?
調べてみると、こんなコード表がありました。


なるほど、カラーコードだったんだ。これで謎が解けました。こんなに細かいんだなあ。
これで何とかできそうな気がしてきました。

Cocoon Child:スタイルシートにコードをコピペした

次は、このコードをスタイルシートに張りつける作業です。「外観」→ 「テーマエディ―ター」をクリックすると、スタイルシートが開きます。ここでCocoon Childのシートになっていることを確認することが重要だそうです。さっそく先生の教えてくれた場所に、コピーしたコードをペーストして「ファイルの更新」を押しました。どきどきしながら、サイトの表示画面を確認すると、何と文字が大きくなっていまます。影もちゃんとついていました。やったあ。

文字サイズ、影の大きさを微調整した

最後に、サイト画面を確認しながら、フォントサイズ、影の大きさなどを変更してみました。
フォントサイズが変わるだけで、印象が変わるなあ。感動しました。
コードひとつで、こんなアレンジができるなんですごい。いつの日か、ブログの作成に役立つプログラミングにもチャレンジしたいなあ、と大それたことを考える60代リタイア主婦でした。

「試してみよう」と思った方へのお願いです

私はプログラミングの知識がありません。それでも、コードの意味を私なりに理解した上で、あくまで自己責任で行いました。事前にバックアップもしっかりとりました。

たぶん有料のテーマを使えば、もっと簡単にできたかもしれません。

もし私の記事をご覧いただき「私も試してみようかな。」と思った方がいらっしゃいましたら、必ず専門的な知識のある方のブログや本も必ず確認していただくようお願いします。

さいごまでお読みいただきまして、ありがとうございました。

ポチっとしていただけると嬉しいです

リタイアかわうその主婦活ブログ - にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!
目次
閉じる