ブログ編集画面でもアレンジした「リブログカード」を表示 / Ameblo Writer

アレンジしたリブログカードを編集画面上でも再現する

アメブロの編集画面は擬似的にWYSIWYGを実現しています。 本格的なDTPアプリは、ルビの配置をWebブラウザの数倍の精度で調整したり出来、それに比して「擬似的」と言ってます。 しかし、改行位置などは充分な精度で実際のブログページと編集画面はシンクロして、優れたものと思います。 縦方向（行間隔）に関しては、HTMLの表示仕様の弱点か「？」と思う時がたまにありますが、まあそれは追々につめることにして。 

さて、リブログカードを記事中に配置した場合、前ページで紹介した様にブログスキンでカードをアレンジした場合は、編集画面と実際のブログ誌面が違って来ます。

それは、編集画面（通常表示）ではデフォルトのカードが表示されるからです。

この編集画面上のリブログカードも、スキンでアレンジできたら良いのですが、それは不可能です。 ブログスキンはあくまでもブログページに対して適用されるものですから。

そこで「Stylus」を使い、ユーザースタイルシートの機能を利用します。

「Ameblo Writer」や「Ameblo Writer Compact」を利用しているなら、既にユーザースタイルシートの管理下の編集画面を使っているのですから、事は簡単です。 編集画面の「編集枠」上のリブログカードに、ブログスキンに登録したのと同じアレンジコードを「Stylus」で適用するわけです。

アレンジコードは「Ameblo Writer」のコードに追記しても良いのですが、このスタイルをアップデートすると更新したコードで消されてしまいます。 こういう場合は、簡単な追加アレンジのスタイルを手作業で作ります。 これはローカルスタイルと呼ばれるもので、自分で消さない限りインストールスタイルの更新によって消される事はありません。

新規スタイルを作成

前ページのコードをブログスキンに登録してカードをアレンジしているとして、基本的に同じコードを「Stylus」の新規スタイル作成画面に書き込みます。

以下は登録するコードです。

〔追記〕2019.08.19

コードの設定値を赤字の値に修正しました。

● CSSコード：

/* 編集画面上のリブログカードのアレンジ */
.rlink {
    width: 500px;
    height: 140px;
    margin: 0 auto;
    border: 1px solid #009688;
    border-radius: 4px;
    overflow: hidden;
    transition: .5s; }

.rlink:hover {
    transform: translateY(-1px);
    box-shadow: 10px 15px 40px 0 rgba(0,0,0,0.08); }

.rlink iframe.reblogCard {
    max-width: unset;
    width: calc(100% + 30px);
    margin: -48px -15px 0;            /* margin: -45px -15px 0;  */
    background: #f0f7fb; }

/* 編集画面 通常表示上のリブログカードの背景 */
.js-default-bg-color {
    background: none; }

2項目のコードはホバースタイルで、編集上は邪魔と思うなら省きます。 上記の3項で全く同じカードデザインになると思いましたが、唯一、iframeの背景色だけが反映せず「白」になりました。 編集画面のCSSを調べると、編集枠内の場合は、iframe内で特別に背景色を指定しています。 それをキャンセルするのが最後の4項目です。

「Stylus」であっても、ストレートに iframe内を修飾出来ません。 4項目のコードは、iframeの内部のURLを適用先にする必要があります。 これは、このスタイルの適用の2番目の方です。

● 適用先：

「次で始まるURL」=「https://blog.ameba.jp/ucs/entry/srventry」

「次で始まるURL」=「https://ameblo.jp/s/embed/reblog-card」

これらを「Stylus」の新規スタイル作成画面にペーストし、適当なスタイル名を付けて「保存」を押します。 これでローカルスタイルが登録されます。

このスタイルは常時ONで良く、Ameblo Writer でリブログ編集を始め、HTML編集でカードのコードを「<div class="rlink"> </div>」で包むと、通常表示の画面のリブログカードは下の様にアレンジされたカードのデザインに変わります。

これで、アップロードした状態にとても近い状態を見ながら編集が出来ます。

ちなみに私は、記事中の「h2」「h3」のデザインも同様にローカルスタイルとして登録しています。