その他

WordPressテーマ「AFFINGER6」の外観設定をして見た目をカッコ良くする

どうも、じゃぶじゃぶ(@jbjbgame)です。

前回の記事でAFFINGER6の基本設定を行いました。

今回は外観設定をしてデザインをカッコ良く仕上げたいと思います。

AFFINGER6導入と設定の流れ

今回の記事シリーズの流れです。

step
1
テーマの購入と導入

step
2
基本設定

step
3
外観設定 ←今ここ!!

step
4
CocoonからAFFINGER6への移行

外観設定

外観設定はWordPress管理画面から「ダッシュボード→外観→カスタマイズから設定」から設定化できます。

全体カラーの設定

全体カラーの設定

  • キーカラー:#252525
  • メインカラー:#44433d
  • サブカラー:#dddddd
  • テキストカラー:#ffffff

ロゴ画像 / サイトのタイトルの設定

ロゴ画像 / サイトのタイトルの設定

  • ロゴ画像の指定
  • フッターロゴ画像の指定
  • ロゴの最大の高さ(px):100
  • スマホロゴ画像の指定

サイト基本情報

サイト基本情報⇒サイトアイコン

ファビコン(favicon)に設定する画像を選択します。

ヘッダー画像の設定

記事スライドショーの背景画像を指定。

背景画像の設定

背景画像の設定

  • ロゴ画像の指定
  • プリセット:デフォルト
  • 画像サイズ:元サイズ
  • 背景画像の繰り返し:チェックを入れる
  • ページと一緒にスクロール:チェックを入れる

サイドバーの設定

基本エリア⇒サイドバー

サイドバーの設定

  • サイトの文字色:#ffffff
  • サイドバーウィジェットエリアの背景色:#ffffff

ヘッダーエリアの設定

基本エリア⇒ヘッダーエリア

ヘッダーラインは画像を設定したり、単色やグラデーションを設定することが可能です。

ヘッダーエリアの設定

  • ヘッダーに画像を設定する
    • ヘッダーエリアに画像を設定する
  • ヘッダーにグラデーションを設定する
    • ラインの高さ(px):5px
    • 背景色:#222428
    • 背景色(グラデーション):595959
    • ヘッダー背景の横幅を100%にする:チェックを入れる
    • グラデーションを横向き:チェックを入れる

フッターエリアの設定

基本エリア⇒フッターエリア

フッターエリアの背景画像を指定。

記事タイトルの設定

見出しタグ(hx) / テキスト ⇒ 記事タイトル

記事タイトルの設定

  • 文字色:#ffffff
  • 背景色:#252525
  • 背景色(グラデーション部分):#c1c1c1
  • タイトルの基本スタイル:吹き出しデザインに変更(※要背景色)

table(表)の設定

オプション(その他)→table(表)

table(表)の設定

  • 偶数行のセルの色:#e2e2e2
  • 横一列目(tr)及びヘッダセル(th)の背景色:#252525
  • 横一列目(tr)及びヘッダセル(th)の文字色:#ffffff

ヘッダー下エリアにメッセージを表示させる

まず、「外観→ウィジェット」と移動。

「00_STINGERカスタムHTML」を選択し、「ヘッダー画像エリア上のウィジェット」を選んで「ウィジェットを追加」をクリック。

以下のコードを追記し「保存」をクリック。

<p class="st-horizontal animated animated huto">
<i class="st-svg st-svg-exclamation-circle"></i>
現在テーマをCocoonからAFFINGER6に絶賛移行中!!
<i class="st-svg st-svg-angle-double-right"></i>
</p>

さらに「外観→カスタマイズ→基本エリア設定→ヘッダー画像エリア上 / 下ヴィジェット」と遷移してください。

画像エリア上 / 下ヴィジェットの設定

  • ヘッダーエリア上の背景色:#ffffff
  • ヘッダーエリア上の文字色:#dd9933

デザインの設定が完了!!

ついに!デザインの設定がおおかた完了しました。

色々調べて試して、試行錯誤したので大変でしたが、自分でも納得のいくものができたと思っています。

テーマを設定した直後のものと比較するとこんな感じです。

・before

・after

ただ、これでもまだ終わりではなりません。Cocoonに書いた記事で修正しなければならない箇所がいくつもあります。

これは手作業で直していく必要があるので骨が折れそうです。😱

次回はCocoonからAFFINGER6へ移行するにあたって、修正するポイントをご紹介したいと思います。

よく読まれている記事

1

どうも、じゃぶじゃぶ(@jbjbgame)です。 「モンスターハンターライズ:サンブレイク」のストーリーの序盤と終盤で使える、オススメな太刀装備をご紹介します。 前回はモンハンライズのVer3.0装備 ...

2

どうも、じゃぶじゃぶ(@jbjbgame)です。 スプラトゥーン3では新機能として遊んだバトルのリプレイ再生が可能な「メモリープレーヤー」という機能が追加されています。 自分の立ち回りを見返すだけでな ...

3

どうも、じゃぶじゃぶ(@jbjbgame)です。 「モンスターハンターライズ:サンブレイク」でマカ錬金をするため必要素材を集めます。サンブレイクでは風神龍イブシマキヒコの周回が素材集めに良さそうなので ...

4

どうも、じゃぶじゃぶ(@jbjbgame)です。 ついに!6月30日に「モンスターハンターライズ:サンライズ」が発売されましたぁ!!マスターランクが追加され、さらに手強いモンスターとの狩猟が楽しめるよ ...

5

どうも、じゃぶじゃぶ(@jbjbgame)です。 DLC第4弾で追加された「古代狩り」でリスポーンする古代のモブは、ルーン文字の組み合わせによって出現するモブが異なる仕様になっています。 今回は、古代 ...

-その他

error: Content is protected !!