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

wpid-20150729094219.jpg

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

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

カスタム入力支援

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

divで囲われた

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

PressSyncでimgにclassを付ける

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

class設定

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

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

設定はこれでOK。

サムネイルタップ

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

classを使用する

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

class選択

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

classがつく

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

トリまとめ

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

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

それでは。
こっこ(@cocco00)でした。

wpid-20150729094219.jpg
ジブン手帳2017販売中!

ロフトネットストア

話題のジブン手帳2017の販売がスタートしています。お買い漏れのないように!今年からジブン手帳グッズの販売もスタートしましたよ。

コメントを残す