アフィンガー5 ワードプレス

【ブログの始め方】#9~好きなデザインにしたい~

2020年7月18日

<デザインの設定>

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」キーを押しながら「更新」ボタンをクリックして。これを「スーパーリロード」と呼ぶのよ。すごい名前ね。
かずくん
「スーパーリロード」してみたけど。何も変わらないね。
いちこさん
問題のあるときに実行してね。今回はこれで終わりよ。お疲れ様!
かずくん
以上?やっと終わった~!今回は長かったな~。お疲れ様!
もっと見る?
【まとめ】ブログの始め方★初心者のかずくんがブログを開設するまで

いちこさんは、かずくんにブログの始め方を上手く教えることが出来るのでしょうか?

-アフィンガー5, ワードプレス
-,

© 2021 すべての初心者たちへ<オールビギナーズ>