アフィンガー

WING(AFFINGER5)のバージョンアップを知ってからアップロードまで。

更新日:

Q.WING(AFFINGER5)のバージョンアップって場所はどこでできるの❔買えるの❔

ダウンロードからアップロード、更に子テーマのインストール、かんたんなカスタマイズ(CSS含む)までやります。比較画像もあります。

AFFINGER PACK3(WING対応)

WING(AFFINGER5)修正版のダウンロード

step
1
STINGER STORE

最新版がダウンロードできるサイトは「STINGER STORE」です。

スライドのトップページ、かっこいいですよね!!

STINGER STORE トップページ(2018/8)

STINGER STORE トップページ(2018/8)

ストア内の購入ユーザー限定ページへ直接行きましょう。

step
2
購入ユーザー限定ページへ

アップデートは「購入ユーザー限定ページ」で情報を見るのです。

https://on-store.net/user_page/

ログインを要求されたと思います。

STINGER STORE 購入ユーザー限定ページ一 ログイン画面

STINGER STORE 購入ユーザー限定ページ一 ログイン画面

「ログインしてください」のログインをクリックしてください。

※ログイン画面で入力するメアドは、以前のAFFINGER MEMBERSサイト(黒ヘッダー、AFFINGER4時代まで。)とは違います!超注意!同じ人は問題ない!

※初期からのユーザーはSTINGER STOREには登録していない可能性もあります。その場合は新規登録となります。

※私はだぶって登録してしまいましたが、ちゃんと買えています。(汗)

このページに来てますか?

STINGER STOREの購入ユーザー限定ページ

STINGER STOREの購入ユーザー限定ページ

この部分の自分が使っているテーマの行をクリックしてください。

  • WING(AFFINGER5)購入ユーザー限定ページ
  • WING(AFFINGER5EX)購入ユーザー限定ページ(EX版、PACK3購入者はコチラ)
  • WING(STINGER PRO2)購入ユーザー限定ページ

ログイン場所は左カラムにありますが、あっちゃこっちゃ行かないほうがわかりやすいので、私は直接

https://on-store.net/user_page/

をブクマしているのです。

ここにいけばログインするだけ。

数日後の修正版が出た時も、現在はクッキーのおかげで直接アクセスできますね。

step
3
購入ユーザー限定ページでダウンロード

各々該当する「購入ユーザー」ページに来ていますか?

すぐに目に入る場所には「告知」「アップロード前の諸注意」が載っています。

※必読ですが、そのリンクは同じウィンドウで開くので、見るなら必ず別ウィンドウで開かないと、後で迷いますよ!!

ダウンロード場所はその下のボックスマークの横「承諾事項を了承の上、ダウンロードする」です。

AFFINGER(WING)ダウンロード場所

AFFINGER(WING)ダウンロード場所

ダウンロードできましたら、この記事内の

アップロードの部分へどうぞ。

ファイル名はいつも「affinger5.zip」です。

万が一に備え、ダウンロード前にフォルダ「affinger5 180808版」を作り、そこにDLしましょう。

とてもたまに小テーマがアップデートします。

こちらも必ず最新テーマを持っているか確認しましょう。

DLしたフォルダに「小テーマ(バージョン)」と書くといいですよ。

フォルダ内の整理法 紹介

フォルダ内の整理法 紹介

プラグインも外に出して専用フォルダを用意すると、別のサイトで使う時にすぐに分かります。

これでzipファイルがダンロードできました!!

アップロードの部分へ飛ぶ

この枠内の以下の情報は古くなっています。
回顧録としてご覧ください。

ログインは、下へスクロールしてください❕

WING ユーザーページ ログイン要求画面

WING ユーザーページ ログイン要求画面

左メニューに入っているログインからか、ウィジェットのログイン欄があります。

WING ユーザーログイン場所

WING ユーザーログイン場所

 

4.ログインすれば、「修正、変更内容、ダウンロードできる場所」の記事を見ることができます。

WING 修正版ダウンロード画面

WING 修正版ダウンロード画面

中ほどにある入力欄に↓「 」の数字のパスワードを入力します。あの30文字の乱数のパスワードではありません。

『dZ』で始まる「WING(AFFINGER5EX)パスワード」の場合は、テーマ購入後にDLしたテキストファイル「必ずお読みください」の一番下に書いてあります。

※「●「WING(AFFINGER5WX)」固有のパスワード」の部分です❗

※2018年5月の大型アップデートの場合、新・子テーマのダウンロードは、すぐ下にあります❗

緑色のダウンロードボタンをクリックしてダウンロードします。

※ポップアップがブロックされるOSあります。そのままでOKです。

WING 修正版 ダウンロード画面

WING 修正版 ダウンロード画面

ダウンロードできました❕

次はアップロードして、入れ替えましょう❕

AFFINGER PACK3(WING対応)

 

WordPressへのアップロード

AFFINGER PACK3(WING対応)

自分のWordPressに前のWINGをアップロードしてある場合は、そのまま修正版をアップロード(インストール)することはできません。WordPressの仕様で、同名のファイルテーマはアップロードできないのです。

その場合はFTPツールでアップロードするなり、一時的に他のテーマを適用しておくなりするのですが、WINGには簡易に入れ替えができるプラグイン「専用テーマアップローダー」が提供されています。

AFFINGER5から5のアップデートの場合は、「専用テーマアップローダー」をインストールして有効化しておけば、そのまま同名のテーマがインストール、有効化できます。

上のほうで紹介した「テーマをダウンロードしたページ」の下のほうに、ダウンロード場所があります。

テーマアップローダー5(WING版)ダウンロード場所

テーマアップローダー5(WING版)ダウンロード場所

とても便利です。

(以前のバージョンのテーマは別の名前にリネームされて残っています。)

※この記事の例では別の名前のテーマ「AFFINGER4」からの変更ですので、「専用テーマアップローダー」は使用しません。普通にインストールします。

step
1
WordPressへWING(AFFINGER5)をアップロードする

自分の管理画面のこのページで「新規追加」ボタンをクリックします。

WING 子テーマのアップロード

WING 子テーマのアップロード

さきほどダウンロードした修正版のファイルを選択して、左下の「開く」をクリックします。

WING アップロード

WING アップロード

「今すぐインストール」をクリックします。

WING アップロード

WING アップロード

インストールの完了画面です。

WING アップロード

WING アップロード

「テーマのベージへ戻る」をクリックすると、テーマのトップに戻ります。左下にWINGがインストールされています。

かっこいい!!

WING アップロード

WING アップロード

AFFINGER PACK3(WING対応)

 

WING 子テーマのアップロード

この例は「一度DLしたけれどULしないうちに、修正版が出たため、初めてWING版の親&子テーマをアップドードして」います。
既にカスタマイズした子テーマを適用済みなら、子テーマのUPは必要ありません。
(親テーマはアップロードするだけ、有効化はしません。既に小テーマが有効化されていますよ!)

step
1
WordPressへWING(AFFINGER5)の子テーマをアップロードする

WordPressは、親テーマと子テーマをアップロードして、子テーマを有効化して、そちらで管理、カスタマイズしていきます。

親テーマはおうおうにして修正、アップデート版が出ますが、小テーマを利用していれば、入れ替えるだけです。(親テーマのファイルを触っていない前提です。)Google Analyticsのコードも再入力などしなくても大丈夫です。ただし必ず確認しましょう。

次は子テーマをアップロードします。

再び上の「新規追加」ボタンからアップロードします。

WING 子テーマのアップロード

WING 子テーマのアップロード

子テーマは修正版が出ていなかったので、一番最初に購入したときのファイルにある子テーマをアップロードします。

WING 子テーマのファイル選択

WING 子テーマのファイル選択

WING 子テーマのファイル選択

WING 子テーマのファイル選択

このように親テーマをインストールしてから、子テーマをインストールします。

WING 子テーマのインストール

WING 子テーマのインストール

これがインストール終了後の「WING-AFFINER5」と「WING-AFFINER5-Child」がある状態です。

WordPress 外観>テーマ画面

WordPress 外観>テーマ画面

そして有効化します。(子テーマを有効化します。)

WINGを有効化

WING(子テーマ)を有効化

有効化後にすぐやること

  • パーマリンク設定の更新
  • キャッシュの削除
  • プラグイン「TinyMCE Advanced」の設定を確認

step
1
パーマリンク設定の更新

やることは、「『変更を保存』をクリック」することです。

AMP化しているサイトだけと思いこんでいましたが、総合マニュアルにも書いてあります。

パーマリンクの設定を更新する

パーマリンクの設定を更新する

管理を保存

管理を保存

step
2
キャッシュの削除

キャッシュの削除は使っているブラウザの管理設定画面からやります。

ショートカットキーを知っていれば、そちらでやります。

Googleアナリティクス、Googleタグマネージャーはそのまま引き継がれていました。
※AFFINGERでは「プラグイン「AFFINGERタグ管理マネージャー」《AFFINGER AffiliateRun》をインストールすればクリックの測定は簡単です。大幅に時短できます❕

step
3
プラグイン「TinyMCE Advanced」の設定を確認する

「TinyMCE Advanced」を利用してビジュアルエディタでの入力を効率化している人も多いでしょう。

AFFINGERでもビジュアルエディタから、こだわりの書式設定を簡単にショートコード入力することができます。

しかしテーマを入れ直した場合など、設定は一度見直しておきましょう。

ビジュアルエディタの「スタイル」がどこかへ行っている場合があるのです。

※「スタイル」は、テキストを赤い字にしたりアニメーション、王冠などのアイコン付与、ボックスやレイアウトのショートコードが挿入できるボタンです。

WordPress管理画面
>設定
>TinyMCE Advanced
>使用しないボタンからスタイルをドラッグ&好きな位置にドロップする。

AFFINGER PACK3(WING対応)

 

手早く格好をつける

1.ヘッダーを変える

手っ取り早く自分仕様にするには、やはりヘッダーでしょう。

1.ひとまず「外観」>「カスタマイズ」>「ヘッダー画像」で、デフォルト画像を「非表示」にして「公開」します。

一番速い:テキストだけ。

二番目に速い:2をやってから時間があるときにやる。自分で撮った画像を上げる。画像サイズの推奨は2200×500。WING AFFINGER5はあとから切り抜くことも可能。(神経を使う必要はないのが助かります。)

三番目に速い:少し手間かけます。スマホサイズの個性的なフォントを使用したサイト名の画像をパソコンに入っているアプリで作る。(※背景はサイトのヘッダーの背景色と同じ色に。)

四番目に速い:グラフィックソフトが扱えるなら、2200×500のヘッダーを作成。個性的なフォントに画像を合成する。ださくなる可能性は高いけれど、個性は簡単に出る。

もっと速い:スキルのある人に依頼する。サイトのコンセプトをしっかり伝えることが大切です。デザインにコンセプトあり❕たとえばモノを売らないフリーマーケット【ココナラ】

けっこう速い:「ロゴの自動作成サービス」を利用する。ロゴジェネレーターといいます。たとえばhttps://www.designevo.com/。SNS拡散に協力する必要があります。

けっこう速いというのは意味を含んでいます。どれも海外デザイナーが考えたかっこいいロゴですので、悩むから時間がかかるんです。逆に個性も出しにくいような……

2.メニューを設定する

「外観」>「メニュー」でメニューを作成して、設定します。

設定していない場合は……

WING トップ画面 トップのアコーディオンメニューをクリック後
メニュー未設定の場合
WING トップ画面 メニューをクリックしたとき

左がトップ画面(デフォルトのヘッダー画像を消した後)、

右がアコーディオンメニュー(左上の「三」)をクリックした状態です。

にゅるっと移動するのがかっこいいですよね。

ところが今はメニューを未設定ですので、左上にうっすら固定ページの「自己紹介」と見えているだけです。

ということで、「外観」>「メニュー」でメニューを作成して、設定します。

メニュー未設定 メニュー設定後
(ウィジェットでも設定)
メニューをクリックしたとき メニュー 設定後

メニュー設定は、固定ページ(自己紹介)とカテゴリーページへは一般的な方法となります。

「外観」>「メニュー」の固定ページ、カテゴリー、それぞれ□にチェックをいれて「メニューに追加」ボタンを押していき、最後に右上の「メニューを追加」を押して保存します。

 

この例では「トップページへのリンク」と「検索窓」をプラスしています。

こちらは「外観」>「ウィジェット」で設定します。

「アコーディオンメニュー内上に表示」にカスタムHTMLと検索を入れて、このように表示させています。

メニュー内にトップページリンクと検索窓を追加

メニュー内にトップページリンクと検索窓を追加

こちらには「追加」などの保存作業はありません。

タグで記事を分類しているサイトであれば、カスタムHTMLを利用したタグでの紹介がいいでしょうが、以上で一般的なサイトならスマホでもパソコンページに近い操作性になると思います。

なおパソコン版ではこのようになっています。

スマホ版メニュー パソコン版メニュー
WING メニュー設定後(スマホ) WING トップページ(パソコン版)

※サイトを立ち上げたばかりであれば、サイトの概要、サイトマップ、問い合わせ先を加えれば、手早くメニューが埋められます。

3.サイドバーの項目(記事名など)の簡単な調整用 CSSを入れる。

※CSSは 外観>カスタマイズ>追加CSS に入れます❕

ウィング
デフォルト
サイドバー
ウィング
調整後
サイドバー
WINGサイドバー(デフォルト) WING サイドバー(調整後)

記事のタイトルなどがきちきちに詰まっていますので、間隔を空けます。

#side aside ul li {
list-style-type: circle;
margin: 10px;
padding: 0px;
}

頭の◯がいらなければ、circleをnoneにします。

下線を消すCSSはこちらです。

#side aside ul li a{
text-decoration: none;
}

これを入れて支障が出ても責任は取れません❕

AFFINGER4との見た目の違い(トップ)

サイドバーのカスタマイズをやったので前後しますが、100%デフォルトのトップ画面を確認してみます。

WINGはヘッダーの色が濃いほうです。

あらかじめデフォルトのトップ画像が入っていると、変更後が想像できますね。

ウィング
トップ画面
アフィンガー4
トップ画面
WING トップ画面 アフィンガー4 トップ画面

 

さてAffinger4からWING-AFFINER5への見た目の変更は───

1.見出しのフォントが小さめ
2.カテゴリーの表記がない

でしょうか。

他のテーマでもうすうす感じていたことなので、この表示方法は嬉しいです❕

こうして初回からすでに時短を発見しました。

他のテーマもいいのですが、小さな気付きが得られる嬉しい事実が、「AFFINGERを使うということ」です。

AFFINGER PACK3(WING対応)

 

なお、スマホのヘッダーはデフォルトだとグラデーションがはっきりしていません。

色変更するとこうなります。

WING トップ画面(デフォルト) WING トップ画面(カスタマイズ後)
WING トップ画面 WING トップ画面 グラデーション色変更

パソコンを同じようにしてみるとこうなります。

WING トップ画面(PC・デフォルト) WING トップ画面(PC・カスタマイズ後)
WING トップページ(パソコン版) WING ヘッダーとメニュー カスタマイズ後(PC)

※なお、AFFINGER管理>デザイン>サイト全体の設定>✅オジリナルカスタマイザーを使用するにチェックを入れ、青を選択しています。これをしないと、他の部分の色が別のカラー設定に合った指定になってしまいます。そしてこのCSSはグラデーション横です。

/*ヘッダー 背景色 水色〜青色*
/#headbox-bg {
background: url(st-themecss-loader.php), linear-gradient(to right, aqua, blue);
}

/*メニュー 背景色 水色〜青色*/
/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
#st-menuwide
{background: url(st-themecss-loader.php), linear-gradient(to left, aqua, blue);
}
/*-- media Queries PC ここまで --*/
}

これを入れて支障が出ても責任は取れません❕

※グラデーションの方向はAFFINGER管理>デザイン>サイト全体の設定のデザインパターンで変更可能。もちろんこのCSS(left)ではだめです。

※この後、カラー設定を色を赤に変えましたので、よかったら最後まで変化を見ていってください❕

3.ヘッダー画像

ヘッダーはもう自分の画像が一番早くて著作権も問題がありません。

デスクトップを写した画像

kirokushitoku.net

予め2200px×799pxで切り抜きました。

デスクトップの画像(2200 × 799)

kirokushitoku.net

が、推奨されていた高さは500pxだったので、このようになりました。これが自分のデスクですから全然OKです。

トップページのスクショ

トップページのスクショ

※799のままでもいけますが、おすすめには従います。

スマホだとこの表示です。

WING トップ画面(ヘッダー画像なし) WING トップ画面(ヘッダー画像あり)
WING トップ画面(スマホ・グラデーション色変更・ヘッダー画像あり) トップページ(スマホ・グラデーション色変更・ヘッダー画像あり)

※ヘッダー画像をトップページだけでなく、投稿記事でも表示したいときには、設定が必要です❕

AFFINGER管理
>ヘッダー
>表示設定
>下層ページにもヘッダー画像を表示する

にチェックを入れて、「保存」(右上)、または「save」(左下)をクリックします。

 

ヘッダが青系と赤系の場合の違い

ここまでの説明画像は青系のヘッダーでした。

でも新しいヘッダーの画像は赤とピンクゴールドをポイントにしているため、変更します。

赤系にします。

パソコン版はこちらです。

トップページを赤系に変更(PC)

トップページを赤系に変更(PC)

スマホはこちらです。

トップページ 赤(スマホ) メニュー 赤(スマホ)
トップページ 赤(スマホ) メニュー 赤(スマホ)

上のCSSの「アクア(aqua) ブルー(blue)」を「#E5BFBA #FF0000(#FF0000はredでも可)」に変えてあります。

※AFFINGER管理>デザイン>サイト全体の設定>✅オジリナルカスタマイザーを使用するにチェックを入れ、赤系のどれかを選択しています❕しないとメニューの枠色や別の部分が青のままです。

 

最終的には「ピンク〜赤の横グラデ 線なし」にしました。

WING ヘッダー ピンク〜赤の横グラデ 線なし

WING ヘッダー ピンク〜赤の横グラデ 線なし

※線を消したい場合のコードはこちらです。

これを入れて支障が出ても責任は取れません❕

/*メニューの色をなくす 上下、右は別*/
@media only screen and (min-width: 960px){
#st-menuwide {
border: none;
}

header .smanone ul.menu li, header nav.st5 ul.menu li, header #st-menuwide div.menu li, header #st-menuwide nav.menu li {
border: none;
}
}

※上にも書きましたが、オリジナルカスタマイザーで赤にそろえるのが一番かっこいいと思います。

 

 

引き続き、時間をみて体験していきます❗

頭がよくなった気がします❕

AFFINGER PACK3(WING対応)

-アフィンガー

Copyright© 記録しとく.NET , 2020 All Rights Reserved.