「クリップブロク」というスマホ動画に特化した掲載形式
アメブロはスマホユーザーのブログ投稿に力を入れていますが、「クリップブログ」というスマホ動画の投稿を主軸に置いたブログ形式を用意しています。 投稿の結果は、PCからも閲覧可能な従来のアメーバブログの様式ですが、その特徴は記事タイトルの直下に「クリップ動画メイン」が挿入されることです。
その後には、普通に記事の本文が続きますが、第2の特徴は、クリップ動画メインを構成するカット単位の「クリップ動画サブ」を本文中に複数配置出来ることです。 サブ動画は無くても良いですが、メイン動画の細かい部分での注釈を入れたりできて、スマホ動画のブログ掲載としてはかなり便利な機能です。
以上が「クリップブログ」というスマホ動画に特化したブログ形式です。 以下は実際の動画入りで説明したスタブロページで、リファレンスとして参照ください。
「クリップブログ」のHTML構成は少しだけ特別
アメーバのスマホ専用アプリから、この「クリップブログ」を投稿した場合、下の様なHTMLになります。（上のスタブロページのHTMLを簡略化したものです）
「.skin-entryInner」は記事本文部分全体で、「記事タイトル」の直下に「クリップ動画メイン」が割込み、「#entryBody」の記事本文が続きます。 また、記事本文中に「クリップ動画サブ」が複数配置されています。
「クリップ動画メイン」「クリップ動画サブ」の構成を、普通のブログ中に埋め込んだのが「クリップブログ」です。
上のHTMLで、「クリップ動画メイン」は iframeを利用せずに配置されています。 一方、「クリップ動画サブ」の方は iframeを利用しています。 こうなった理由は判りませんが、iframeを利用しない構成は、本当はサイト制作の側からも好ましいのかも知れません。
「クリップブログ」のスマホ動画をポップアップさせる
前ページで通常のスマホ動画をフォバーでウインドウ内に拡大表示をさせましたが、クリップブログの「クリップ動画メイン」「クリップ動画サブ」とも、同様の拡大表示をさせる事にしました。 動画もクリックで拡大表示をさせたいのですが、残念ながらこれは「a要素」が絡んでいないので出来ません。 やはりマウスフォバーで拡大、ウインドウ外にマウスを待避させるめと縮小という操作になります。
下はスタブロの「クリップ動画メイン」をフォバーして拡大表示した状態です。 動画のコントロールにモニター全体の全画面表示ボタンがありますが、このスタイルでの拡大程度が画質的に妥当で、慣れると簡便だと思います。
スタイルの扱い方
● ページ上に掲載した「一般の画像」「YouTube動画」「スマホ動画」「クリップ動画」を対象として働きます。 クリックして画像一覧に導かれない画像、HTML編集で他のリンクをセットした画像や、アイコン・バナー・絵文字等の画像は対象としません。
● オプションを有効にすると、拡大対象の画像・動画に「青枠」を表示出来ます。
静止画の拡大表示
● 静止画は画像をクリックすると背景が暗転して拡大表示します。
● 暗転状態でブラウザウインドウを離れ、他のウインドウなどをクリックした場合、focusが移動して暗転が解除されます。 しかし、元ウインドウ内のクリックで暗転が復活します。
● 暗転を解除できるのは「アメブロヘッダー」をクリックした時だけです。
● 複数の画像を配した記事では、ライトボックスに拡大後「Tab」「Shift＋Tab」キーで全ての画像を続けて閲覧出来ます。 また「Alt」キーで暗転を一時解除できますが、暗転を完全に止めるのは「アメブロヘッダー」のクリックが必要です。
● 暗転状態でスクロールホイールを動かすと、下の画面がスクロールします。 これは好ましくない問題ですが、暗転中はむやみにスクロールしないことです。
● 1ページ内に複数記事を連続して表示している場合、暗転時に下方の他記事までスクロールさせると、拡大画像に他記事の画像が被さって表示されます。 1ページ1記事の場合はこれは生じません。 また、ページナビゲーション等のある旧スキンではそれが暗背景内に表示される事があります。
● 暗転背景の左上の「画像一覧」を押すと、「画像一覧」ページが開きます。
動画の拡大表示
● 記事中の「YouTube動画」「スマホ動画」「クリップ動画」は、マウスを乗せた状態でウインドウ内全体に拡大します。 マスウをウインドウ外へ待避すると、通常サイズに戻ります。
● 動画のフォバー時に拡大する動作は、デフォルトで有効です。 この動作を好まない場合は、関連するCodeの適用先を変更する事で無効に出来ます。
● Firefoxでは、動画拡大に関して以下の問題があります。
▪スマホ動画プレーヤーは、動画コントロール部のフォバーで拡大します。
▪クリップ動画サブは、一旦拡大を外すと拡大ができなくなります。
しかし、一旦画面外に出すとリセットされて拡大可能になります。
「Ameblo Lightbox」を利用するには
〔手順1〕
「Ameblo Lightbox」を利用するには、ブラウザ Chrome または Firefox に拡張機能「Stylus」が導入されている必要があります。
拡張機能「Stylus」の導入はそう難しくなく、手順は以下のリンクを参照ください。
「Stylus」はユーザースタイルシートを管理する優れた信頼できる拡張機能です。「Stylus」を導入すると、ここで紹介したアレンジスタイルに限らず、様々なサイトのページをカスタマイズする、ユーザーの投稿したスタイルが利用出来ます。 またユーザーは、自身が必要なアレンジスタイルを「Stylus」上で作成出来ます。
〔手順2〕
最新版の「Ameblo Lightbox ver. 2018.12.25」は、アレンジスタイルの投稿サイト「userstyles.org」の以下のページにアップロードしています。
userstyles.org の「Ameblo Lightbox」のページ
このリンク先を開くと、下の様なページが開かれます。
スタイルのインストールするには、上図のサンプル画像の右下の Install Style を押します。 この際に、無関係なアプリの「Download」「開始する」などの紛らわしいボタンが、同ページ上にあるので注意をしてください。
スタイルのインストールは一瞬で完了し、同時にアレンジが適用されます。 画像や動画を掲載した適当なアメブロページを開いて、アレンジの状態を確認してください。
オプションの変更
「Ameblo Lightbox ver. 2018.12.25」は、以下の 7Code構成です。
Code 1 Ameblo Lightbox メインコード
Code 2 YouTube動画プレーヤー 拡大表示オプション （有効）
Code 3 YouTube動画プレーヤー ADブロック （有効）
Code 4 スマホ動画プレーヤー 拡大表示オプション （有効）
Code 5 スマホ動画プレーヤー ボカシ背景を非表示 （有効）
Code 6 クリップ動画プレーヤー 拡大表示オプション （有効）
Code 7 対象画像 青枠表示オプション （無効）
● デフォルトは「Code 1」～「Code 6」が有効で、「Code 7」が無効です。
▪「Code 2」を無効にすると、「YourTube動画」が拡大表示しなくなります。
▪「Code 3」を無効にすると、「YourTube動画」ADブロックが解除されます。
▪「Code 4」を無効にすると、「スマホ動画」が拡大表示しなくなります。
▪「Code 5」を無効にすると、「スマホ動画」のボカシ背景が表示されます。
▪「Code 6」を無効にすると、「クリップ動画」が拡大表示しなくなります。
▪「Code 7」を有効にすると、拡大可能な画像・動画に「青枠」を表示します。
● オプションの変更手順
▪「Stylus」管理画面で「Ameblo Lightbox」の「スタイル名」の部分をクリックして「編集画面」を開きます。
▪「編集画面」には「Code 1」～「Code 7」の7個のコード編集枠が表示されます。
▪ それぞれのコード編集枠の下に「適用先」の設定枠があります。
この「適用先」の設定変更でその「Code」の有効・無効を変更出来ます。
▶ 「適用先」が「ドメイン上のURL」なら「有効」
▶ 「適用先」が「正規表現に一致する URL」なら「無効」
▪ 設定を変更したら、最後に「編集画面」の左上端の「保存」ボタンを押します。