こんにちは、
氷河期世代クリエイターのYOHEIです。
前回にひきつづき、
初心者できた!ワードプレスブログ始め方Step6【カスタマイズ編1 トップバナー・プロフィールカード作成】です。
（全9回に分けて解説しています）
今回は、前回までの作成してきたサイトに、最初にしておきたい簡単なおすすめのカスタマイズを紹介します。簡単といっても、このカスタマイズをするだけでブログサイトを十分グレードアップできるので、最初に何からすればと迷われている方は参考にしてみてください。
（・o・）/
Step6 カスタマイズ編1もくじ
1. トップバナーの作成【ワードプレスの最初にすべきカスタマイズ】
2. プロフィールをサイドバーに設置
3. トップページヘッダー下にカード型リンクを設置
4. まとめ：WordPressのトップバナー・プロフィールカード作成についておさらいしましょう！
1. トップバナーの作成【ワードプレスの最初にすべきカスタマイズ】
前回、ワードプレスのテーマ（WING AFFINGER5）をインストールしてサイト全体の色等を設定しましたが、何か完成した雰囲気に見えません。それはサイトデザインの顔であるトップバナー（ヘッダー画像）がないからです。トップバナーは、いわば自分のサイトのキービジュアルでありブランディングも兼ねる役割があります。そしてトップページに独自のイメージがあるだけでオリジナリティーが生まれます。なので最初にトップバナーを設定することをおすすめします！
WING AFFINGER5をインストールしただけの状態だと、WINGとロゴが入った画像が初期設定で貼られています。この画像を変更します。
そこで、どういった内容にするのか？変更する素材はどうするか？となると思います。ここは人によってどういったものにしたいか違うと思いますが、
●内容としては、
パターン1：自分のサイト名を表示する（+αでサイトのキャッチプレーズなど）
パターン2：自分のブログサイトの方向性にあった好きな写真やイラスト素材（フリー素材でもOK）+サイト名（+αでサイトのキャッチプレーズなど）
パターン3：サイト名・写真・イラストの組み合わせ
といったものが考えられます。できるなら、サイト名はロゴ化するなどしてオリジナルの要素を加えることが独自性がありおすすめです。
●素材は、
パターン1：自分で描く（オリジナリティーがあり◎）
パターン2：カメラやスマホなどで撮影する（オリジナリティーがあり◎）撮影する被写体によって権利がありますので、大丈夫な物を撮りましょう！
パターン3：フリー素材を使用する（手軽だがオリジナリティーが弱いかも）
といったいずれかで用意します。
フリー素材の入手方法については、こちらの記事で紹介しています。
-
-
無料あり!ブログで使える写真素材の探し方【あなたのサイトを魅力的に】
こんにちは、 氷河期世代クリエイターのYOHEIです。 初めてホームページやブログを作る時に文字要素だけだと、見た目がパッとしない事に気づくと思います。 そこで、サイトをより魅力的で華やかにするために ...
続きを見る
手書き素材の作り方については、こちらの記事で紹介しています。
-
-
ブログの手描きアイキャッチ画像作り方！【無料で簡単にできる】
こんにちは、 氷河期世代クリエイターのYOHEIです。 今回の記事では、このブログで使用している手描きイラストのアイキャッチ・サムネの作り方を紹介したいと思います。 ブログのアイキャッチやサムネを用意 ...
続きを見る
このYOHEI LOGは手書きのロゴイラストを使用しています。
ではサイトに反映していきましょう。まずワードプレス管理画面にログイン。管理画面左側メニューの「外観 」→「カスタマイズ」をクリック。
テーマのカスタマイズ画面に切り替わります。左側メニューの「ヘッダー画像」をクリック。
ヘッダー画像のカスタマイズ画面に切り替わります。ここのメニューに画像の推奨サイズが記載されています。このテーマだと2200×500ピクセルの画像サイズがうまくいくみたいです。Photoshopなどの画像編集ソフトがあれば調整しましょう。なければ、アップロード後にフィットするように切り抜くようにしましょう。
「現在のヘッダー」項目の「新規画像を追加」をクリック。
画像アップロード画面に切り替わります。ここにファイルをドロップしてアップロード。
アップするとメディアライブラリーに追加されます。画像を選択し、必要に応じて代替テキストやタイトル等を入力します。そして画面右下の「選択して切り抜く」をクリック。
次の画面で画像を切り抜かない場合は「切り抜かない」を、切り抜いてトリミングする場合は「画像切り抜き」をクリック。
クリックするとカスタマイズ画面にもどり、画像が反映されて表示されます。
問題なければ、左側メニューの一番上にある「公開」ボタンをクリック。ブログサイトを表示して確認してみましょう。反映されていれば無事完了です！変更前と比べると、これだけでかなり印象が変わったと思います。（ヘッダーの色等は、初心者ができた!ワードプレスブログ【すぐ開設できる】Step4 ブログテーマインストール編の最後で紹介したAFFINGER5のサイト全体の設定で●カラーパターン：グレー ●デザインパターン：フラットに変更したものです）
2. プロフィールをサイドバーに設置
このサイトもそうですが、簡易プロフィールが画面右や左のサイドバーの一番上に表示されているサイトをよく見かけます。「詳しくはコチラ」等のボタンから詳細プロフィールページへと入っていけます。こういった目立つ場所にあると、プロフィールを見てもらいやすくなります。また、どんな人が書いているか気になったりする読者にとって便利です。そしてプロフィールの内容で読者になってくれることもあります。あと、プロフィールの情報しだいで記事の説得力も変わります。WING AFFINGER5のインストール段階では、ここにプロフィールが表示されていません。必ず必要というわけではありませんが、簡単にブログサイトらしい雰囲気もでるのでおすすめです！
では手順を見ていきましょう。
まず、プロフィール情報を入力します。ワードプレス管理画面の左側メニューにある「ユーザー 」→「あなたのプロフィール」をクリック。
ここでプロフィールの必要な情報を入力します。とりあえず、
・ニックネーム（必須）
・ブログ上の表示名
・メールアドレス（必須）
・プロフィール情報
を入力します。
プロフィール写真にGravatarを使用する場合はここで登録します。Gravatarとは簡単に言うと、メールアドレスとアイコンを紐付けることで、その他のGravatarが使えるサービス上で再度登録不要でアイコンを使用することができるサービスです。ワードプレス以外で色々なGravatarに対応したサービスを使用する方は便利かもしれません。今回は使用しませんので後でプロフィール画像を設定します。
入力ができたら一番下にある「プロフィールを更新」をクリック。
次にブログサイトのサイドバーの一番上にプロフィール情報のエリアを設置・設定します。（左：設置前 右：設置後）
ワードプレス管理画面の左側メニューにある「外観 」→「ウィジェット」をクリック。
ウィジェット画面左列の「利用できるウィジェット」の「11_STINGERサイト管理者紹介」を右側の「サイドバートップ」にドラッグします。タイトルを付けて保存します。
これで先ほど入力したプロフィール情報は、サイドバートップに表示されます。あとは、ここにプロフィールの画像を設定すれば完成します 。
ワードプレス管理画面の左側メニューにある「外観 」→「カスタマイズ」→「［+］オプションカラー」→「サイト管理者紹介」をクリック。
そうすると画面左カラムがカスタマイズできる画面に切り替わります。
ここで、好みの設定をします。
ひとまず「プロフィールカードに変更」にチェックを入れ、その下にあるアバター画像にプロフィールで表示させたいアイコンの画像をアップロードします。そのまた下にある「ボタンURL」に「詳しくはコチラ」ボタンのリンク先である、プロフィールページのURLを入力。（リンク先のプロフィール詳細ページは固定ページで別途作成します）文字色やボタンテキスト（未入力だと「詳しくはコチラ」が表示）は、好みで設定します。
「影をつける」にチェックを入れると、プロフィールカードにドロップシャドーの装飾が施されます。最後に一番上に戻り「公開」をクリックで完了！
3. トップページヘッダー下にカード型リンクを設置
今回の記事の最後におまけですが、トップページのヘッダー画像の下にカード型リンクバナーの設置方法を紹介します。※テーマ WING AFFINGER5 の機能です
この機能を使用すれば、特に読ましたい記事をバナーとして表示することができます。そうすれば新しい記事に埋もれてしまった古い記事でも見てもらえるようにアピールできます。絶対必要というわけではないですが、読ませたい記事と新しい記事の両方をトップページで目立たせることができるのでとっても便利な機能です。
まず、ワードプレス管理画面の「AFFINGER5 管理」→「AFFINGER5 管理」→「おすすめ記事一覧」ページへ。
その中の「おすすめヘッダーカード」項目にバナーとして表示させたい
・画像：バナーの画像
・テキスト：記事タイトル or キャッチコピー
・リンク先URL：記事ページ等のURL
を入力します。そして「SAVE」ボタンをクリック。
↓
そうすると、トップページヘッダー画像の下にバナーが設置されます。これだけです。簡単ですね。
ちなみにバナーの数は1～最大４つまで設置できます。
これで少しはブログサイトらしくなってきたと思います。
今回はここまで。
4. まとめ：WordPressのトップバナー・プロフィールカード作成についておさらいしましょう！
今回は、ワードプレスのトップバナー・プロフィールカード作成方法について紹介させていただきました。
本記事の内容を要約しておきます。
次回はサイトを公開するうえで必須となった「プライバシーポリシー」ページを作成します。
ではでは。
（・o・）/
《人気関連記事》初心者できた!ワードプレスブログ始め方Step7【カスタマイズ編2 プライバシーポリシーページ作成】
《人気関連記事》初心者できた!ワードプレスブログ始め方Step1【すぐ開設！準備編】
《人気関連記事》ブログの手描きアイキャッチ画像作り方！【無料で簡単にできる】