【モブログ】スクリーンショットの画像にのみclassで枠線を付けるようにしました

iPhoneのスクリーンショットをブログに掲載する際に、枠線を付けて背景とスクリーンショットの境目を明確にするようにしました。

CSS知識に乏しい私でも簡単にできましたし、PressSyncを使うことでclass付もラクラクでした。

備忘も兼ねて方法をお伝えします。

スクリーンショット画像に枠線を付けるCSS

△これが枠線を入れる前のスクリーンショット。枠線がないと画像と背景の境目がわからず見にくい印象です。

△同じ画像に枠線を入れました。画像はそのままで、CSSで枠線を足しています。

divにclassを設定して枠線を入れる

方法は2つ。
CSSで、divにclassを設定するか、img要素にclassを設定するか。

まずは前者。
divというのはブロック、classはそのブロックの名前みたいなものです。

ここでは「image-waku」というclassのブロックに枠線を付けてみます。

こちらがCSSに書き込むコード。
solidというのは実線。
1pxは線の幅。
DimGrayは線の色です。

「image-wakuというclassがついたブロックの画像に、1px幅の灰色の実線枠を付けてね」というCSSです。

あとは、枠線を付けたい画像タグを
＜div class=”image-waku”＞＜/div＞
で囲うだけ。(上記は＜＞を全角にしています。実際には半角で入力します。)

img要素に直接classを設定して枠線を入れる

続いてもうひとつの方法。
img要素に直接classを振ります。

先ほどと似てますね。
設定内容は同じです。

こちらの場合は、画像タグに
class=”image-waku”
という一文を足してあげればOK。

PressSyncでclassを入力する

CSSの設定さえしちゃえば、あとは実際にclassを入力するだけ。

モブログではPressSyncを使えば簡単に入力もできちゃいます。

PressSync Pro – WordPress Blogging App
カテゴリ: ソーシャルネットワーキング, ユーティリティ
価格： ￥600

PressSyncでdivを入力する

divの場合は、画像タグを囲うだけなので簡単ですね。

PressSyncがインストールされたiPhoneで下記リンクをタップしてください。カスタム入力支援がインストールされます。

枠付き画像のdiv

インストールされましたか？
インストールされていないようでも、前の画面に戻って再度カスタム入力支援一覧を見ると追加されているかも。

△枠を付けたい画像タグを選択し、HTMLをタップ。

△Custom Input Supportからインストールした「枠付き画像」をタップします。

△画像タグがdivで囲われました。
これで枠線が付きます。

PressSyncでimgにclassを付ける

続いてimgにclassを付ける方法。

△まずアカウント設定の「メディアデフォルト値」のなかの「Class」を編集します。

ここで普段使う画像のClassを設定しておくことができます。1つめがデフォルトになります。普段特にclassを付けていないなら1つめは「None」でOK。
ここに「image-waku」を追記しておきます。

設定はこれでOK。

△記事編集画面です。
画像タグ部分にカーソルがあるとプレビューが表示されます。これをタップしましょう。

△すると画像の詳細設定画面が開きます。
下の方に「classを使用する」というチェックがあるので、これをオンにします。

△オンにするとclass設定の枠が出てきますので、ここでclassを選択します。先ほどのアカウント設定で記入したclassが選択肢として表示されます。

△入力を終えるとこんな感じで画像タグにclassが設定されます。

トリまとめ

モブログだとタグ入力が手間だったりするのですが、PressSyncの入力支援が強力ですね。
簡単にclassを設定できちゃう。

枠線を付けた方が見やすさがグッと増すと思いますので、是非お試しくださいね。

それでは。
こっこ（@cocco00）でした。