【ブログの始め方】＃９～好きなデザインにしたい～

＜デザインの設定＞

Classic Editor のインストール

かずくん

「AFFINGER5（アフィンガー5）」のインストールが終わったけど、もう使える？

いちこさん

ちょっと待って、最初にやることがあるの。

かずくん

どんな事？

いちこさん

まずプラグインの「Classic Editor」のインストールね。

かずくん

どうすればいいの？

いちこさん

「プラグイン」＞「新規追加」をクリックして。

かずくん

画面が変わったよ。すでに「Classic Editor」が表示されている。

いちこさん

「今すぐインストール」ボタンをクリックして。

かずくん

「有効化」ボタンが表示された。

いちこさん

では「有効化」ボタンをクリックしてね。これで「Classic Editor」のインストールは終わりよ。

かずくん

次は何をするの？

いちこさん

「AFFINGER5 管理」をクリックして。そして「保存」ボタンをクリックして。

かずくん

クリックしたよ。

いちこさん

次は「設定」＞「パーマリンク設定」をクリックして。

かずくん

どこを変更するの？

いちこさん

「投稿名」をクリックしてから「変更を保存」ボタンをクリックして。

かずくん

次は何をするの？

いちこさん

「AFFINGER5 管理」＞「デザイン」をクリックね。

かずくん

カラーが変えられるみたいだね。

いちこさん

「カラーパターン」と「デザインパターン」を変更して「save」ボタンをクリックして。

かずくん

どうやって確認するの？

いちこさん

この管理画面とは別に、新しいタブにブログ画面を表示してみて。

かずくん

OK。出来たよ。

いちこさん

ブログ画面の「更新」ボタンをクリックして。

かずくん

なるほど、色がちゃんと表示された。

いちこさん

「save」と「更新」を繰り返して好きな色を決めてね。

かずくん

「赤（エレガント）」と「デフォルト（グラデーション横）」に決めたよ。

いちこさん

あと別に「デザイン済みデータ」というのがあるんだけど注意してね。

かずくん

「デザイン済みデータ」で注意するとは？

いちこさん

これを利用すると、いきなり格好いいデザインになるんだけど、私はおすすめしないわ。自分の実力以上のデザインになるので、あとでの変更が難しいの。サポートがないデザインもあるわよ。
でもおすすめしないけど、良いところもたくさんあるのは事実よ。使いこなす自信があれば、良いと思うわ。

かずくん

了解、今回はやめとくよ。さて、あとメニューがないよね。どうすればいいの？

メニューの作成

いちこさん

その前にカテゴリーを決めましょ。

かずくん

とりあえずカテゴリーは「音楽」「映画」「カメラ」で。

いちこさん

では「投稿」＞「カテゴリー」を開いて。
「名前」にカテゴリー名を、「スラッグ」に英語名を、「親カテゴリー」は「なし」で入力してくれる？
スラッグは、"music", "movie", "camera"だね。

かずくん

1個入力したけど、どこで保存するの？

いちこさん

1個入力しては、ページの一番下部にある「新規カテゴリーを追加」ボタンをクリックしてね。今回は3回繰り返しになるわね。

かずくん

これらをメニューにするんだね。

いちこさん

そうだよ。「外観」＞「メニュー」を開いて。

●「メニュー構造」の「メニュー名」に任意の名前をつけて「メニューを作成」ボタンをクリック。

●「メニュー設定」にチェックを入れて。今はこの見本通りに入れてね。「メニューを保存」ボタンをクリック。

●「メニュー項目を追加」＞「固定ページ」＞「すべて表示」で「ホーム」にチェックを入れて「メニューに追加」ボタンをクリック。

●「メニュー項目を追加」＞「カテゴリー」＞「すべて表示」で必要な項目にチェックを入れて「メニューに追加」ボタンをクリック。

●メニューの並びが違っても各項目をドラッグすれば順番を変えれるわ。

●「メニューを保存」ボタンをクリックして。

かずくん

入力、終わったよ。

いちこさん

確認用のタブで表示してみて。「更新」ボタンをクリックするのを忘れないでね。出来てる？

かずくん

お、出来てるよ。ばっちりだ。あとヘッダーに画像も入れたいんだけど。いい写真、持ってるんだ。

いちこさん

了解、説明するわね。

●「外観」＞「カスタマイズ」をクリック。

●「ヘッダー画像」をクリック。

●「新規画像を追加」ボタンをクリック。

●「画像の選択」画面になるわ。

●そこに画像ファアイルをドロップ。

●「選択して切り抜く」ボタンをクリック。

●今回は「切り抜かない」ボタンをクリック。

●画像が追加されたわ。

●少し下の方にある「ヘッダー画像の横幅を100％にする」にチェックを入れて。これは任意だけど。

●一番上にある「公開」ボタンをクリック。

かずくん

出来たかな？お、出来てる。うれしい。

いちこさん

ちなみに推奨されているヘッダー画像のサイズは 2200 x 500 ピクセルよ。可能ならこのサイズで作ってね。

かずくん

他に作業は残ってる？

いちこさん

WordPress自動更新設定の確認をしてくれる？ここは確認だけね。
「AFFINGER5 管理」＞「その他」をクリックして。

下の方にある「管理画面」の中の「WordPressの自動更新を有効化する」にチェックが入っていないことを確認して。

かずくん

入っていないよ。だから何もしなくていいんだね。

いちこさん

うん。あと今回いろいろ設定したんだけど、作業は間違いないのに画面に変更が反映されないことがあるの。

かずくん

そんな事があるんだ。

いちこさん

画像を変更したのに、変わらなとかね。その時はブラウザの「更新」ボタンをクリックしてね。それでもダメだったらキーボードの「Ctrl」キーを押しながら「更新」ボタンをクリックして。これを「スーパーリロード」と呼ぶのよ。すごい名前ね。

かずくん

「スーパーリロード」してみたけど。何も変わらないね。

いちこさん

問題のあるときに実行してね。今回はこれで終わりよ。お疲れ様！

かずくん

以上？やっと終わった～！今回は長かったな～。お疲れ様！