「Amaba Pick」は、アメーバブログ上でのアフィリエイトの基本機能です。 アフィリエイトの設定は全て「Pick」を通じて行い、「ピックカード」はその機能の中軸で最前線です。
ただ、ピックカードのデザインは、ちょっと「？」な部分があります。 一番気になるのは、枠線が無く記事本文とカード表示が区別し難い点です。 カードのHTML改変の禁止は、価格表記などの改ざんに対する配慮を含むとするなら、ブログ本文との境界の不明瞭に対する配慮が無いのは、片手落ちの気がします。
まあ私は、ページのデザインの点で落ち着かないので、先ず枠線の問題が気になりましたが、どうでしょう。 また、「ピックカード」はデザインを選べますが、普通はこれを縦に並べるしかありません。 そこでタイル配置の案が浮かびました。 スマホでの参照は効果は少ないと思いますが、PC参照の場合のタイル配置は、物によっては効果的なレイアウトになると思います。
「Pick Organizer ⭐」は、こういったピックカードのレイアウト上の弱点を補うためのツールです。 利用規則に抵触しない様に、カード自体に改変を行わない配慮をしています。
ver. 0.7以降に対応 2021.12.14 更新
「Pick Organizer ⭐」の起動と終了
● 通常表示の編集画面で「Shift+F10」を押すと「Pick Organizer ⭐」が起動します。 また、IMEの漢字変換がOFFの場合は「Ctrl+F10」も有効です。
▪ツールが起動すると、編集枠の上部に操作パネルが表示されます。
▪このツールが起動中に「HTML表示」の編集画面を開いた場合は、ツールのパネルが閉じますが、「通常表示」に戻るとパネルが再び表示されます。
● このツールが起動中に「Shift+F10」を押すとツールが終了します。
▪ツールが終了すると、操作パネルが閉じます。
▪操作パネルの設定は保存され、次にブラウザを開いた時にも再現されます。
▪ツールを終了せずに記事の「投稿」「下書き保存」などを行った場合は、その段階でのレイアウトや枠線の状態で記事が投稿・保存されます。
枠線の追加と削除
「Pick Organizer ⭐」の最初の起動時は、下の様な操作パネルの表示です。
主要なショートカットが纏められているので、覚えるまでは参考にしてください。
ツールが起動中は、カードに「枠線の追加」「枠線の削除」が可能になります。
▪追加される枠線は パネル上の ❶枠線色と ❷枠線幅 の設定に従います。
▪枠線が実際に設定されるのは、それぞれのカードを置いたトレーの要素です。
● ❶枠線色 を「Click」すると編集画面の「カラーパレット」が表示されます。 カラーパレットの操作は通常と同じで、選択した色は ❶ に表示されます。
● ❷枠線幅 のスピナー操作で、枠線幅を「0 ～ 5px」の間で指定できます。
▪ パネル上の指定は、次に変更するまで最後の指定が保持されます。 指定は、ブラウザを終了しても、次回にツールを起動した時に再現されます。
● ピックカードを「Shift+Click」すると、❶ ❷ の指定の枠線が追加されます。
● 指定した枠線は、もう一度「Shift+Click」すると「削除」されます。
下は、色と幅を設定してカードに枠線を追加し、次にそれを削除する様子です。
▪パネルとカードが同じ設定の場合は「Click」すると「枠線削除」となり、異なる設定の場合は「Click」でパネルの設定がカードの枠線に適用されます。
▪枠線幅「0」で「Shift+Click」すると、多数のカードの枠線を早く削除できます。
カードの「左寄せ・中央寄せ・右寄せ」
ツールが起動すると、ピックカードの「左寄せ」「中央寄せ」「右寄せ」の配置がコントロールできる様になります。
● ピックカードを「Ctrl+Click」するたびに、「➔ 中央 ➔ 右 ➔ 左➔ 中央」の順にカードの配置が変化します。
▪ この配置の変化は、カードが記事中に置かれた通常の場合です。 カードがタイル表示エリアの内部にある場合は、エリア外と異なる配置変化になります。
タイル表示
「タイル表示」は、複数のピックカードを纏めてタイル状に表示する機能です。
タイル表示エリアの生成
▪「タイル表示エリア」の起点を最初に指定します。 次に、生成した「エリア」に複数のカードを順に追加します。
▪記事中に作れるエリアは1個だけです。
▪記事中にカードを含むエリアがない場合は、任意の空白行をエリアの起点に指定したり、別の場所にエリアを作り直したりできます。
● 任意の空白行上で「Ctrl+Click」すると、行の左端に「青線」が表示されます。 この青線は、タイル表示エリアの範囲の起点です。
● エリアの起点が作られると、任意のカードを「Alt+Click」して、エリアに移動する事ができます。 この操作で、複数のカードをエリアに加えます。
「エリア」にカードが追加されると、操作パネルに ❸エリア背景色と ❹濃度 および ➎配置（エリア内のタイル配置仕様）のコントロールが表示されます。
下は、エリアの起点を指定し、そこに複数のカードを追加していく様子です。
カードの追加と取り出し
● 任意のカードを「Alt+Click」する事で、エリア外のカードをエリアに追加したり、反対にエリア内のカードをエリア外に取り出す事ができます。
▪エリア外に出したカードは、エリアの直後に置かれます。
▪エリアには追加した順にカードが並びますが、任意のカードをエリア外に出せるので、これを利用してカードの順番を調整できます。
▪カードのデザインは色々と選択できますが、どの様なデザインのカードでもタイル表示エリアに追加できます。
▪エリア内のカードもデザインを変更（Edit）できます。 サイズが変更されると、エリア内のカード配置や行位置が変わる場合があります。
▪エリア内では、各行内の最も高さのあるカードが、その行の高さを決定します。 このため、高さが近いカードを並べるとレイアウトが纏まります。
「リンクを追加・編集」のボタン
横長サイズのカードデザイン下部の「別ショップのリンクを追加・編集」ボタンは、エリア内では非表示になります。 これはカード配置を正確に再現させるためです。
このボタンは、エリア外にカードを移動すると再び表示されて機能します。
タイル表示エリアの背景色
「タイル表示エリア」の生成時は、エリアに背景色の指定がなく透明です。 エリアに背景色を指定することで、枠線がなくてもカードの境界を明示できます。 また、背景色を指定した上でカードに枠線を表示する事も、もちろん可能です。
● ❸エリア背景色 を「Click」すると、編集画面の「カラーパレット」が表示されます。 パレットで選択した色が ❸ に表示されると同時に、タイル表示エリアに背景色として設定されます。
▪カードのデサイン選択で、タイル表示は様々な印象のレイアウトが作れます。 エリアに背景色を設定すると、更にバリエーションを増やすことができます。
▪一旦、「エリア背景色」の指定をすると、「背景色」を白にできますが透明には戻せません。 背景を透明に戻すには、エリアを作り直す必要があります。
エリア背景色の濃度
エリア背景色の色の濃さを微細に調節できます。 特にカラーパレットで「淡い」色を設定するのは難しいのですが、この機能で簡単にパステル配色を設定できます。
● ❹濃度 の「▼」「▲」を押すと、背景色を「0.1～1.0（初期値）～10」の間で調節できます。
▪パレットで設定された色を初期値として色が生成されるので、初期値にパレットで淡い色を指定すると、大変にデリケートな淡色を設定する事が出来ます。
下は、このコントロールでエリア背景色を調整しているところです。
エリア背景色とカードのデザイン
▪行内のタイルの高さを統一するため、枠線を指定するとトレーの背景色に「白」が指定されます。 枠線を削除するとトレーの背景色が透明になり、カードは実際の高さで表示されます。 この違いは、レイアウトに変化を付けるために利用できます。
▪枠線幅「0」または、エリア背景色と同色の「枠線色」の枠線を追加すると、カードの「角のR」を減らせます。 下は、この効果を拡大して示したものです。
エリア内のタイル配置仕様
「タイル表示エリア」のカードの配置は、タイル配置仕様に従ってコントロールされます。
➎配置 の4個のボタンは、「左寄せ」「均等配置」「中央寄せ」「右寄せ」をエリア内の各行に適用します。 下は、このボタンでカード配置が変化する様子です。
▪エリア内であっても、カードを「Ctrl+Click」することで「枠線追加・削除」や「左寄せ・中央寄せ・右寄せ」が指定されます。 ただしエリア内では、タイル表示の仕様に配置が強く支配されるため、それに個々の設定が複合した配置になります。
▪複合した配置は、時にはとても理解し難いものです。 しかし、組み合わせ方によっては、➎配置 の指定だけでは不可能な配置が可能です。 複合した配置は操作を混乱させる場合があるので、➎ のボタンを押すと毎回、カード個別の「寄せ」の指定がリセットされます。（寄せの指定なしになります）
▪行内のカード幅の総和がエリアの表示幅を超えると、行末尾のカードは次行に送られ、逆に余裕が出来ると先頭のカードが上の行に送られます。
設定のメモ機能
● 操作パネルの「枠線色」「枠線幅」の設定は自動的に保持されます。 ツールやブラウザを閉じても、次回のツール起動時に、前回の最後の設定が再現されます。
●「エリア背景色」は、記事中にタイル表示エリアがある場合は、その配色の設定をツール起動時に取り込みます。 これによって、再編集で意図せずにエリア背景色が変化する事を防いでいます。 記事中にタイル表示エリアが無い場合、エリア生成時の「エリア背景色」の初期値は色指定が無い「透明」です。
操作パネルの設定で、ユーザーが頻繁に使用するディスプレイスタイルを登録して、必要な時に呼び出せる機能が、「設定のメモ」機能です。
登録できる内容以下です。
▪枠線色
▪枠線幅
▪エリア背景色
▪配置（タイル表示エリアの配置仕様）
● ❻デザイン登録 を「Click」すると、押した時点の上記の設定が登録されます。
▪設定を登録すると、それまで登録していた設定は上書きされてなくなります。
▪登録はツールやブラウザを閉じても保持され、いつでもツールに呼び出せます。
● ➐登録デザインを適用 を「Click」すると、登録した設定を呼び出します。
▪「枠線色」「枠線幅」はパネル上に設定が再現されるだけで、「Shift+Click」の操作で初めて実際にカードに適用されます。
▪「エリア背景色」は、パネルに設定が再現されると同時に、記事上に「タイル表示エリア」があれば、登録された背景色が適用されます。
▪「配置」は、記事上に「タイル表示エリア」があれば、登録された配置仕様がエリアに設定されます。 エリアが無い場合は、何も生じません。
操作のヘルプ表示
ツールに慣れない間は、操作パネル上の表示や、操作ボタンにマウスポインターが乗ると表示されるヘルプは、役にたつと思います。
ツールのインストール時の初期値は「ヘルプ表示あり」で、操作パネル上に幾つかのヘルプが表示されます。 但し、慣れて来るとヘルプ表示は邪魔になるので、非表示に出来るボタンを設けています。
● 操作パネル左端の ❽ Ⓗボタン を「Click」すると、ダイアログが表示されます。ダイアログで「Yes」を押すごとに、ヘルプの表示/非表示 が切り替わります。
「Pick Organizer ⭐」 を使用するには
「Pick Organizer ⭐」は、Chrome/Edge/Firefox の拡張機能「Tampermonkey」にインストールして利用できます。
具体的なツールのインストール手順とコードは、最新の制作記事を参照ください。
このツールは「Ameba Pick 利用規約」に抵触する事がない様に、ピックカードのHTMLコードには全く変更を加えない設計ですが、あくまでも自己責任の元での使用という事をご理解願います。
このツールの最新バージョンは、以下のリンクリストから探せます。
