AFFINGER

AFFINGER5カスタマイズ【記事パーツにボックスシャドウを付ける】

AFFINGER5画像

AFFINGER5で「クリップボックス」などの記事パーツに影(シャドウ)を付ける方法の紹介です。

難しい設定等は一切なし!

たった1分で影付きデザインの記事パーツに変更できます。

 

こんな人のお役に立てる記事です。

小豆
同じAFFINGER5で作られているブログで、ボックスに影がついているデザインを見た。
自分のブログでもやってみたいんだけど、あれってどうやるの?
簡単にできると嬉しいのだけど。

記事パーツにドロップシャドウをつける【AFFINGER5】

まずは「デフォルトのデザイン」と「ドロップシャドウ付きのデザイン」の比較から。

デフォルトのデザイン

ドロップシャドウなし

小豆
このデザインも全然悪くはないんだけど・・。
でも、影を付けたらもっとメリハリのあるデザインになると思う。

ドロップシャドウ付きのデザイン

ドロップシャドウあり

若干ですが、確かにドロップシャドウ付きデザインの方が、パッと見たときに目立ちますね。

 

小豆
オイラは影付きのデザインの方が全然好きだなぁ。
でも、なんで他のAFFINGERブログではやっている人が少ないんだろう?
アップデートで追加された機能だから、多分気づいてない人が多いんじゃないかな?
大福

ボックスシャドウの付け方【一度の設定ですべてに適用】

ボックスシャドウを付けるには、専用の設定をONにするだけ。

コードの書き換えなどの難しい操作は、一切不要です。

一度設定をONにすると、以前の記事で使用されている記事パーツにも効果が適用されます。

設定方法

  1. AFFINGER5管理を開く
  2. ドロップシャドウをONに

 

step
1
AFFINGER5管理を開く

ドロップシャドウの設定

WordPressメニュー → AFFINGER5管理 → デザイン

 

step
2
ドロップシャドウをONに

設定を変更

  1. 以下の要素にドロップシャドウを追加しますにチェック
  2. チェック後にSAVEをクリック
大福
設定はたったこれだけ!
早速自分のブログで確認してみよう。

ボックスシャドウを追加できる記事パーツとデザイン一覧

設定をONにすると、以下の記事パーツにドロップシャドウが一括適用されます。

ドロップシャドウが適用される記事パーツ

  • おすすめヘッダーカード
  • まるもじ
  • ミニふきだし
  • おすすめ記事
  • ステップ
  • ポイント
  • 見出し付きフリーボックス
  • マイボックス
  • クリップメモ
  • こんな方におすすめ

 

まるもじ

まるもじシャドウなし

まるもじシャドウあり

 

ミニふきだし

ミニふきだしシャドウなし

ミニふきだしシャドウあり

 

ステップ

ステップシャドウなし

ステップシャドウあり

 

ポイント

ポイントシャドウなし

ポイントシャドウあり

 

見出し付きフリーボックス

見出し付きフリーボックスシャドウなし

見出し付きフリーボックスシャドウあり

 

マイボックス

マイボックスシャドウなし

マイボックスシャドウあり

 

クリップメモ

クリップメモシャドウなし

クリップメモシャドウあり

 

こんな方におすすめ

こんな方におすすめシャドウなし

こんな方におすすめシャドウあり

 

まとめ:ライバルに差をつけやすいカスタマイズ

記事冒頭でも書きましたが、今回紹介したカスタマイズはあまりやっている人がいません。

数多くのAFFINGER5ブログの中で目立つには、もってこいのカスタマイズですね。

デザインが気に入った人は、ぜひ自分のブログに取り入れてみて下さい。

 

よく読まれている関連記事

当ブログ限定AFFINGER5特典

AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を6つ紹介

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2021 大福日記