どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレス(WordPress)テンプレートの１つ、STINGER8ではある程度の知識が必要な「CSSコード」や「HTMLコード」使ったカスタマイズをしなくても、テンプレート内にある機能を使用してブログデザインの変更が可能です。
ブログやwebサイトの顔ともいえる「ヘッダー」部分や、投稿記事の閲覧数アップ、ブログの滞在率にも大きく影響する「サイドバー」エリアは集客の重要な要です。
できるだけ早い段階でデフォルトの状態から自分流にカスタムしておくのが好ましいので、「ワードプレス×STINGER8」導入時は最優先で設定するようにしましょう。
テンプレート機能だけでカスタマイズできるものをまとめましたので、１つ１つご紹介していきたいと思います。
カスタマイズ方法と使える機能
まずはSTINGER8のテンプレート機能を使ってカスタマイズをする為、ワードプレスの管理画面左メニューから「外観」⇒『カスタマイズ』をクリックします。
ダッシュボードの「サイトをカスタマイズ」からでも編集できます。
編集画面に移動するので、ここで以下の赤枠で囲った項目のカスタマイズを行うことができます。
上記の項目の中から使いたい機能をカスタマイズしていきます。
カスタマイズ中は右側に編集中の内容がリアルタイムでプレビューされるので、変更を確認しながら内容を調整することも可能です。
サイトの基本情報を編集
サイトの基本情報では「サイトのタイトル」「キャッチフレーズ」「サイトアイコン」の編集ができます。
サイトのタイトルとキャッチフレーズは、ワードプレスの一般設定の方で入力しているものがすでに設定されていますが、こちらからでも変更することができます。
サイトアイコンは一般的には「ファビコン」と言われていて、「画像を選択」ボタンから画像をアップロードして設定すると、自サイトのタブの左側にアイコン画像が表示されるようになります。
上記画像のマークはデフォルトで設定されているものになります。
また、スマホでサイトのショートカットを作成した時にもファビコンが表示されます。
ファビコン画像は正方形で、幅・高さともに512px以上である必要があります。
サイトを検索した際にファビコンがあると覚えてもらいやすいので、サイトの内容にあったものを設定しておきましょう。
色の編集
色の項目ではサイト全体の背景色を任意の色に編集することができます。
「色を選択」をクリックすると上記赤枠内の色彩から色を指定するか、色コード「#ffffff(白)、#ffff00(黄)、#0000ff(青)」など、直接入力して変更することも可能です。
「デフォルト」ボタンで初期状態に戻すことができます。
ヘッダー画像の編集
ヘッダー画像はサイトの印象に一番影響を与えるメインとなる画像で、サイト訪問者が最初に目にする部分です。
STINGER8で推奨されているヘッダーサイズは「1060px × 300px」となっています。
「新規画像を追加」から好きな画像をアップロードでき、「画像を非表示」を選択するとヘッダー画像なしに設定できます。
特に決まった画像がまだない場合は、そのままにしておくとデフォルトのSTINGERが表示されてしまうので、とりあえず画像が決まるまでは非表示にしておきましょう。
また、ヘッダー画像を複数用意しておくことで、ヘッダーをランダムに表示させることも可能です。
背景画像の編集
背景画像ではサイト全体の背景を、指定した画像に変更することができます。
「画像を選択」から好きな画像をアップロードした後、「プリセット」で表示方法を変更することもでき、インパクトのあるサイトにしたい方は背景色を変えるよりもオススメです。
ただし、画像によっては見づらいものもあるので、背景に画像を使用する場合は注意しておきましょう。
メニューの編集
メニューは「固定ページ」「投稿ページ」「カテゴリ」などのコンテンツを項目として追加し、ナビゲーションメニューとしてヘッダーやフッターに表示させることができます。
特にヘッダー部分のナビゲーションメニューは、サイト訪問者の目に止まりやすいので記事のアクセスアップに繋がります。
一般的には「まとめ記事」「サイトの主力記事」「お問い合わせフォーム」「サイトマップ」「プロフィール」などがメニューとして設定されています。
メニューを編集するには、『メニューを追加』をクリックして「新規メニュー名」を入力後、『メニューを作成』をクリックします。
新規メニュー名は複数作成した時に判別する為の名前なので、ブログやサイトに表示されることはありません。
メニュー作成後は以下の番号順に従って作業を進めていきましょう。
| ①「項目を追加」をクリックします。 ②表示されている項目からメニューに追加したいものをクリックします。 ③追加したメニューの並び替えや不要なメニューは「×」をクリックで削除します。 ④「項目を追加」をクリックします。 ⑤「表示位置」「メニュー設定」の必要箇所にチェックします。 |
「このメニューに新しいトップレベルページを自動的に追加」にチェックを入れると、今後作成した固定ページが自動的にこのメニューに追加されるようになります。
ウィジェットの編集
ウィジェットとはブログやサイトのサイドバーに、コンテンツなどを表示させる機能のことです。
ここでカスタマイズできるウィジェットは以下の３つになります。
「サイドバートップ」はサイドバーの一番上に表示されるコンテンツエリアです。
「サイドバーウィジェット」は、トップ以外のサイドバーエリアに表示されるコンテンツのことです。
「スクロール広告用」はサイドバーの下でコンテンツに追尾するボックスエリアです。
このボックスエリアではGoogleアドセンスを表示させることは禁止で、パソコン以外の端末では非表示となっている部分になります。
この中でサイドバートップにだけ、デフォルトの状態でいくつかウィジェットが追加されています。
上記のウィジェットで「最新の投稿」は記事タイトルのURLが表示されますが、他にもアイキャッチ画像有りでサイドバーに最新記事が表示されているので、このウィジェットは必要ないかと思います。
また、「メタ情報」で表示されているのは「サイト管理」や「ログイン情報」になるので、サイト閲覧者にとって必要性がない為、このウィジェットも必要ないでしょう。
代わりに「ウィジェットを追加」ボタンをクリックして「テキスト」を追加し、そこにプロフィールやブログランキング、広告などを設置した方が効果的です。
固定フロントページの編集
固定フロントページでは、サイトのトップページ(ホーム)を最新の投稿にするか、固定ページにするかを選択できます。
サイトのコンテンツが少ないうちは、「最新の投稿」をフロントページにしておくのがベターです。
記事数がある程度増えた段階で固定ページを作成して、色んなページにアクセスしてもえるように構築していきましょう。
追加CSSの編集
追加CSSではテキスト内にCSSコードを入力することで、外観やレイアウトをコードでカスタマイズできるようになります。
ここに入力したCSSコードは、テーマのコードとは独立したCSSが各テーマ毎に個別で保存されます。
コードの数が少ない分には問題ないと思いますが、長くブログやサイトを運営していると必然的にCSSでの編集も多くなる為、コードの管理も大変になってきます。
できるだけ１箇所にまとめて入力した方が好ましいので、基本CSSの編集は「STINGER8 Child: スタイルシート (style.css)」で行うようにしましょう。
「STINGER8」カスタマイズまとめ
CSSコードでのカスタマイズなら詳細な設定変更もできますが、ワードプレスを導入して日が浅いうちはいきなりCSSを使っていくのは難しいものです。
そんな時に便利なテンプレート機能があれば、CSSを使用しなくてもブログやサイトのデザインを色々とカスタマイズすることができます。
ただし、カスタマイズに夢中になりすぎて記事の更新がストップしてしまっては本末転倒なので、重要性の高いものを一通り編集し終わったら、記事作成に切り替えてコンテンツを追加していきましょう。
