【ブログの装飾】目を引くタイトルロゴ画像を設定する方法
2016/04/08
たのちんのブログデザインの考え方をベースにブログの装飾をしていくことにした、たのちん管理人なむ。
たのちんでは、背景やヘッダー画像の設定、ロゴやアイコンなど【デザイン】に関する設定は、テーマと子テーマの設定後に行っています。デザイン性の高いテーマや子テーマを使用する場合は、先にそちらの設定をしてしまってからの方が雰囲気が合わせやすくなると思います。
＊【テーマ】WordPressテーマ「STINGER5」のインストール方法
＊【子テーマ】STINGERの子テーマ「SIMPLESTER」のインストール方法
＊【子テーマ】エックスサーバーで子テーマのテーマフォルダを作成する
スポンサーリンク
Contents
まずは雰囲気を決める画像を用意する
基本的なレイアウトや構成はWordPressのテーマを導入することで整いますので、大幅に変更することはないのですが、画像を用意することで簡単に印象を変えることができる部分をカスタマイズしてみます。
|
１．ブログの背景に壁紙画像を設定する方法 ２．ヘッダー部分にタイトル画像を設定する方法 ３．目を引くタイトルロゴ画像を設定する方法 ←コレを設定します ４．ブログの目印！アイコンやファビコンの作り方 ５．アバターの作成とコメントアイコンの設定方法 |
ロゴ画像を設定してみる
ブログのタイトル部分にロゴマークなどの画像を設定することができます。
たのちんでいうと下の部分です。
たのちんが利用させていただいている子テーマの「SIMPLESTER」でいえばこの部分です。
このように、タイトルの部分に画像を設定できます。
たのちんの場合も、おしゃれなロゴマークを「ランサーズ」のようなクラウドソーシングで作ってもらおうかな～♪と思いましたが、気が早すぎると思って保留にしました。
まずは自分でできる範囲で、大きく育つ可能性が見えてきたらお金をかけてでも、もう少し体裁を整えることにします。
マークを作ることも考えましたが、まずはたのちんの名前を憶えてもらいたいということで、シンプルにブログ名をフリーフォントで画像化してくれるツールを使わせていただき、ロゴ画像にしています。
たのちんでは、こちらのサイトを利用させていただいています。
＊参考：「フリーフォントで簡単ロゴ作成」
簡単ですから早速設定してみましょう。
ロゴ画像の設定方法
① 素材を準備する
ロゴマークの画像データを準備します。
たのちんのロゴは「フリーフォントで簡単ロゴ作成」で作成されています。
なむは難しいことはできないので、せっかくの機能を全然使いこなせていないと思います…。
みなさんいろいろやってみてください。
きっとたのちんよりいいロゴができると思います。
まずはフォントを選びます。
たのちんのロゴは「りいてがき筆」というフォントです。
フォントを選んだら、作成したいタイトルを入力して「変更」ボタンをクリックします。すると、一番下の枠部分にプレビュー画像がでます。
「しねきゃぷしょん」というフォントの場合はこんな感じになります。
「ラノベPOP」というフォントだとこんな感じです。
他にもたくさんのフリーフォントが選べるようになっていますので、好みのものを選択してください。
色を変えることもできます。
右側にあるカラーボックスから色を選びます。
文字の色を変えたい場合は「テキスト」をクリックすると、テキストボックスの真上にある「テキスト色」が選んだ色に変わります。そして「変更」ボタンを押すと、文字色が反映されたプレビューが表示されます。
色の選択は、「色参照」ボタンからもできます。
「テキスト」ではなく、「背景」や「背景2」などの色を設定することで、以下のようなロゴ画像を作ることも可能です。
いろいろと試してみてください。
フォントやカラーを設定してコレでOK！となったら、プレビュー画面の右隅の枠をクリック＆ドロップで動かして枠サイズを調整し、「変更」ボタンで確定させます。
フォント・カラー・サイズと完成したら、ダウンロードをして画像をPCに保存します。
たのちんの場合は「りいてがき筆」フォントで、文字色は黒のままなので本当に単純です。
すぐできます。
完成です
ロゴの作成自体は以上ですが、このままではロゴの背景色の都合が悪いのでもう少し加工します。
上の画像は背景が白同士なのでわかりませんが、実際にロゴ画像としてはめてみたらわかります。
ロゴの背景部分が白いんです。笑
マークみたいになっているならまだしも、ただの文字ですから少し不細工ですよね…。
画像の背景の白い部分を透明にする画像処理をします。
「PEKO STEP」さんの「透過PNG画像作成ツール」を使用させていただきました。
超簡単に背景を透過にできます。
サイドバーにある「WEBで画像加工→透過画像にする」をクリックすると、下の画面になります。
「ここに画像をドロップしてください」という窓に透過処理したい画像をドロップします。
透過対象が「クリックした色を透過する」になっていることを確認して、白い部分をクリックします。
背景の白かった部分が透明になりました。
これでOKですので、画像をPCに保存します。
背景透過画像の完成です。
これでロゴ画像の作成は完了です
続いてブログに設置していきましょう。
② ロゴ画像を設定する
画像の用意ができたら、ブログに実装します。
まずはWordPressにログインして、サイドバーの外観＞カスタマイズをクリックしましょう。
カスタマイズ画面が出ますので（STINGERの場合）「ロゴ画像」をクリック。
ロゴ用に用意した画像をアップしていきます。
アップロードできたら、掲載する画像を確認して「画像の選択」ボタンをクリックします。
無事設定できているのを確認できたら、保存して完了です。
簡単でした！
ロゴ画像は背景もちゃんと透過になっていますね。
おつかれさまでした(*´ω｀)
＊【SIMPLESTER】タイトルロゴの表示が小さい場合のカスタマイズ
その他の装飾はこちらです
＊【ブログの装飾】ブログの背景に壁紙画像を設定する方法
＊【ブログの装飾】ヘッダー部分にタイトル画像を設定する方法
＊【ブログの装飾】ブログの目印！アイコンやファビコンの作り方
＊【ブログの装飾】アバターの作成とコメントアイコンの設定方法
機能面の拡張はプラグインやテーマのカスタマイズで
＊３．プラグインをインストールしてブログの機能を強化
＊４．プラグインを使わずにブログの機能を強化