ブログを始める決心がついたみなさん、こんにちは！ちゅう太です。
この記事ではテニススタディのサイトデザインを大公開します！
参考になるところは真似して、こだわりがあるところは自身でアレンジしてください！
こちらはAFFINGERの設定を含みます。
AFFINGERテーマ購入はこちらに詳しく紹介しています。
-
【大公開①】趣味で稼ぎたい君へ。テニスブログの実状と始め方！まずはこれを真似せよ！
続きを見る
プラグイン導入
記事やサイトデザインに取り掛かる前にプラグインを導入しましょう！
プラグインは便利機能のようなものですが、多く導入しすぎてもサイトが重たくなってしまうので、私が選りすぐったものを紹介します。
プラグイン一覧
現在有効化のプラグイン一覧です。
検索してインストール&導入してください。(導入方法は後で説明)
・Category Order and Taxonomy Terms Order
・Classic Editor(設定)
・Classic Widgets
・Head, Footer and Post Injections
・Optimize Database after Deleting Revisions(設定)
・SiteGuard WP Plugin
・Table of Contents Plus(設定)
・Yoast Duplicate Post
・クレジット削除
・Advanced Editor Tools(設定)
・Imsanity(設定)
・LiteSpeed Cache(設定)→後ででもOK
(設定)と書いてあるものは設定方法を紹介します。
最初は全く同じ設定でOK！
プラグイン導入方法
「外観」→「カスタマイズ」
「プラグイン」→「新規追加」
キーワードにプラグイン名を入れ、検索
出てきたプラグインの「今すぐインストール」を押す
※インストール後「有効」に文字が変わっていること確認
Classic Editor設定
同じ設定ところにチェックが入っていれば大丈夫です。
Optimize Database after Deleting Revisions設定
同じ設定ところにチェックが入っていれば大丈夫です。
Table of Contents Plus設定
同じ設定ところにチェックが入っていれば大丈夫です。
「基本設定」
「サイトマップ」
Advanced Editor Tools設定
同じ設定ところにチェックが入っていれば大丈夫です。
「旧エディター」
Imsanity設定
こちらは大きな画像のアップロードを伏防ぎ、リサイズしてくれるプラグインです。
画像は容量が大きくサイトのスピードダウンの原因となるので、好きなサイズにリサイズして高速化を図ります。
LiteSpeed Cache設定
こちらはmixhostサーバーオリジナルのサイトスピード高速化のプラグインです。
設定はやや複雑なので、ある程度記事を書いて、サイトが重たくなってきたなってタイミングで設定して大丈夫です。
設定方法はmixhost公式を参考にしてください。
記事の書き方
いよいよ記事の書き方の紹介です。
私の良く使っているタグも紹介していきます！
記事を書く前に - カテゴリー追加
書いた記事を整理するためのカテゴリーを作っておきましょう！
「投稿」→「カテゴリー」
カテゴリーごとに作成してください。
必要事項記入後、「新規カテゴリーを追加」で追加されます。
記事を書く
「投稿」→「新規追加」
記事のタイトルと本文を書いていきます！
サイドには設定メニューがあるので「カテゴリー」で記事の分類分けを行っておきましょう！
本文を書いていくときに定期的に「下書き保存」を押しておくと安心です。
また、「プレビュー」で実際にどのように表示されるか確認することができます。
全部書き終わったら「公開」を押して完了です。
アイキャッチ画像を作成して、設定すると集客効果が上がります！
アイキャッチ画像はこのように表示されます。
よく使うタグ・デザイン -画像挿入-
画像の挿入は簡単です。
「メディアを追加」
記事で使う画像をアップロードし、「投稿に挿入」
よく使うタグ・デザイン -会話ふきだし-
こちらの会話風のデザインです。
「タグ」→「会話ふきだし」→「会話1」
赤字の部分を記入。(文字の色は自由！)
よく使うタグ・デザイン -目次-
目次を入れたい場所に下記を入力するだけ
目次
[toc]
自動でタグ(h2タグ、h3タグなど)を読み取って目次にしてくれます。
よく使うタグ・デザイン -h? タグ-
hタグとは各章のタイトルのようなものです。
こちらを使うことで見やすい記事になります。
「テキスト」エディターに切り替え、下記コードを入力する
hタグ
<h2>ここにタイトル記入</h2>
<h3>ここにタイトル記入</h3>
各タグのデザインは後述する外観設定で変更可能！
よく使うタグ・デザイン -記事リンク-
ある程度記事数が増したら、他の関連記事をリンクさせましょう！
「タグ」→「記事一覧/カード」→「ブログカード」→好きなものを選ぶ。
id＝の後ろに記事IDを入力。
記事IDは投稿一覧から確認可能！
デザインは無限大 マニュアルを見よう！
AFFINGERのデザインは本当に無限大です！
その他のデザインは詳しくは契約時のメールでリンクがくるマニュアルを見てみよう！
サイトデザイン設定
サイト全体のデザインを設定します。
サイトの全体的なカラーを選択するところが多いですが、自分の好きなカラーで設定OKです！
最初に記事を書いてから設定した方がイメージしやすい場合は先に記事を書いてしまいましょう！
外観設定
「外観」→「カスタマイズ」
「全体カラー設定」
「ロゴ画像」
「サイト基本情報」
「ヘッダー画像」
「基本エリア設定」
「ヘッダー画像」
「フッター」
「メニューのカラー設定」
「各テキストとhタグ(見出し)」
「オプションカラー」→「会話風ふきだし」
「ウィジェット」
「ウィジェット」→「サイドバートップ」
「ウィジェット」→「トップページ上部ウィジェット」
「STINGERカスタムHTML」に下記コードを追加し完了！
赤字を自分仕様に編集してください！
赤字の（）内は説明文なので、編集後削除してください。
html <h4>新着記事(タイトル)</h4> [st-catgroup cat="0(カテゴリーID)" page="8" order="desc" orderby="id" child="on" slide="on" slides_to_show="4,3,1" slide_date="off" slide_more="ReadMore" slide_center="on"]
「ホームページ設定」
