【STORK(ストーク)】テキストロゴをお使いの方におすすめの「あること」とは?

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」を
お使いの方に向けたちょっとしたカスタマイズネタを紹介します。

STORK(ストーク)ではブログの最上部に
サイトロゴを設置することができます。

私のブログで言う所のこの部分↓

ですね。

サイトロゴには2種類あって、

  • ロゴ画像
  • テキストロゴ(ブログタイトルを表示)

この2つがあります。
ちなみに上の画像はロゴ画像の方を使っています。

中にはロゴ画像を使わずにシンプルにテキストロゴを
設置しているという方もいらっしゃると思うんですが、
テキストロゴを設置する場合にちょっとした問題が
起きる可能性があるんです。

それは、

テキストロゴが長いとスマホから見た時に
変なところで改行されて見づらい問題

ですね。こんな感じです。

私のブログのタイトルは
「ネットビジネスでお金を稼いで
自由なライフスタイルを創造するブログ」
です。ちょっと長いですよね。

これをそのままテキストロゴに設定すると
上の画像のようになってしまうんです。
残念ながら見栄え悪いです。

ブログのタイトルを変えれば解決しますが、
ブログタイトルの変更はSEO上あまり良くないと
言われているので、このためだけに変えるのは
避けたいですよね。

今回はSTORK(ストーク)でテキストロゴを使いたいんだけど、
見栄えが気に食わないという方に向けてちょっとした
テクニックを紹介します。

テキストロゴをお使いの方はぜひ参考にして下さいね!

 

テキストロゴだけどロゴ画像?

さっそくそのテクニックを紹介していきますね。
その方法とは、

テキストロゴだけどロゴ画像を使う

という方法です。

ん?テキストロゴとロゴ画像は違うよね?
どういうこと?

と思ったかもしれないので解説していきますね。

テキストロゴをお使いの方はおそらく
ブログタイトルをヘッダーに表示させたい方だと思うんです。
テキストロゴ=ブログタイトルですからね。

ただ、そのままテキストロゴ設定にしてしまうと
改行位置などの設定を行うことは出来ません。

なので、その問題を解決するために

テキストロゴ(=ブログタイトル)を画像化して
ロゴ画像として設定してしまえばいいんです。

これが今回紹介するテクニックの概要です。

 

ブログタイトルのロゴ画像化の方法

1.まずは画像編集ソフトを用意する

ブログタイトルの画像化には画像編集ソフトが必要になりますので
まずこのソフトを用意しましょう。
私はフリーソフトの「PhotoScape」を愛用しています。

フリーソフトですが簡単な編集なら十分こなすことができます。
もし画像編集ソフトをお持ちでない場合は今後活躍する場面は
多々あるのでインストールしておくことをお勧めします。

 

2.ペイントで背景画像を用意する

画像編集ソフトが用意出来たら早速作業を進めていきましょう。

まずは先ほどインストールした画像編集ソフトではなく、
Windowsパソコンなら最初から付いている「ペイント」で
作業を行います。

ブログタイトル画像を作成するにあたり、
背景画像が必要になるのでペイントを使って
先に背景画像を作成しておきます。

まずはペイント(Windows10の場合はペイント3D)を開きましょう。
開いたら、

  1. 画面上部の「ブラシ」をクリック
  2. 画面右上の「塗りつぶし」をクリック
  3. 画面右下の「色の追加」をクリック

この様にクリックしていって下さい。そうすると
「新しい色の選択」というウィンドウが開きます。

このウィンドウであなたのヘッダー背景色と同じ色
作成しましょう。

ヘッダー背景色はWordPressのカスタマイズメニューの
サイトカラー設定から確認することができます。

ここで表示されている16進数のカラーコードを
コピーして下さい。

コピーできたら先ほどのペイントの「新しい色の選択」
の右下にある「16進数」の項目にペーストします。

OKをクリックすればあなたのブログのヘッダー背景色と同じ色が
ペイントに追加されるのでこの色で塗りつぶします。

ここまでできたら保存して下さい。

 

3.画像編集ソフトで編集する

背景画像が保存できたらこのファイルを先ほどインストールした
PhotoScapeで開きます。

その後、画面左下にある「テキスト」をクリックしましょう。

これで背景画像にテキストを挿入できるので
あなたがテキストロゴとして表示させたい文字列を入力します。

サイズや文字色などの調整が終わったら、
テキストギリギリのところでトリミングをします。

今回は例として私のブログタイトルで作成してみました。
こんな感じです↓

 

4.作成したテキストロゴ画像を設定する

テキストロゴ画像が完成したら早速設定してみましょう。

ロゴ画像の設定方法は別記事で説明しているので
分からない場合はそちらを参考に設定して下さいね。

【STORK(ストーク)】サイトロゴの設定を行う方法

設定完了後、スマホからの見た目を確認しましょう。

Before

After

ばっちりですね!

この方法でテキストを画像で用意すれば
ブログタイトルに限らずなんでも思い通りのレイアウトで
ヘッダー部分に表示させることができます。

ぜひこのテクニックを活用してあなたの理想のブログへ
近づけていって下さいね!

 

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?