WordPress(Cocoonテーマ)でブログタイトルをカスタマイズしたいと思ったことはないでしょうか?
普通にデフォルトの場合は以下のようになってしまいます。少し味気ないですよね。

-150x150.jpg)
これはちょっといまいちやなあ・・・
- Cocoonでブログヘッダーロゴのタイトルをおしゃれにカスタマイズしたい
- 画像を背景にして、おしゃれロゴも貼り付けたい
- CSS追加は良く分からない、何となくいじってトラブルが怖い
- パワーポイントで文字の二重縁取り方法を知りたい
- Canva無料版でも二重縁取り文字を使用したい
本記事では「CSS追加無し」「Microsoftのパワーポイント」で以下のような二重縁取り文字装飾のヘッダーロゴにする方法が分かります。
これができればCanva無料版での「アイキャッチ画像作成」へも応用可能ですね。

こういった装飾をCSSの「diaplay:none」で組み込んだ場合、
SEO的に不利となる可能性もあるとのことです。
「display:none」で隠したテキストには、SEO効果がありますか? – SEOよくある質問|SEO Pack
SEOとは?上位表示するための基本と実践のポイントを解説 (seopack.jp)
基本的にはスパム目的ではなく、ユーザビリティ向上目的であれば問題ないとのことですが、
少しでも心配な方は今回の方法がお勧めです。
ブログタイトルをおしゃれにカスタマイズする手順
パワーポイントでおしゃれ二重縁取り文字作成
パワーポイントのテキストボックスで文字を書く
Microsoftパワーポイントを開きます。
「挿入」タブの「テキストボックス」で好きな文字を書きます。
(*文字の背景も見えやすいように青い図形を背景として挿入しています。)

文字が入ると下記のようになります。

テキストで好みの字体へ変更
テキストボックスを選択して、「ホーム」タブの「フォント」のところで「字体」や「サイズ」、「Bold」や「Italic」等基本的な装飾を選択できます。
ちょっと変わったフォントの「Bradley Hand ITC」というものを選んでみました。

文字の縁として背景にぼかしを入れてみる
テキストボックスを選択したままで、右クリックし「図形の書式設定」に進むと下記の画面になります。
さらに「文字のオプション」⇒「文字の効果」へ進みます。ここで文字の文字の縁を「光彩」で表現してみました。
ここで縁の「色」、「サイズ」、「透明度」も選択できます。透明度を上げると少し透けた縁も入れることができます。

2段目の縁を作成
次に「文字のオプション」⇒「文字の塗りつぶしと輪郭」⇒「文字の輪郭」へ進みます。ここの幅を調節します。

幅を18ptにしてみると以下のようになります。

文字内側の色を作成
①上で作った文字をコピーペーストします。
「文字のオプション」⇒「文字の塗りつぶしと輪郭」⇒「文字の輪郭」と進み、色を選びます。今回は中身は白にしています。
②輪郭の幅を変更します。縁に収まる幅にします。

③できあがった内側を、縁に入れると下記のようになります。

作り上げた文字をPNGファイルで保存
最後に出来上がったテキスト外側と内側の両方を選択し、右クリック⇒「図として保存」を選択します。
ここで注意が必要なのはPNGファイルとしないと余白部分が透過しません。

ちなみに図を「JPEG」ファイルで貼り付けた場合、下記のように背景が透過していませんね。

Cocoonのヘッダーロゴ設定
あとは「Wordpress」の「Cocoon設定」の画面で「ヘッダー」タブに行きます。

「ヘッダーロゴ」でパワーポイントで保存したPNGファイルを選択します。

作った文字が出てきます。あとは「変更をまとめて保存」を忘れずに!

最後に実際に確認してみましょう。力強くなりました(自己満足ですみません。(笑))

Canvaへもおしゃれ画像を貼り付け可能
Canvaにも上記PNGファイルをアップロードして、二重縁取り文字を貼り付け可能です。
「アイキャッチ画像」や、下記のようなTwitterのヘッダー等にも使用可能です。

まとめ
パワーポイントで簡単に二重縁取り文字を作成でき、ブログヘッダーロゴをおしゃれにカスタマイズする方法をご紹介しました。
またこの方法ではCanvaでも二重縁取り文字を使用した 画像作成ができます。

今回のはあくまでも一例なのでいろんなアレンジをしてみてください!
-150x150.jpg)
良くなったやん~

今日も最後まで読んでくださり、ありがとうございました。
↓下記クリックして応援していただけると、泣いて喜びます!

にほんブログ村
コメント