【毎日実況2日目後編】:題名読めなくてワロタ

ブログ

 どうもはっち〜です🍯

 2日目の後編ということで続いてはCanvaとタイトルの消し方を説明をしていくよ^^

 一応前回のおさらいをしよう!

スポンサーリンク

ヘッダー作成方法

 私が実践したヘッダー作成方法として、

  1. O-DANで無料の画像をダウンロードしてヘッダーに貼り付ける
  2. Canvaでヘッダーを自作する

 の2つを実践しました🍯 そして前回は、1のO-DANを使用する方法を説明したので、よかったらみていってください^^

 今回私の実践した方法のみをご紹介しますが、このほかにもココナラというサイトで、ヘッダーの作成を依頼するという方法もあります🍯 

 なのでこれから説明する方法が納得いかなかった場合、参考にしてみてください🙋‍♂️

Canvaって?

 Canvaはざっくり説明すると、デザインを作成するツールで、ドラッグ&ドロップで簡単にデザインを作成することができます^^

 有料プランと無料プランがあるのですが、ぶっちゃけ無料プランで私は大満足でしたね笑

 「私、新しいこと苦手やねん〜 しかもデザインとかセンスないし無理やわ〜」

 ふむふむ。わかる笑 0から何かを作り、デザインするって難しそうですよね〜 俺も最初そう思ってましたし😇

 では使ってみての感想を言いますね、、、

 パワーポイントやん笑 

 しかも図形以外に色んな素材が合って1からデザインする必要がない!

 言葉だけだと信じてもらえないと思うので、実際に自分が今のヘッダーを作成する過程を、見せていきますね🐝

Canvaの使い方

 まず、Canvaの検索します。そうすると有料プランか無料プランかの選択画面が出てきます。(基本的に無料プランで大丈夫です。)

 登録設定を終えると

 Canvaのホーム画面へ移動するので、この画面から右上のデザインを作成を押します🍯

 そうすると、↑の画像のように名刺やらポスターやらが推奨されてきます。そこでヘッダーと検索してもワードプレス用に適したものがないので、下のカスタマイズを押します。

 そうするとこのように、幅と高さを指定できるので、自分のヘッダーに合ったサイズを入力します🍯(私の場合は1440×400です。)

 入力が完了すると

 この画面に移り変わると思います。

 画像を選択すると、右の白色のスライドに表示されます。

 前回は画像を選択したせいもあり、文字がみづらくなったので今回は、画像ではなく下から2番目の背景を選択して、単色で背景を塗りつぶしていきます🍯(注:王冠マークがついている物は有料なので気をつけましょう!

 センスのある方なら画像を背景に使ってもいいと思います!ただはっち〜はセンスがないもので😇

 今回ははちみつっぽく背景を黄色にしてみました!

 ここから私の場合では、友人に書いてもらった可愛いイラストがあったので配置していきたいと思います。

 左の項目からアップロード選択して、イラストを配置します🍯

 とりあえずこの辺に置いておきましょうか笑 続いてこのブログの題名を入れていきましょう!

 テキストを選択すると、たくさんのフォントが出てくるので、ここから自分好みのフォントを見つけましょう^^ 見つけたら題名を書き込んで行きます。

 おお〜なんかぽくなってきてないですか??笑

 あとはお好みで、素材を選択して付け足していきます〜 私はひまわりが好きなので、素材の検索窓でひまわりと検索して、素材を配置してきます。

 自分でいうのもなんですけどよくないですか?笑 私の場合はこれで完成なので、右上のダウンロードを選択して画像を保存します🍯

ヘッダー背景画像を変更しよう(ここでコケた笑)

 ここまできたら前回と同じですね! Cocoon設定→ヘッダー→ヘッダー背景画像を選択っと! さて出来栄えはどうじゃ??

 ん?なんじゃこりゃ?タイトルとキャッチフレーズが邪魔すぎる笑

 ということで次はこの2つの消し方を説明してきますね🍯

キャッチフレーズの消し方

 キャッチフレーズの削除はヘッダー背景画像と同じ画面で行えます^^

 先ほどと同じようにCocoon設定→ヘッダー→ヘッダー背景画像まで移動します。

 

 ちょうどその真上に、キャッチフレーズの配置という項目があるので、ここを表示しないに変更します。そして変更をまとめて保存を適用すると、

 お!キャッチフレーズが消えましたね!残るはタイトルのみこの調子で非表示にすれば・・・

 残念ながら私はここから長かった、、、笑 なんとタイトルの配置という項目は存在しないんです!

タイトルの消し方

 タイトルの消し方は自分が調べた限りでは

  1. 設定→一般→タイトルからタイトルを消し去る
  2. CSSをいじる
  3. ヘッダーロゴに透明シートをぶち込む

 の3つの方法がありました🍯

 まず1つ目の方法ではタイトルを消してしまうと、ドメイン名がブログのタイトルとなってしまい、ちょっと納得できなかったのでやめました笑

 次に2つ目の方法ですが、私はCSS恐怖症なので諦めました😇(以前ワードプレスを使わず、プログサイトを書いた際、CSSをいじってサイトの見た目がバグった経験を数十回ある笑)

 残る3つ目の方法ですが、簡単にいうとタイトル部分を透明なシートで上から被せて、見えなくさせる作戦ですね☺️

透明シートの作り方

 理屈が分かったところで早速透明シートを作っていきたいと思います!

 これは私のやり方ですが、

 まず初めにCanvaで背景が真っ黒なヘッダー画像を作成します。

 続いて真っ黒なヘッダー画像を透明にしていくのですが、画像背景透過・透明化を無料で行ってくれるPEKOSTEPを活用します🍯

 サイトに移動して「ファイル」ボタンをクリックし、真っ黒なヘッダー画像を選択します。

 この状態で黒い画像をクリックすると、、

 透明になりました!! この透明画像は「ファイル」→「保存」で保存できます☺️

ヘッダーロゴを変更

 ここまで来ればもうあとは楽勝です!笑

 Cocoon設定→ヘッダー→ヘッダーロゴ に移動します。

 

 「選択」から先ほど保存した透明シートを選択して、変更をまとめて保存を押すと、、、

 おおおおおお!ようやくすっきりしたヘッダー画像が😭 (ちなみに私のイラストも先ほどのサイトを活用してイラスト背景の透明化を行っています^^)

まとめ

 2日目どうでしたかね?笑 結構ボリューム多めになってしまいはっち〜も読者もヘトヘトやと思います笑 それでもここまで読んでくださってありがとうございます☺️(参考程度に:2つの記事の作成時間は合計4時間37分でした😇)

コメント

タイトルとURLをコピーしました