AFFINGER5

AFFINGER5のポラロイド風写真枠を中央に表示させるCSS【コピペOK】

AFFINGER5のポラロイド風写真枠を中央に表示させるCSS【コピペOK】

 

この記事を書いた人

この記事を書いた人

 

AFFINGER5の写真枠で『ポラロイド風』を使ったんだけど、よく見たら中央に表示されてない。中央に表示させるにはどうしたらいの...。

 

このような悩みを解決します。

 

本記事の内容

AFFIGNER5のポラロイド風写真枠が中央に表示されない

AFFIGNER5のポラロイド風写真枠を中央にするCSS

ポラロイド風写真枠を使用して画像をリッチに表示させよう

 

セイタ
こんにちは、セイタ(@seita_blog)です!

 

AFFINGER5を使用していて、つい先日の記事からポラロイド風を使おうと思ったのですが、中央表示されてませんでした。

 

画像が大きい場合は気にならないのですが、小さい画像を使用した場合には気になってしまいますよね。

 

そこで、今回はポラロイド風の写真枠が中央に表示されずに困っている人向けに、カスタマイズCSSを作成してみました。

 

本記事を参考にすることでポラロイド風の写真枠が中央表示になります。是非ご覧ください。

 

AFFINGER5のポラロイド風写真枠が中央に表示されない

AFFINGER5のポラロイド風写真枠が中央に表示されない

 

 

普通の写真枠であれば中央に表示されるのですが、ポラロイド風の場合は左寄せになる仕様になっているようですね。

 

ポラロイド風が中央に表示されない現象チェック

ポラロイド風が中央に表示されない現象チェック

 

上の画像を見ていただいて分かるように、左右の空白に差が出ていることが分かります。

 

例えば、画像がコンテンツ枠よりも広いサイズだった場合は中央に表示されるみたいですが、小さいサイズの画像ではそうもいきません。

 

そのため、次から紹介するCSSを参考にしつつ中央に表示するようにカスタマイズしていきましょう。

 

AFFIGNER5のポラロイド風写真枠を中央にするCSS

AFFIGNER5のポラロイド風写真枠を中央にするCSS

 

それでは、AFFINGER5のポラロイド風写真枠を中央に表示させるCSSとカスタマイズ方法について解説します。

 

内容としては、3分ほどで完了するので、サクッと設定して中央表示になるように設定していきましょう。

 

カスタマイズCSSを使用する方法

カスタマイズCSSを追加する場所は、カスタマイザーから移動することができます。

 

CSSを追加する場所までの流れ

  • 外観
  • カスタマイザー
  • 1ページ目の最下部『追加CSS』

 

カスタマイズCSSを使用する方法

 

追加CSSをクリックするとテキストボックスが表示されるので、次に紹介するカスタマイズCSSをそのままコピペしていきましょう。

 

使用するカスタマイズCSS

 CSS
/* ************************************* */
/* photo-boxをセンターにするCSS */
/*
*************************************
*/
div.st-photohu {
display: block;
}

 

上記のCSSをコピーすることができたら、先程開いた『追加CSS』にコピペしていきます。

 

追加CSS

 

追加CSSにコピペできたら、実際にポラロイド風が中央表示になっているかチェックしてみましょう。

 

試しに、新規追加で記事の作成画面を開いたら、写真を追加してスタイルの写真から『ポラロイド風』を選択。

 

画面右上のプレビュー画面をクリックして、実際の投稿画面をチェックしていきます。

 

 

参考画像のように表示されていればOKです。

 

左右均等に表示されるようになったので、今回のミッションはここまででクリアとなります。

 

ポラロイド風写真枠を使用して画像をリッチに表示させよう

ポラロイド風写真枠を使用して画像をリッチに表示させよう

 

今までAFFINGER5の写真枠を使用していたのですが、ポラロイド風のほうがリッチに画像を表示させることが出来ると気がついて使ってみたところ、今回の現象に気が付きました。

 

些細なことですが中央に表示されないと、わずかでも違和感を覚えてしまうので、そういったユーザーのストレスは排除するべきだと思ったんですよね。

 

本記事を読んでいる人は、恐らく同じ気持ちを抱いている方だと思っているので、サクッと修正して質の高いコンテンツを作っていけるように一緒に頑張りましょう。

 

その他AFFINGER5のカスタマイズ方法については、AFFINGER5のカテゴリーページにてまとめてあるので、カスタマイズしたい部分があったら参考にしてみてください。

 

\Twitterのフォローをお願いしますっ /

  • この記事を書いた人
  • 最新記事
セイタ

セイタ

『ひとつ先のブログ情報』を発信するSEITALITYの管理人。ブログ月収41万円。専業アフィリエイター兼ブロガーとして活動しています。趣味はギター・ゲーム・ガジェット集め。最近はAPEX Legendsがブーム。愛用デバイスはG502 HEROとAPEX PRO TKL。

-AFFINGER5
-

© 2020 SEITALITY