BLOG for BEGINNERS CREATIVE SKILLS

初心者できた!ワードプレスブログ始め方Step6【カスタマイズ編1 トップバナー・プロフィールカード作成】

初心者できた!ワードプレスブログ始め方Step6【カスタマイズ編1 トップバナー・プロフィールカード作成】

こんにちは、

氷河期世代クリエイターのYOHEIです。

前回にひきつづき、

初心者できた!ワードプレスブログ始め方Step6【カスタマイズ編1 トップバナー・プロフィールカード作成】です。

(全9回に分けて解説しています)

今回は、前回までの作成してきたサイトに、最初にしておきたい簡単なおすすめのカスタマイズを紹介します。簡単といっても、このカスタマイズをするだけでブログサイトを十分グレードアップできるので、最初に何からすればと迷われている方は参考にしてみてください。

(・o・)/

 

Step6 カスタマイズ編1もくじ

1. トップバナーの作成【ワードプレスの最初にすべきカスタマイズ】

2. プロフィールをサイドバーに設置

3. トップページヘッダー下にカード型リンクを設置

4. まとめ:WordPressのトップバナー・プロフィールカード作成についておさらいしましょう!

 

1. トップバナーの作成【ワードプレスの最初にすべきカスタマイズ】

前回、ワードプレスのテーマ(WING AFFINGER5)をインストールしてサイト全体の色等を設定しましたが、何か完成した雰囲気に見えません。それはサイトデザインの顔であるトップバナー(ヘッダー画像)がないからです。トップバナーは、いわば自分のサイトのキービジュアルでありブランディングも兼ねる役割があります。そしてトップページに独自のイメージがあるだけでオリジナリティーが生まれます。なので最初にトップバナーを設定することをおすすめします!

WING AFFINGER5をインストールしただけの状態だと、WINGとロゴが入った画像が初期設定で貼られています。この画像を変更します。

eyecatch_srgb_2004026_step6_1

 

そこで、どういった内容にするのか?変更する素材はどうするか?となると思います。ここは人によってどういったものにしたいか違うと思いますが、

●内容としては、

パターン1:自分のサイト名を表示する(+αでサイトのキャッチプレーズなど)

パターン2:自分のブログサイトの方向性にあった好きな写真やイラスト素材(フリー素材でもOK)+サイト名(+αでサイトのキャッチプレーズなど)

パターン3:サイト名・写真・イラストの組み合わせ

といったものが考えられます。できるなら、サイト名はロゴ化するなどしてオリジナルの要素を加えることが独自性がありおすすめです。

●素材は、

パターン1:自分で描く(オリジナリティーがあり◎)

パターン2:カメラやスマホなどで撮影する(オリジナリティーがあり◎)撮影する被写体によって権利がありますので、大丈夫な物を撮りましょう!

パターン3:フリー素材を使用する(手軽だがオリジナリティーが弱いかも)

といったいずれかで用意します。

 

フリー素材の入手方法については、こちらの記事で紹介しています。

無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】
無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】

こんにちは、 氷河期世代クリエイターのYOHEIです。 初めてホームページやブログを作る時に文字要素だけだと、見た目がパッとしない事に気づくと思います。 そこで、サイトをより魅力的で華やかにするために ...

続きを見る

 

手書き素材の作り方については、こちらの記事で紹介しています。

ブログの手描きアイキャッチ画像作り方!【無料で簡単にできる】
ブログの手描きアイキャッチ画像作り方!【無料で簡単にできる】

こんにちは、 氷河期世代クリエイターのYOHEIです。 今回の記事では、このブログで使用している手描きイラストのアイキャッチ・サムネの作り方を紹介したいと思います。 ブログのアイキャッチやサムネを用意 ...

続きを見る

 

このYOHEI LOGは手書きのロゴイラストを使用しています。

eyecatch_srgb_2004026_step6_2

 

ではサイトに反映していきましょう。まずワードプレス管理画面にログイン。管理画面左側メニューの「外観 」→「カスタマイズ」をクリック。

eyecatch_srgb_2004026_step6_3

 

テーマのカスタマイズ画面に切り替わります。左側メニューの「ヘッダー画像」をクリック。

eyecatch_srgb_2004026_step6_4

 

ヘッダー画像のカスタマイズ画面に切り替わります。ここのメニューに画像の推奨サイズが記載されています。このテーマだと2200×500ピクセルの画像サイズがうまくいくみたいです。Photoshopなどの画像編集ソフトがあれば調整しましょう。なければ、アップロード後にフィットするように切り抜くようにしましょう。

「現在のヘッダー」項目の「新規画像を追加」をクリック。

eyecatch_srgb_2004026_step6_5

 

 

画像アップロード画面に切り替わります。ここにファイルをドロップしてアップロード。

eyecatch_srgb_2004026_step6_6

 

アップするとメディアライブラリーに追加されます。画像を選択し、必要に応じて代替テキストやタイトル等を入力します。そして画面右下の「選択して切り抜く」をクリック。

eyecatch_srgb_2004026_step6_7

 

次の画面で画像を切り抜かない場合は「切り抜かない」を、切り抜いてトリミングする場合は「画像切り抜き」をクリック。

eyecatch_srgb_2004026_step6_8

 

クリックするとカスタマイズ画面にもどり、画像が反映されて表示されます。

eyecatch_srgb_2004026_step6_9

 

問題なければ、左側メニューの一番上にある「公開」ボタンをクリック。ブログサイトを表示して確認してみましょう。反映されていれば無事完了です!変更前と比べると、これだけでかなり印象が変わったと思います。(ヘッダーの色等は、初心者ができた!ワードプレスブログ【すぐ開設できる】Step4 ブログテーマインストール編の最後で紹介したAFFINGER5のサイト全体の設定で●カラーパターン:グレー ●デザインパターン:フラットに変更したものです)

eyecatch_srgb_2004026_step6_11

 

2. プロフィールをサイドバーに設置

このサイトもそうですが、簡易プロフィールが画面右や左のサイドバーの一番上に表示されているサイトをよく見かけます。「詳しくはコチラ」等のボタンから詳細プロフィールページへと入っていけます。こういった目立つ場所にあると、プロフィールを見てもらいやすくなります。また、どんな人が書いているか気になったりする読者にとって便利です。そしてプロフィールの内容で読者になってくれることもあります。あと、プロフィールの情報しだいで記事の説得力も変わります。WING AFFINGER5のインストール段階では、ここにプロフィールが表示されていません。必ず必要というわけではありませんが、簡単にブログサイトらしい雰囲気もでるのでおすすめです!

では手順を見ていきましょう。

まず、プロフィール情報を入力します。ワードプレス管理画面の左側メニューにある「ユーザー 」→「あなたのプロフィール」をクリック。

eyecatch_srgb_2004026_step6_12

 

ここでプロフィールの必要な情報を入力します。とりあえず、

・ニックネーム(必須)

・ブログ上の表示名

・メールアドレス(必須)

・プロフィール情報

を入力します。

プロフィール写真にGravatarを使用する場合はここで登録します。Gravatarとは簡単に言うと、メールアドレスとアイコンを紐付けることで、その他のGravatarが使えるサービス上で再度登録不要でアイコンを使用することができるサービスです。ワードプレス以外で色々なGravatarに対応したサービスを使用する方は便利かもしれません。今回は使用しませんので後でプロフィール画像を設定します。

入力ができたら一番下にある「プロフィールを更新」をクリック。

eyecatch_srgb_2004026_step6_13

 

次にブログサイトのサイドバーの一番上にプロフィール情報のエリアを設置・設定します。(左:設置前 右:設置後)

eyecatch_srgb_2004026_step6_14

 

ワードプレス管理画面の左側メニューにある「外観 」→「ウィジェット」をクリック。

eyecatch_srgb_2004026_step6_15

 

ウィジェット画面左列の「利用できるウィジェット」の「11_STINGERサイト管理者紹介」を右側の「サイドバートップ」にドラッグします。タイトルを付けて保存します。

eyecatch_srgb_2004026_step6_16

 

これで先ほど入力したプロフィール情報は、サイドバートップに表示されます。あとは、ここにプロフィールの画像を設定すれば完成します 。

ワードプレス管理画面の左側メニューにある「外観 」→「カスタマイズ」→「[+]オプションカラー」→「サイト管理者紹介」をクリック。

eyecatch_srgb_2004026_step6_17

 

そうすると画面左カラムがカスタマイズできる画面に切り替わります。

ここで、好みの設定をします。

ひとまず「プロフィールカードに変更」にチェックを入れ、その下にあるアバター画像にプロフィールで表示させたいアイコンの画像をアップロードします。そのまた下にある「ボタンURL」に「詳しくはコチラ」ボタンのリンク先である、プロフィールページのURLを入力。(リンク先のプロフィール詳細ページは固定ページで別途作成します)文字色やボタンテキスト(未入力だと「詳しくはコチラ」が表示)は、好みで設定します。

eyecatch_srgb_2004026_step6_18

 

「影をつける」にチェックを入れると、プロフィールカードにドロップシャドーの装飾が施されます。最後に一番上に戻り「公開」をクリックで完了!

eyecatch_srgb_2004026_step6_19

 

3. トップページヘッダー下にカード型リンクを設置

今回の記事の最後におまけですが、トップページのヘッダー画像の下にカード型リンクバナーの設置方法を紹介します。※テーマ WING AFFINGER5 の機能です

この機能を使用すれば、特に読ましたい記事をバナーとして表示することができます。そうすれば新しい記事に埋もれてしまった古い記事でも見てもらえるようにアピールできます。絶対必要というわけではないですが、読ませたい記事と新しい記事の両方をトップページで目立たせることができるのでとっても便利な機能です。

まず、ワードプレス管理画面の「AFFINGER5 管理」→「AFFINGER5 管理」→「おすすめ記事一覧」ページへ。

eyecatch_srgb_2004026_step6_20

 

その中の「おすすめヘッダーカード」項目にバナーとして表示させたい

・画像:バナーの画像

・テキスト:記事タイトル or キャッチコピー

・リンク先URL:記事ページ等のURL

を入力します。そして「SAVE」ボタンをクリック。

eyecatch_srgb_2004026_step6_21

eyecatch_srgb_2004026_step6_22

 

そうすると、トップページヘッダー画像の下にバナーが設置されます。これだけです。簡単ですね。

ちなみにバナーの数は1~最大4つまで設置できます。

eyecatch_srgb_2004026_step6_23

 

これで少しはブログサイトらしくなってきたと思います。

今回はここまで。

 

4. まとめ:WordPressのトップバナー・プロフィールカード作成についておさらいしましょう!

今回は、ワードプレスのトップバナー・プロフィールカード作成方法について紹介させていただきました。

本記事の内容を要約しておきます。

まとめ

1. トップバナーは、いわば自分のサイトのキービジュアルでありブランディングも兼ねる役割があります。とっても重要なので、ひと工夫することをおすすめします。

2. プロフィール情報があると、読者になってくれる可能性が上がります!また記事の説得力にも影響するので作成することをおすすめします!

3. ヘッダーカードを設置すると、読ませたい記事と新しい記事の両方をトップページで目立たせることができる!

次回はサイトを公開するうえで必須となった「プライバシーポリシー」ページを作成します。

ではでは。

(・o・)/

《人気関連記事》初心者できた!ワードプレスブログ始め方Step7【カスタマイズ編2 プライバシーポリシーページ作成】

《人気関連記事》初心者できた!ワードプレスブログ始め方Step1【すぐ開設!準備編】

《人気関連記事》ブログの手描きアイキャッチ画像作り方!【無料で簡単にできる】

-BLOG for BEGINNERS, CREATIVE, SKILLS

Copyright© YOHEI LOG , 2021 All Rights Reserved.