WPテーマ「STORK」カスタマイズ！「ポラロイド風」画像を作る方法！

ここあです。

ワードプレステーマSTORKのカスタマイズも

そろそろネタ切れ感が否めない今日この頃です（笑）

なので、最近はストークユーザーが

もっと記事を楽しく書けるようにと

他のテーマの機能を研究しつつ、検証しています。

ということで、今回は

AFFINGER5の「あれが使いたい企画」第2弾！

ポラロイド風画像の作り方をご紹介します＾＾

「なんだそれっ！」とツッこんでもらって大丈夫です…w

もうこうなったらストークユーザーを

意地でもストークから浮気させないようにする

私の変なこだわりみたいになってます…（笑）

前回、ご紹介したAFFINGER5の

こんな方におすすめリストを作る方法でもお伝えしましたが…

AFFINGER5の「こんな方におすすめ」リストを作る方法

無いものは作ってしまえばいいのです！

だって作れるんだから…＾＾

ただ…

コピペだけで使えるカスタマイズ方法も

使うだけなら楽ですが、検証する方は

なかなか手間と時間がかかります＾＾；

今回も非常に簡単そうなコードですが…

ポラロイド風画像を作るにあたり

キャプションあり・なしのパターンと

検証するのはちょっとだけ大変でした＾＾

ですが、それでもやっぱり…

もっと楽しく記事を書いて欲しいと思うし

STORKは女性ユーザーも多いと思うので

少しは需要があるはずと思い検証してみました。

ということで、ポラロイド風画像を使いたい方は

ぜひ参考にしてくださいね＾＾

ポラロイド風画像を表示させる手順

例によって、ストークのカスタマイズに慣れている人には

説明するまでもないコードの記述先からご説明致します。

なので、分かっている方は読み飛ばしてくださいね。

CSSコードの記述先

ポラロイド風画像を表示させるための

CSSコードの記述先はこちら…

ダッシュボードメニューから外観 → カスタマイズをクリック

追加CSSの部分に

以下、ご紹介するコードをコピペしてください。

「ポラロイド風画像」の記述コード

それでは、まず初めにポラロイド風画像を表示させるための

CSSコードを追加CSSの部分にコピペしましょう。

※コードは全てまとめてコピペしてください。

CSSコード

.cap-off {
background: #fff;
border: 1px solid #ccc;
padding:10px 10px 20px;
margin-bottom: 10px;
box-shadow: 0 10px 8px -6px #bebebe;
margin-left:0px;
max-width: 100%;
display:inline-block;
}.cap-off img {
margin:0 0 1.5em 0;
}.cap-on {
background: #fff;
border: 1px solid #ccc;
margin-bottom: 20px;
box-shadow: 0 10px 8px -6px #bebebe;
margin-left:0px;
max-width: 100%;
box-sizing: border-box;
display: inline-block;
}.wp-caption{
margin-bottom:0px;
padding:10px;
}

コピペできましたか？

コピペが出来たら早速使ってみましょう！＾＾

「ポラロイド風画像」の表示方法

CSSコードがコピペ出来たら

記事に反映するためにHTMLコードを記述します。

まずはキャプションなしのポラロイド風画像の

HTMLコードから…

ご使用時には以下のHTMLコードを

一旦、テキスト編集モードで記述してください。

HTMLコード（キャプションなし）

<div class="cap-off">
ここに画像を追加
</div>

使い方としては…

ひとまず画像をメディアライブラリから読み込んで

その後、画像の表示コードの前に<div class="cap-off">

後ろに</div>を付ける感じです。

申し少し分かりやすく説明します＾＾

画像をメディアライブラリから読み込んで

テキスト編集モードで見てみると…

<p><img＝画像></p>と画像がpタグで挟まれているので

この前後のpタグを消して

<div class="cap-off"><img＝画像></div>

とすればOKです。これで分かりますか？＾＾；

設定が上手く行けば、以下のように

ポラロイド風画像が表示されます。

キャプションありのポラロイド風画像にしたい場合は

こちらのHTMLコードを使いましょう。

HTMLコード（キャプションあり）

<div class="cap-on">
ここに画像を追加
</div>

HTMLコードの書き方は先の

キャプションなしの場合と同じです。

<div class="cap-on"><img＝画像></div>となっていればOK！

何が違うかというとcap-offがcap-onになっているだけです＾＾

さらにキャプションを表示させるために…

メディアライブラリの以下の部分

キャプションの入力欄に表示させたいテキストを入力します。

画像にキャプションを入力し

cap-onとなっているHTMLコードを使用すれば…

キャプション付きのポラロイド風画像が表示されます。

引き続き、AddQuicktagを使って

もっと使いやすい方法を説明します＾＾

この方が絶対に簡単！

「ポラロイド風画像」を使いやすくするために

ポラロイド風画像がうまく表示できたら

HTMLコードをワードプレスプラグインAddQuicktagに

登録しておきしょう！

AddQuicktagに登録しておくことで

いつでもコードが呼び出せるようになるので

使いやすさがさらに増します＾＾

AddQuicktagに登録するには…

ダッシュボードメニューから

設定 → AddQuicktagをクリックし設定画面を開きましょう。

※AddQuicktag未使用の方はプラグインをインストールしてくださいね。

AddQuicktagの設定画面が開けたら

ポラロイド風画像のHTMLコードを以下のように登録しましょう。

左側の表示タイトルやアイコンはあなたのお好みで設定してください。

AddQuicktagを使う時に、あなたが分かりやすいタイトルで＾＾

また、上記Aの部分には以下のコード（キャプションありの場合）

Bの部分には、以下のコードを入力しましょう。

同様にキャプションなしの場合も登録します。

Aの部分に…

Bの部分には…

それぞれ変更を保存ボタンをクリックして登録し

キャプションあり・なしの両方が設定できたら完了です。

あとは実際にAddQuicktagを使ってみて

コードが表示されるかテストしてみましょう。

AddQuicktagを使ってポラロイド風画像を表示させる場合は…

まず、AddQuicktagからポラロイド風画像のコードを

ビジュアル編集モードのまま表示させます。

※以下説明はキャプションなしの方を選択した場合。

ビジュアル編集モードの場合は

以下のようにここに画像を追加という文字だけ

表示されていますので…

そのまま、ここに画像を追加の文字を選択し

メディアを追加のボタンをクリックして

ポラロイド風画像にしたい画像を選びます。

そうすると…

画像を選択して投稿に挿入した時点で

ここに画像を追加の文字が消えてなくなり

代わりに画像データが表示されます。

設定がうまく出来ていれば

そのままプレビュー表示するとキャプションなしの

ポラロイド風画像が表示されているはずです＾＾

キャプションありの場合も同様の手順で

画像を挿入し、その後に、画像をクリックし

以下のように画像を編集するための項目を表示させて

鉛筆マークをクリックし、キャプションの部分に

表示させたいテキストを入力すれば

キャプションありのポラロイド風画像が表示できます。

ただし、キャプションありのポラロイド風画像を表示させる場合

HTMLコードは"cap-on">となっている方を使用してくださいね。

"cap-off"の方でキャプションを追加すると表示が崩れます。

コードが違うので、少し面倒ですがそこだけは勘弁してください＾＾；

キャプションありの場合は後からキャプションを追加すると…

<div class="cap-on">、</div>が消えていて

正しく表示されない場合があります。

プレビューモードで確認し

正常にポラロイド風画像が表示されていない場合は…

改めてテキスト編集モードで以下のような

HTMLコードの構成になるように調整してみてください。
※以下のコードは分かりやすくするため簡略化しています。

「ポラロイド風画像」使用時の注意点

ポラロイド風画像を使う場合

1つだけ注意して欲しいことがあります。

それはAFFINGER5でも同じだったのですが…

挿入した画像が必ず左端に寄ってしまうということです＾＾；

記述コードの問題でどうしても

そうならざるを得ません＾＾；

もちろん、センターに寄せる方法もありますが

それをすると、CSSに詳しくない方には

さらにややこしくなるので

逆にユーザビリティが悪くなると思い

追加コードは書かずにやめました。

もちろん、先ほど私が例に挙げたように

記事の左右いっぱいに画像を挿入する場合は

全く問題ありませんが…

画像サイズが小さく、記事の両端に達しないサイズの場合は

ポラロイド風画像が左に寄ってしまうので

こんな風に…＾＾；

画像の位置を調整する場合は

あなた自身での調整が必要になりますし

場合に寄っては個別にCSSコードを書く必要がありますので

可能であれば、ポラロイド風画像は…

記事の左右幅いっぱいに表示させる画像のみか

画面左側で表示させたい時のみに

使用していただける方が使いやすいです。

あらかじめご了承ください＾＾；

念のため、画像位置の調整方法も書いておきますので

チャレンジしたい方はCSSコードを複数書いて

画像サイズの位置を調整してみてください＾＾
※画像が記事幅の左右両端に達しない場合のみ。

「ポラロイド風画像」の調整方法

簡単に調整方法だけ記載しておきますね。

「ポラロイド風画像」の左右の位置を調整する方法

小さめの画像を使いポラロイド風画像を表示させた時に

左右の位置を調整する方法は…

キャプションなしの場合は以下

margin-left:0px;の0の部分に数字を入力して

左端から右側へ移動させます。

キャプションありの場合も同様に…

margin-left:0px;の0の部分に数字を入力して

左端から右側へ移動させましょう。

しかし、注意して欲しいのは

コード自体は1つなので、CSSコードを触ってしまうと

全てのポラロイド風画像に反映されてしまうということです。

なので、もしも個別に位置を調整したい場合は

例えば、キャプションなしの場合であれば

以下のように…

あなたが分かりやすいように新たに

CSSコードのclass名に-bなど文字を追加し

※CSSコードを複製して増やしてください。元のコードは残してください。

HTMLコードを表記する場合も

以下のように…

CSSコードに追加した文字を同じように増やしてあげれば

コンピュータに違うコードと認識され

新たに文字を加えたコードのみを個別に指定できます。

ただし、これをやり過ぎると

ポラロイド風画像を表示させるためだけの

CSSコードの数が異常に増えてしまいます＾＾；

なのでCSSコードを複製し、増やす場合は

できるだけ画像サイズの大きさを統一し

必要に応じた分だけ増やすようにしましょう。

Webサイト制作においてルールは非常に重要になります。

もしも、個別にCSSを増やす自信がなければ

フルサイズの画像の場合のみポラロイド風画像を

使うようにしてくださいね＾＾；

「ポラロイド風画像」の枠線の太さを調整する方法

ポラロイド風画像の枠線の太さや色も変更できます。

ただ、ここを変更するとポラロイド感が

なくなりますけど…（笑）

ただ、もしかすると

もう少しだけ枠線を太くしたいという

人がいるかもしれないので、念のため＾＾

キャプションなしの場合はここ…

キャプションありの場合はここで調整します。

全部のコードは書いてないので探してくださいね＾＾；

キャプションなし・ありの場合も同じです。

border: 1px solid #ccc;と書かれたコードの

1pxの数字を大きくすれば、線は太くなるし

#cccのカラーコードを変更すれば色は変えられます。

これ以上、細かい調整方法を書くと

いろんな状況に応じて調整しないといけなくなるので

これぐらいにしておきます＾＾；

「ポラロイド風画像」の作り方まとめ

今回はAFFINGER5のあれが使いたい企画第2弾！

としてポラロイド風画像の表示方法を

ご紹介しました。

いくら便利な機能が標準装備されていても

記事を書く内容によって使えたり、使えなかったりします。

ポラロイド風画像も同様に

お出かけした時のスナップ写真や

美味しそうな料理やスイーツの写真にはバッチリ使えます。

なので、使う・使わないは別として

こういった表示の仕方を知っていれば

使用機会に恵まれた時には活用できると思います。

不定期にはなりますが…

これからもSTORKユーザーを楽しませるような

CSSのカスタマイズコードを検証しつつ

ご紹介していきたいと思います。

今回も使い方は少し特殊ですが…

できるだけ分かりやすく説明致しましたので

上手く表示できないという方もいるかもしれませんが

ぜひがんばってご活用くださいね＾＾

最後までお読みいただきありがとうございました！