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

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

ここあです。

 

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

そろそろネタ切れ感が否めない今日この頃です^^;

 

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

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

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

 

ということで、今回は

AFFINGER5のあれが使いたい企画第2弾!

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

 

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

 

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

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

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

 

前回、ご紹介したAFFINGER5の

こんな方におすすめリストを作る方法でも

お伝えしましたが…

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

 

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

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

 

ただ…

 

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

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

なかなか手間と時間がかかります^^;

 

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

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

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

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

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

 

CSSコードの記述先

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

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

 

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

外観」→「カスタマイズ

ダッシュボードメニュー

 

 

追加CSS」の部分に

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

dropshadow

 

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

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

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コード」を

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

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

使い方としては…

 

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

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

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

 

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

 

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

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

 

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

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

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

とすればOKです。これで分かりますか?^^;

 

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

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

 

スイーツ画像

 

 

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

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

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

 

HTMLコードの書き方は先の

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

 

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

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

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

 

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

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

キャプション入力画面

 

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

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

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

 

わお!美味しそう!

 

引き続き、「AddQuicktag」を使って

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

この方が絶対に簡単!

 

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

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

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

登録しておきしょう!

 

AddQuicktag」に登録しておくことで

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

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

 

AddQuicktag」に登録するには…

 

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

設定」→「AddQuicktag」をクリックし

設定画面を開きましょう。

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

 

AddQuicktag」の設定画面が開けたら

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

AddQuicktag登録画面

 

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

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

 

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

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

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

</div>

 

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

Aの部分」に…

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

Bの部分」には…

</div>

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

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

 

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

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

AddQuicktagリスト

 

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

 

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

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

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

 

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

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

表示されていますので…

ビジュアル編集モード

 

 

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

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

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

ビジュアル編集モード

 

そうすると…

 

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

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

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

 

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

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

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

スイーツ画像

 

キャプションあり」の場合も同様の手順で画像を挿入し

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

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

画像編集モード

 

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

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

キャプション入力画面

 

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

わお!美味しそう!

 

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

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

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

 

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

 

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

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

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

 

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

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

 

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

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

<div class="cap-on">
[caption]<img src="画像URL"/> わお!美味しそう![/caption]
</div>

 

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

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

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

 

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

挿入した画像が「必ず左端に寄ってしまう」ということです^^;

 

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

そうならざるを得ません^^;

 

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

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

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

 

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

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

 

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

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

全く問題ありませんが…

 

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

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

 

こんな風に…^^;

サンプル用

 

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

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

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

 

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

 

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

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

.cap-off {
margin-left:0px;
}

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

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

 

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

.cap-on {
margin-left:0px;
}

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

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

 

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

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

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

 

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

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

以下のように…

.cap-off-b {
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-b img {
margin:0 0 1.5em 0;
}

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

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

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

 

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

以下のように…

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

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

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

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

 

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

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

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

 

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

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

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

 

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

 

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

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

使うようにしてくださいね^^;

 

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

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

 

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

なくなりますけど…(笑)

 

ただ、もしかすると

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

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

 

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

.cap-off {
background: #fff;
border: 1px solid #ccc;
}

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

.cap-on {
background: #fff;
border: 1px solid #ccc;
}

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

 

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

 

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

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

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

 

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

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

これぐらいにしておきます^^;

 

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

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

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

ご紹介しました。

 

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

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

 

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

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

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

 

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

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

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

 

不定期にはなりますが…

 

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

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

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

 

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

 

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

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

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

 

もしも設定でよく分からないことがあれば

いつでも気軽にご相談ください!

「ここあ」に問い合わせをする

 

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

 

合わせて読みたい!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。