「カバー設定パネル」のデザインを変更しました
「編集画面」の下部に「カバー画像」の「カバー設定パネル」を配置しています。
ver.38 は最初のアレンジで、下の様なデザインでしたが少し不満がありました。
◎ サムネイルのオリジナルサイズ 100×100pxを、90×90pxで表示している。
◎「選択」ボタン・「選択を取消」ボタンの配置とデザイン。
◎ サムネイルが無い(未設定)の場合も、大きなパネルサイズが表示される。
以上の点を改善しました。 下は「カバー設定パネル」の通常の状態で、小さなスイッチとなっています。 これは変更ありません。
マウスポインターを乗せるとパネルが拡張します。 下はサムネイル画像が未設定の状態です。
「画像を選択」のボタンを押すと「カバー画像の設定ダイアログ」が表示されます。 カバー画像を設定してから再び「カバー設定パネル」を開くと、下の様にサムネイルが入った設定パネルが表示されます。
上の2つの場合はどちらもボタンの位置が低く、操作がし易くなっています。 また、サムネイル画像は 100×100px のサイズをフルに使っています。
「カバー画像の設定ダイアログ」のプレビューを修正
ve.38 で、ダイアログ右側のプレビューの背景色を設定していませんでした。 そのため、プレビューにダイアログ全体の背景がそのまま表示されています。
しかし良く考えると、実際の「フォローフィード」や「外部SNSサイトのシェア」の表示は白背景(アレンジしたページや一部の暗背景スキンは例外)になります。 特に「暗背景」のプレビューは誤解を招くので、これを改善しました。
下は「明背景」時のプレビューです。
下は「暗背景」時のプレビューで、実際の表示に近似した背景色にしています。
投稿画像が無い場合 の表示
月の最初など、月間の投稿画像が無い場合、「カバー画像の設定ダイアログ」は下の様な少し特別な表示になります。
上記の右側のプレビューで、実際の「無画像」のサムネイル部の表示に合せ、画像の範囲に「白背景」を設定しました。
Ameblo Writer (Compact) ver.39 をアップロードしました
更新した「Ameblo Writer」「Ameblo Writer compact」はアップロード済です。 既にこれらのスタイルを利用されている場合は、「Stylus」の管理画面でスタイル名欄の「 」アイコンをクリックして、更新する事が出来ます。
Ameblo Writer (Compact) ver.39 の Code構成は以下の形です。
Code 1 基本CSS ✅
Code 2 編集枠オプション フォント種 メイリオ ✅
Code 3 編集枠オプション フォント種 MS Pゴシック
Code 4 編集枠オプション フォントサイズ 14px
Code 5 編集枠オプション フォントサイズ 16px ✅
Code 6 コンパクト右パレットオプション( ✅ Compact版のみ)
Code 7 拡大サムネイルオプション ✅
Code 8 ウインドウ配色オプション 背景色 ブルーグレー ✅
Code 9 ウインドウ配色オプション 背景色 ダークグリーン
Code 10 ウインドウ配色オプション 背景色 グラン・ブルー
Code 11 ウインドウ配色オプション 背景色 ブラウン
Code 12 ウインドウ配色オプション パーツ反転色
Code 13 枠線オプション ライトグレー ✅
Code 14 枠線オプション グリーン
Code 15 枠線オプション ダークグレー
Code 16 スクロールバー配色オプション ✅
Code 17 タグ編集エディタ用 拡張設定 ✅
Code 18 編集枠幅フリーサイズオプション
Code 19 バルーンヘルプ非表示オプション ✅
Code 20 編集終了 送信完了の表示 ✅
Code 21 編集枠 縦拡張オプション ✅
Code 22 文字列・画像 の選択反転色オプション ✅
オプションの設定方法
上記 ✅ のCodeを「有効」、他のCodeを「無効」の設定で配布しています。
オプションの選択は、各Codeの適用先の以下の変更で行います。
▪Codeの適用先を「次で始まるURL」に設定すると「有効」
▪Codeの適用先を「URL」に設定すると「無効」
となります。 Codeの適用先を変え、スタイルを「保存」することで、選択が確定して編集画面の表示に変更が反映します。
「Ameblo Writer (Compact)」を利用するには
「Ameblo Writer (Compact)」は、ブラウザ拡張機能「Stylus」を導入することで、利用できる様になります。
❶ 拡張機能「Stylus」の導入
使用されているブラウザに対応する拡張機能「Stylus」を導入してください。 このスタイルは、Chrome / Edge / Firefox の各ブラウザ用の「Stylus」で使用可能です。 既に「Stylus」を利用されている場合は、この ❶の操作は不要です。
● 拡張機能「Stylus」の入手先
「Stylus」の導入や扱い方については、以下の記事群を参考にしてください。
❷「Ameblo Writer」「Ameblo Writer Compact」の入手
「Stylus」の導入後に、以下のリンク先のページでスタイルを入手してください。
● Ameblo Writer の入手先
● Ameblo Writer Compact の入手先
下は上記リンク先の「UserStyles.world」の画面です。
▪ サンプル画像下の install ボタンを押します。
▪ インストールボタンを押すと下の様な「Stylus」の編集画面が表示されます。
▪ 画面左上の インストール {S} をもう一度押すと、インストールが完了します。
▪「インストールされています」と表示されたら、この画面を閉じます。
▪「Ameblo Writer」「Ameblo Writer Compact」の両版を同時に「Stylus」にインストールし、切り替えて使用する事が出来ます。 但し、両版を同時に有効にすると表示が崩れるので、どちらか一方をONにする様にしてください。(記事が壊れる心配はありません)
「Ameblo Writer(Compact)」のバージョン更新
「Stylus」にインストールした「Ameblo Writer(Compact)」は、導入後は簡単にバージョン更新ができます。
「Stylus」の管理画面でこのスタイルの登録を探し、その行の「 」のボタンを押すだけです。 また、「全スタイルの更新をチェック」を押して、登録したスタイルの全ての更新を纏めて済ますことも可能です。