カテゴリー
アフィンガー

AffingerEX バージョンアップ 久しぶりだ 20201022

今は「外観」>「テーマ」を見れば、自動更新のお知らせが入っています❗️

これは「サーバー更新」(自分の管理画面で更新情報を得、更新が可能)です。ただし「更新通知パスワード」が入っていないといけません。このパスワードは定期的に変更になります。

外観>テーマに更新情報がある。
外観>テーマに更新情報がある。
「更新してください」ですぐに更新ができる
「更新してください」ですぐに更新ができる

バージョンアップ時の注意

なお、EX版(AFFINGER5 / STINGER PRO2)購入ユーザー限定ページ

EX版(AFFINGER5 / STINGER PRO2)購入ユーザー限定ページ

を見て、更新内容をチェックすること。

ページが長いですが、「目次」の「最新版ダウンロード」の下の「1.AFFINGER5EX版」でページ内リンクに移動。

AffingerEXのダウンロードの場所
AffingerEXのダウンロードの場所

今回は久しぶりのバージョンアップです。こんな注意書きを見つけました。テーマアップローダーは不必要だそうです。私のは昔のWING対応「STINGER系テーマアップデーター5」で、本当に放置してました!!

プラグインのテーマアップローダーが変わったという案内
プラグインのテーマアップローダーが変わったという案内

バージョンアップ後の注意

もろもろの情報を削除するためだと思うのですが、「設定」>「パーマリンク設定」よりパーマリンクを更新する。

バージョンアップ後はパーマリンクを更新する。
バージョンアップ後はパーマリンクを更新する。

カテゴリー
アフィンガー

久しぶりにAFFINGERを使用する

AFFINGERのバージョンアップ アップデートのURL

まず、ver20180417より管理画面からの更新機能が追加されています。やっていないならやりましょう。管理画面をひらけば安定版の更新通知が来ているというわけです。では「テーマの自動更新希望」を有効にしていきます。

まず更新通知のパスワードをゲットします。

購入ユーザー限定ページ
> 管理画面からのアップデート
> 更新通知パスワード

EX版(AFFINGER5 / STINGER PRO2)購入ユーザー限定ページ

上のパスワードを

AFFINGER 5 管理 > その他 > テーマのアップデート更新通知(β)>

上の「更新通知パスワードの入力ウィンドウにコピペ > 横にチェックをいれて、保存をクリック。

「テーマの自動更新希望」を有効にした後、

外観
>テーマ
>WING AFFINGER 5のサムネイルに「今すぐ更新」

が表示されていたら、通知ゲットです。クリックします。

https://affinger5.com/manual/post-5252/

これで終わりではなく、大事なパーマリンク(記事URL)の更新をします。

「設定」>「パーマリンク設定」>「変更を保存」をクリック。

場合によっては自分のブラウザのキャッシュの削除を行う。

※注1

AFFINGERはグーテンベルグに対応している。ver20190801βから

WordPress5.0からエディタ(記事の入力画面)がGutenbergに変わりました。これまでのエディタはクラシックエディタと呼ばれるようになっています。このクラシックエディタのままで入力を続けたい人(使用テーマが非対応であったり、使いやすさの点でこれまでのものがいい人)は、WordPress発行のプラグインであるクラシックエディタをインストールして使っていました。

AFFINGERはGutenbergには専用プラグインで対応しています。現在のところはEX版先行、β版です。この「Gutenbergプラグイン」は下記よりDLします。

購入ユーザー限定ページ>

EX版(AFFINGER5 / STINGER PRO2)購入ユーザー限定ページ

プラグイン>新規追加

でアップロード。有効にする前に、クラシックエディタは停止すること。それからGutenbergプラグインを有効にすること。

補足 AFFINGER WINGのバージョンアップ情報などのチェック

かならず、以前のアップデート情報を確認しましょう。どんな機能、どんなプラグインが追加されたかはページの下部に載っています。いつも驚くべき革新があります。またインターネット上の変化に伴う機能追加もされています。例えば外部リンクへ別窓で遷移する記述をしていた場合、利用環境によって「 target=”_blank”」に「rel=”noopener”」がついていないと遷移しないというものです。「 target=”_blank”」は広告主サイトに案内する(遷移)リンクに使われますが、遷移できなかったらユーザーのの役に全くたちません。また、広告収入も期待できません。利用環境というのは、アンドロイドスマホとアプリ案件に関係あるようです。iPhoneの私でも、ツイッターから飛んだ先のアプリのその先には遷移できませんでした。取りこぼしになるのはよく分かります……

何が変更されたのか、チェックしておきます。ログインURLは

ログイン

メールアドレスとパスワードが必要。(AFFINGER WINGはわくわく感が他のテーマとは全く違います!テンションが上がります。)次に購入ユーザー限定ページへ✅チェックしにいきます。

購入ユーザー限定ページ一覧

同時に、子テーマの最新バージョンもチェックすること。子テーマをバージョンアップするときは、それまでの追加CSSのバックアップを忘れないこと。(メモ帳にコピペしておけばいい。)

AFFINGER 買ったものを探すには

自分が何を買ったのか分からなくなっていたら「購入履歴」を✅チェックしにいく。

ログイン

私は[sc name=”AFFINGER PACK3 WING”]です。

購入ユーザー限定ページで自分の購入テーマを探す >

この時、ver20190809βが出てました。β版だった場合、セキュリティやWordPress、インターネットの仕組み上の緊急性がない場合、私はスルーします。安定版が出たときにバージョンアップでいいかと思ってます。

β版・安定版について

B版・安定版ってどうすればいいの?

新しいバージョンは最初は「β版」で発表されます。不具合報告、修正が出きったところで、安定版となります。するとこの安定版が自動更新機能で有効となる機能です。

自動更新通知が有効化は処理速度に関係する

自動更新通知が有効化されていると、処理速度が低下することがあります。その場合は「更新通知パスワード」の横のチェックを外します。また通知をチェックするときには、パスワードを再確認の上、チェックをいれて通知情報をゲットすればいいのかな、ということかと。

自動更新とバックアップ
自動更新は「親テーマ」が対象です。親テーマを触っていないこと、バックアップが取れていることに注意する必要があります。私は親テーマを一切触っていないので、自動更新します。バックアップはプラグインで取ってあります。

また、記事を追加するごとにデータを自分のパソコンにエクスポートしています。
さっき書いた記事がど飛んでしまった時に本当に助かります。
ツール>エクスポート
でxmlファイルがDLがされます。
XMLファイルは、Macではテキストエディットで開きます。Windowsはメモ帳で開きます。「すべてのコンテンツ」にチェックを入れていると、大量のデータとなります。飛んだ記事にあるキーワードを思い出し、コマンド+fで検索すると、記事データが回収できます。アナログな方法ですが、一部だけなら楽です。

カテゴリー
アフィンガー

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

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

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

[sc name=”AFFINGER PACK3 WING”]

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

[st-step step_no=”1″]STINGER STORE[/st-step]

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

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

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

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

[st-step step_no=”2″]購入ユーザー限定ページへ[/st-step]

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

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/

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

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

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

[st-step step_no=”3″]購入ユーザー限定ページでダウンロード[/st-step]

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

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

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

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

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 修正版 ダウンロード画面

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

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

[sc name=”AFFINGER PACK3 WING”]

 

WordPressへのアップロード

[sc name=”AFFINGER PACK3 WING”]

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

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

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

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

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

とても便利です。

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

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

[st-step step_no=”1″]WordPressへWING(AFFINGER5)をアップロードする[/st-step]

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

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

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

WING アップロード
WING アップロード

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

WING アップロード
WING アップロード

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

WING アップロード
WING アップロード

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

かっこいい!!

WING アップロード
WING アップロード

[sc name=”AFFINGER PACK3 WING”]

 

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

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

[st-step step_no=”1″]WordPressへWING(AFFINGER5)の子テーマをアップロードする[/st-step]

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

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

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

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

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

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

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

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

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

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

WordPress 外観>テーマ画面
WordPress 外観>テーマ画面

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

WINGを有効化
WING(子テーマ)を有効化

有効化後にすぐやること

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

[st-step step_no=”1″]パーマリンク設定の更新[/st-step]

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

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

パーマリンクの設定を更新する
パーマリンクの設定を更新する
管理を保存
管理を保存

[st-step step_no=”2″]キャッシュの削除[/st-step]

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

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

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

[st-step step_no=”3″]プラグイン「TinyMCE Advanced」の設定を確認する[/st-step]

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

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

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

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

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

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

[sc name=”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を使うということ」です。

[sc name=”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;
}
}

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

 

 

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

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

[sc name=”AFFINGER PACK3 WING”]

カテゴリー
アフィンガー

AFFINGER4の後継テーマ・WING 購入の手順と方法

AFFINGERに新テーマが出た❕この情報を何で知りましたか❔管理画面のAFFINGER4管理トップのTwitterですか❔

私もTwitterです。しかし一度サイトに飛んでみたものの……やはり……(*_*)時間を取らないとならなさそうでした。

はっきりいうと、商品や買い方のことが分からないんです❕

この記事は、AFFINGER4ユーザーのWING購入の体験談となります。

確認事項

・既にAFFINGER4を持っている。

・AFFINGER MEMBERS CLUB(購入会員サイト)に登録が済んでいる。(※購入の後、ダウンロード前でも登録可能。承認時間かかる場合あり)

・STINGER STOREに登録が済んでいる。(※購入の途中で登録可能)

・支払いは銀行振込、クレジットカード、PayPal(割引あり!)

◯AFFINGER MEMBERS CLUBはこのサイトです❕

AFFINGER4 会員専用サイト トップ
AFFINGER4 会員専用サイト トップ

◯STINGER STOREはこのサイトです❕

STINGER STORE トップページ
STINGER STORE トップページ

女性のヘッダーは無印、男性のヘッダーがEX、風景がSTINGER版。

[sc name=”AFFINGER PACK3 WING”]

では購入方法を追ってみます❕商品は体当たりで無印→EXにバージョンアップです❕😂

 

1.パスワードを購入する。

STINGER STOREのこのページへ行きます。

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

STINGER STOREでのWINGの販売はこのページです❕

STINGER STOREでのWINGの販売ページ

kirokushitoku.net

このページの3分の2を過ぎたあたりに、

「WING(AFFINGER5EX版)」のパスの購入場所があります。

こういう場所❕

WING パスの購入場所

kirokushitoku.net

なお、WING AFFINGER5のEX版ではなく、無印がいい、タグマネがついてるだけでいい、自分はもともとAFFINGER EXユーザーだし。という方は、トップページにいってから各々必要な商品ページを確認します。

 

「ショッピングカートに入れる」をクリックします。

ショッピングカート画面
ショッピングカート画面

注文画面へ進む >>をクリックします。

あなたはSTINGER STOREで買い物したことはありますか?ありませんか?

WING 購入ログイン画面
WING 購入ログイン画面

私はついつい右側の「ログインして購入する」に「AFFINGER MEMBERS CLUB(黒ヘッダーにライオンのサイトです)」のログインメアドとパスワードかと思いましたが、購入できません。

よく考えたら「STINGER STORE」では買い物したことなかったかもしれません。

……ということで会員登録する。をクリックします。

※なお「AFFINGER MEMBERS CLUB」のログインメアドでは登録できません。

STINGER STORE ユーザー登録
STINGER STORE ユーザー登録

 

2.パスワード代金を支払う。

登録がすむと、支払い方法選択となります。

WINGの支払い方法選択
WINGの支払い方法選択

ここはクレジットカードかペイパルが便利です。

ペイパルには割引がありましたよ❕

1画面飛ばしてますが、このように500円割引が適用されていたんです。

WINGをpaypalで支払うと500円割引となる
WINGをpaypalで支払うと500円割引となる

このあとリダイクトが入るのですが、慌てないように。

 

3.ダウンロードの方法

この画面に遷移します。

WING 注文完了画面
WING 注文完了画面

「PayPal及びクレジット決済の方は購入履歴からすぐにダウンロードできます」とありますので、購入履歴をクリック❕

※登録メアドに届いている「商品ダウンロードの御案内」のURLからでもOK

購入履歴からダウンロードする
購入履歴からダウンロードする

ごちゃごちゃにならないよう、AFFINGER WINGのパスワードというフォルダを作ってみます。

WING パスワードを保存する
WING パスワードを保存する

保存後開くとテキストファイルが開きます❗

WINGを購入するパスワード
WINGを購入するパスワード

ここにURLとパスワードがありますので、コピペします。

 

4.保護ページを閲覧する

購入したテキストファイルにのっているURLを開きます。

リンク先のサイトは黒いヘッダーの「AFFINGER MEMBERS CLUB」です。

WING ダウンロードのパスワード入力画面
WING ダウンロードのパスワード入力画面

購入したテキストファイルにのっているパスワードを入力して記事を見ます。

 

新WordPressテーマと付録・特典をダウンロードする。

記事の中ほどのココに、閲覧のために入れたパスワードと同じパスワードを入れます。

WING ダウンロード
WING ダウンロード

SUMITをクリックすると、ダウンロードできるようになります。

WING ダウンロード
WING ダウンロード

※あとでバグ修正によるバージョンアップが入るはずですので、ワケワカメに備えて、ダウンロードするフォルダに日付を入れました。

WING(AFFINGER4EX版)のフォルダを作成
WING(AFFINGER4EX版)のフォルダを作成

wing_◯◯◯_dlをすぐに解凍し(通常はダブルクリック)、ファイル内の「必ずお読みください.txt」を読んでおきます❕

インストール方法、テーマを適応後の必須設定など、知らない&忘れていることも多いので、時間を取る必要がありますね。

また、「WING(AFFINGER5EX版)購入ユーザー限定ページ」は「STINGER STORE」であることも覚えたほうが良さそうです。

更に、「WING(AFFINGER5EX)」固有のパスワードも載ってます!!

記事閲覧とかのパスワードと同じ多数のアルファベットです、似てますけど違います!!

※このパスワードが書かれたテキストは、うっかりコピペで切り取ってしまうのに備えて、私は複製をとっておきます。

 

 

さてここまでWINGWING言ってきましたが、「WordPressテーマ」フォルダーを開いたら、

affinger5って書いてあった❕❕

ひっくり返りそうになりました(゜_゜)……

WINGが新しいテーマの名前なんだ!かっこいい!と思い込んでいたのです。

WINGは販売名だったのでしょうか。

 

でも、同じファイルに子テーマも一緒にありますね。これはありがたい❕

 

最後になりましたが、その他に入っていたファイルを見ていきましょうか。

クレジット削除プラグイン

これまでのものと違うのかどうか分かりませんが、要チェック!

そしてインストールってことですね。

特典・すごいもくじ

限定特典・すごくもくじはプラグインです。

「すごいもくじについて.txt」をクリックして確認します。

プラグインのzipファイル自体はここにありますが、マニュアルのURLとパスワードが書いてあるんですよ。

※ここでもまさかに備えて、複製をとっておきます。

ひとまずダウンロード完了しました。

お疲れ様でした!!!!

 

[sc name=”AFFINGER PACK3 WING”]
 

改めて確認事項

◯この2つはログインメアド、パスワードは別。
・AFFINGER 会員サイト(黒ヘッダー)
・STINGER STORE(水色ヘッダー)
・WINGマニュアル(灰色ヘッダー)

改めて確認事項

◯WINGを買うための記事閲覧パスワード、ダウンロードパスワードは同じ。
ファイル名:wing_af5ex_pass_new_dl
テキストファイル名:商品ダウンロードのご案内
紹介文:WING(AFFINGER5EX版)アップデートユーザー用ダウンロードページ
URL名:https://on-store.net/stinger/アルファベット11文字/

改めて確認事項

◯買ったWINGの内容(WINGは販売名、商品名はAFFINGER5なんだという理解で……😌)
ファイル名:wing_af5ex_dl
内容1.WordPressテーマ
内容2.クレジット削除プラグイン
内容3.すごいもくじプラグイン
テキストファイル名:必ずお読みください。
・Ex独自機能のURLと閲覧パスワード
・インストール方など初期マニュアルのURL3つ
・総合マニュアルのURLとパスワード
http://affinger5.com/manual/(灰色のヘッダー❕驚いて月まで行きそうになった🌓)

WING マニュアルトップページ
WING マニュアルトップページ

 

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

面白い❕

カテゴリー
アフィンガー

AFFINGER4 引用もどきを自分仕様のCSSにしたら画像エラーが出た

AFFINGER4の親テーマのCSSを見ると、「引用もどき」というCSSがあります。これは「引用ではないが、引用風に見せたい」部分に使えます。

引用した文章

引用もどきを使って引用ぽい文章を表示

この「inyoumodoki」を「.inyoumodoki-me」などとして好みの色で利用したくなって、こう指定してみました。真っ白にして中央揃えです。

背景色を変更した引用もどき。背景色を変更した引用もどき。背景色を変更した引用もどき。背景色を変更した引用もどき。

文章ならマージンを上下に50pxという設定をしたほうが良さそうです。引用もどきオリジナルバージョンは、実際には商品画像に利用しています。

商品紹介をしっかりしたい場合にはこれでは全然ダメです。念のため。

ところが───

デベロッパーツールのエラー表示

エラーが出てしまうのです。確認すると background-image: url(images/quote.png)の quote.png の部分でした。

デフォルトなら普通に読める部分が、自分で勝手につくったから読めないのか、“は必要ないのだから、画像は無いよってことにすればいいと考えて、検索しました。

そして background-image: none; とすることで解消しました。私が変更した部分だけ見えるようにしておきます。

引用もどきの画像エラーを解消するCSS

このCSSの設定にあたり、こちらのサイトを参考にしました。
参考リンク
CSSの背景設定の正しい書き方

[sc name=”AFFINGER PACK3 WING”]

カテゴリー
アフィンガー

AFFINGER ボタン

小文字

ドット線
黄マーカー
赤マーカー

参照リンク

参考
必須
写真に枠線

ポラロイド風

フリーボックスのタイトル(全角15文字)

フリーボックスの本文
黄色ボックス
グレーボックス
カードスタイル
カードスタイルB
引用風
olタグを囲む数字ボックス
ulタグを囲む数字ボックス
ulタグを囲む均等横並び

widht100%リセット

テーブル横スクロールボックス
テーブル中央配置
装飾なしテーブル

まとめ