猫グッズ販売しています(=^・^=)

【超初心者向け】クリスタでストークのヘッダーロゴを自分で作る方法

どうも!

看護師の松田トロです!

 

今日は、クリップスタジオペイント(CLIP STUDIO PAINT)、Windows、ワードプレスのテーマ(ストーク)を使って、ヘッダーロゴの変更を四苦八苦して作った過程をまとめました。

 

それでは早速いってみましょう!

MEMO
このブログは、2018年11月ストークからsangoへ変更しました

1、好きなテキスト(フォント)を選ぶ

私は、廻想体(かいそうたい)というフォントが気に入ったので、FONT FREEというサイトでダウンロードをしてクリスタにインストールしました。

この時に注意しなければいけないのは

 

クリスタのページは

閉じている事です!

 

私の場合、クリスタを開いたままダウンロードしていたら、クリスタ(テキスト)の方にインストール出来なかったので、皆さんも注意してください。

無事にインストール出来たら、テキストの方に好きなフォントが勝手に入っています。

2、自分好みのデザインを作っていく

好きなフォントが決まったら、自分のブログのタイトルなどをクリスタで作っていきます。

私は文字だけではなく、看護師と細胞膜をイメージしたロゴマークも入れてみました。

(全体の大きさは幅3720×高さ1240px→四コマで使っているサイズを横にしただけwww)

 

文字だけじゃなく、を描ける人は絵も入れたらいいですね!

 

あと、私の場合、文字を白にしたので、レイヤーを1つ追加し、緑色の背景にしてデザインを考えていきました。

そしてデザインができたら緑色のレイヤーは削除しました。

3、ロゴデザインが決まったら、レイヤー部分の用紙の部分を非表示にする

実は、デザインを決めても、そのままストークの方に画像を入れたら、文字や絵の周りに白い背景が残ったままなんですよね。

それで超超初心者の頃は

 

「絵や文字だけを

切り抜きたいのに

できない!」

 

って、思ってたんですけど、クリスタではそれを透過っていうみたいです。

ようは、レイヤーの部分にある白い用紙の部分を非表示(目の部分を消す)にすればデザインだけ残ります。

最後は、PNGで保存すればOKです。

4、ストークでヘッダーロゴを自分のデザインで作っていく

変更する際は必ず子テーマを使って下さい。

あとバックアップも必ず取ってて下さいね!

それでは、ロゴ画像は出来たので、早速ストークに入れていきます。

私の場合最初は、外観→サイト基本情報→サイトタイトルに「細胞膜のナース」と入れていただけでした↓。

なので、今回はその文字(細胞膜のナース)を全部消しました。

5、ストーク、ヘッダーのロゴの大きさ変更、中央に寄せる

次に、外観→サイトロゴ・アイコンをクリックして、作った画像をアップロードすれば自分で作ったロゴ画像が出てきます↓

しかし、私の場合…

 

メッチャ

ロゴ画像が

小さかったんですよね

www

なので、ロゴ画像の大きさを変える事にしました。

 

その際に参考にさせていただいたサイトがこちらです

Stork(ストーク)でロゴ画像のサイズを大きくする方法

ちなみに私の場合は、 「max-height: 200px;」を300にしてみました。

設定は、外観→カスタマイズ→追加CSSに、サイトにある.header.headercenter ~のCSSをコピーすれば大丈夫です↓

超初心者の方は、CSSのコピーも難しいと思いますが、右クリック2回くらい連打したら貼り付けが出てきますので、頑張ってくださいw

あとは、公開ボタンを押せば大丈夫です。

ヘッダーロゴを中央に寄せたかったら、外観→グローバル設定を開いて設定を変えてみてください。

 

私の場合は、テキストロゴサイズ標準、ヘッダーロゴサイズ中央に配置、ヘッダー背景設定フルサイズにしています。

※変更できなかったら、キャッシュがたまってないか?確認してね。

まとめ

いかがでしたか?

今回は、超初心者向けにヘッダーロゴの作り方(ストークとクリスタ編)を書きました。

私が作ったロゴデザインの流れとしてはこんな感じです。

  1. 好きなフォントを選ぶ
  2. クリスタで自分好みのデザインを考える
  3. ロゴ画像をクリスタで透過してPNGで保存
  4. ストークの外観のサイトタイトル消去
  5. ストークの外観サイトロゴ・アイコンに画像をアップロード
  6. 画像が小さかったら外観の追加CSSにこちらのサイトからCSSコピー
  7. ロゴを中央に寄せたかったら、グローバル設定でログレイアウト中央に配置を押す

 

以上、クリスタとストーク、Windowsは持ってるけど、ロゴデザインが変更できない方へ参考になったら幸いです。

ではでは!

【超初心者】2万円の液タブPD1161を買ってセットアップに試行錯誤した話

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください