ここまでで以下の段階まで完了しているかと思います。
・サーバー契約
・WordPressインストール
・パーマリンク設定
・SSL化 (URLがhttps～)
・テーマの適用
・必要なプラグインのインストール
このページで解説している初期設定と、次のページで解説しているGoogleアナリティクス、サーチコンソールの登録が完了すればブログの立ち上げは完了となりますので、一気に行ってしまいましょう。このページで解説していることも全体で15～30分程度で完了します。
こちらは「ぬこ式」テーマを適用した場合の解説になりますので、他のテーマを使用している方は参考程度にご覧ください。
右カラムを整理
画面上部にある「カスタマイズ」をクリック
「ウィジェット」→「サイドバースクロール追従」へ進み、「メタ情報」を削除します。
キャッチフレーズを修正
画面上部にある「カスタマイズ」をクリック
「サイト基本情報」からキャッチフレーズを修正します。デフォルトの状態だと「Just another WordPress site」となっています。
Cocoon設定をまとめて行う
「ぬこ式」テーマは「Cocoon(コクーン)」というWordPress用の無料テーマをベースに主にデザイン部分を調整したものになります。このCocoonには必要な設定をまとめて行えるCocoon設定という項目が最初からありますので、こちらを利用します。
以下、最低限の変更点となりますので、適宜自分のブログに合わせて調整してください。
＊変更が完了したら「変更をまとめて保存」を忘れずに押してください。
全体
サイトフォントの文字サイズを16px、モバイルサイトフォントを16pxもしくは14pxに変更。文字のサイズになりますが、このあたりは好みで変更してください。
ヘッダー
ヘッダー部分にキャッチフレーズを表示したくない場合は、キャッチフレーズの配置の項目で「表示しない」を選択します。またタイトル部分をオリジナルのロゴ画像に変更したい場合は「ヘッダーロゴ」で指定します。
OGP
OGPはTwitter等でURL貼られた際に表示される画像です。「ホームイメージ」ではデフォルトのCocoonの画像になっているため、画像を作りアップロードしておきましょう。
画像サイズですが、1280px×720px程度で作成しておけば問題はありません。
インデックス
「並び順」の項目ですが、更新日順(更新)にしておくといいでしょう。一覧表示した時に、更新した記事が先頭に来ます。
投稿
投稿というのが一般的な記事の部分に当たります。トップページやお問い合わせページ、プライバシーポリシーと言ったほとんど変更しないような部分は固定ページで作成するのが一般的です。
「コメント設定」の項目で、記事にコメントが不要な場合はこちらのチェックを外します。
また「パンくずリスト配置」をメインカラムトップに変更します。
固定ページ
こちらも「コメント設定」のチェックはお好みで変更してください。基本的に固定ページにはコメントはあまり載せないほうがいいかとは思いますがデザインや考え方次第です。
目次
目次はよほどの理由が無い限りは載せましょう。「目次表示の深さ」をH3見出しまでに変更。「目次ナンバーの表示」を数字詳細(ex1.1.1)に変更します。「ぬこ式テーマ」はこの設定に合わせてデザインしているので、変更する場合は適宜cssを調整してください。
SNSシェアボタン
あまり沢山載せても仕方ないので、Twitter/Facebook/Lineの3つで構わないでしょう。アフィリエイトブログにする場合は離脱を防ぐ意味で、このシェアボタンを使用しないという考え方もあります。
SNSフォロー
こちらは無くてもいいでしょう。
画像
「アイキャッチの自動設定」にチェックを入れます。
モバイル
「モバイルメニュー」はボタンを表示しないに変更
サイト全体の色の調整
ヘッダーの色や見出しの色をお好みで調整します。
まずはこちらのページをそのままコピーしてください。
続いて、ページ上部の「+新規」→「投稿」の順に進みます。投稿＝記事のことで、新規記事を作成する場合はここからアクセスします。なおWordPressにログインしていないと上部のバーは表示されません。
①テスト記事で後ほど削除するのでタイトルは適当に入力します。
②さきほどコピーしたものをそのまま貼りつけます。
③「公開」をクリックすると記事の投稿が完了します。
④「投稿を表示」で実際の記事を見てみます。
さて、ここから実際にCSS(スタイルシート)を弄っていきます。スタイルシートは簡単に言えばデザインを構成するためのもので、本来はstyle.cssというファイルを直接弄りますが、ブラウザ上から追加CSSを当てることで簡単にデザインの修正が可能です。
①Google Chromeの場合、「Ctrl+shift+i」のショートカット、もしくはブラウザの適当な場所で右クリック →「検証」でこの画面を出すことが出来ます。上部のElemetsをクリックするとソースが表示されます。
②ソース部分をクリックすると、その部分に適用されているCSSを表示することができます。また直接ここを変更すると、実際に変更した場合のデザインを見ることができます。あくまで変更した場合の結果が表示されるだけであり、ここを編集するだけでは適用されません。
③この部分の幅はドラッグで変更することができ、各画面幅でのデザインを確認することができます。
④画面上部のツールバー → カスタマイズ → 追加CSSで開くことができます。こちらにCSSを記入すると、スタイルが実際に適用されます。
では今回はヘッダー部分の色を修正してみます。ソース部分をクリックして選択すると、実際に対応している部分が青く表示されます。これを見ていくと、今回修正したいヘッダー部分ですが、
.navi, div#header-container-inbackground-color: #8c898a;}
となっていることが分かります。この#8c898aを修正します。
赤で囲った□の部分をクリックするとカラーパレットが表示され、ここで色を変更すると、左側の記事で変更した場合の様子が直接確認できます。今回は以下のようにコードを変更するとします。
.navi, div#header-container-inbackground-color: #4586a5;}
このコードを左側の追加CSSに記入します。
入力が完了したら「公開」をクリックします。
実際にブログをもう一度見てみると、CSSが適用されているのが確認できるかと思います。
このような形で各部分を修正していきます。配布テーマは順次修正を行っていますが、今後はもう少し簡単にデザイン修正ができるようにして配布を行う予定です。