AFFINGER5

AFFINGER5(WING)見出しタグのチェック素材のカラーコードと設定方法!

投稿日:2018-09-02 更新日:

 

ワードプレステーマのAFFINGER5(WING)の新機能

見出し前にチェックを入れられる画像が配布されました。

その他「ステ子」などの無料配布でアップデートもされ続けています!

コチラが見出しタグなどに使用できるチェック画像

見出し画像

 

このAFFINGER5(WING)専用の見出し前にチェックを入れられる画像に関してです。

チェックの画像と、『▶』三角素材が使用可能に!

 

現在アフィンガー5(WING)を利用していると、見出し前は任意の画像を挿入するか、何も挿入しない状態での投稿が可能!

しかし、サイトデザイン的には見出しの前に『チェック画像』があるか、ないかで結構デザイン性が変わってきます。

チェック画像配布で、ナイス!!と思ったんですが・・・

 

コレ、実際に使用してみるとカラーを合わせないとデザインがBadでした!

見出しタグの使い方にもよりますが、吹き出しデザインなどで使用している人は、この見出しタグ画像とカラーを合わせないとヘンちくりん!

こんな感じ

見出し画像2

 

色を合わせないとヘン!!なんのですが、カラーコードの記載がなかったので、調べました!そのカラーコードと実際の設定方法をこのブログ記事でシェアしていきたいと思います。

これから使う人は参考にしてもらえたら嬉しいです!!

 

背景画像とカラーを合わせると、こんなにオシャレに決まります

見出し画像3

 

見出しタグに使えるチェック画像のカラーコード

まずは、カラーを分析した結果!

現在配布された画像の種類は、全部で11種類

この内、背景無しと色が被っているのがあるので、5色だけ検索しました。

こちらの5色!

見出し画像4

『黒・緑・赤・薄い青・青』

黒 ⇒ 「#1c1c1c

緑 ⇒ 「#2c7c3c

赤 ⇒ 「#9c1414

薄い青 ⇒ 「#1c8cd4

青 ⇒ 「#2474ac

カラーを合わせて使ってみてね!

少し暗い色に設定する場合や、少し明るくしてデザイン性あるサイトを作りたい人は、あえて少し色を変化させるのも有りだと思うので、色々とカスタマイズしてみて!

 

1色の吹き出しデザインにすると、こんな感じに

見出し画像5

1色の吹き出しデザインの見出しタグを使用するなら、少し色を変化させた方が良いのカモ・・・

この画像みたいだと、少しナンセンス。

 

 

見出しタグ前のチェック素材、設定方法

 

実際に使用する手順をご紹介!

まずは、AFFINGER5(WING)及びEX・PROを使用している人は、マニュアルへ!

 

ワードプレス管理画面の『AFFINGER5管理』の項目に行きましょう!

『マニュアルサイト』の項目と『パスワード』が記載されているので、パスワードを入力してマニュアルサイトに進みます。

 

最初の「お知らせ欄」『見出しタグなどに使いやすいチェック素材』があるので、そこをクリック!

見当たらない場合は、検索で「見出し」で検索かければ表示されます。

 

次に『見出しタグなどに使いやすいチェック素材』から、画像をダウンロード。

download ってリンクをクリックすると画像ゲットできます。

ゲットしたら、解凍しましょう。

保存した場所で、右クリック解凍でOK

 

このページを、そのまま下に行くと使い方のコツが表示されているので参考に設定してみてね。

初心者用にもっと、わかりやすく説明しときます。

 

ワードプレス管理画面 ⇒ 外観 ⇒ カスタマイズ

見出し画像6

 

カスタマイズ画面から、赤枠内の『各テキストとhタグ』をクリック

すると、記事タイトルからh5タグまでの設定が出来ます!

ここで変更したい箇所をカスタマイズしていきます。

見出し画像7

 

見出しタグの画像を使用する場合は『画像選択』をクリックして、先程ダウンロード&解凍した画像を選択。ここで選択したらメディアライブラリに挿入されるので、使用が可能になります。

その下の項目は、

『背景画像の横位置』:

『背景画像の縦位置』:真ん中

『背景画像を繰り返さない』:チェックを入れる

『左の余白』:マニュアルでは、60を推進していますが、自由に調整してください。左側からの余白(スペース)の間隔です。

『上下の余白』:10

 

 

カラー変更とカラーコードの指定

 

各見出しのデザインと合わせる為のカラーを指定する手順です。

見出し画像8

 

変更したい箇所の『色を選択』

赤枠内で囲った箇所に、先程のカラーコードを入力して自由にカラー選択ができます。

ここで、文字色・ボーダー色・背景色などを変更して好みの見出しカラーを設定してね!

 

背景色を設定すれば、ダウンロードした背景色が透過素材と被らずにキレイに表示されます。(マニュアルサイトからダウンロードした素材に透過素材が2つあります)

 

カスタマイザーを使用したくない場合は、各項目から『カスタマイザーのCSSを無効化』にチェックを入れて使用してください!特別なカスタマイズを行う場合を除き、無効化する必要はないです。
わからなければ、触らないのがベスト!

 

 

まとめ

以上が設定方法となります。

アフィンガー5の新機能が続々アップデートされているので、カスタマイズ方法なども気が向いた時にブログで更新していきます。

 

急上昇の記事

マシェバラトークラーバー

アプリ

【マシェバラ・トークアプリ】配信用ライバーで気軽にお小遣い稼ぎ!

2018/08/02    , ,

【女性必見】 お小遣い稼ぎが出来ちゃう。マシェバラトークアプリをご紹介!   ライブ配信で、報酬ゲット!ってゆーアプリです。 使い方や、どんなアプリなのかを徹底解説していきます! &nbsp ...

lipsリップスアプリ

アプリ

【LIPS】コスメ・メイク好き女子必見の無料アプリ(リップス)とは…?使い方を徹底調査。

2018/12/06    , ,

LIPS(リップス)   コスメ・メイク好きが、こぞって利用している無料アプリ LIPS(リップス) 美容系で有名なYouTuber、TikToker、インスタグラマーなどの多くのインフルエ ...

cartuneapp4

アプリ

CARTUNE(カーチューン)車好きが集まるSNSアプリ

2018/07/11    

CARTUNE(カーチューン)   車好きな人が集まるSNSコミュニティアプリのCARTUNE(カーチューン)   今までにも車関連のアプリやSNSといった車好きが集まるコミュニテ ...

女性人気アプリ

アプリ

女性に人気の話題アプリをまとめて紹介 / これがトレンド

2018/12/18    , ,

女性向けに人気のアプリを まとめて紹介!!   ■ 美容系アプリ LIPS(リップス) コスメ・メイク好き女子に人気の 美容アプリです。   最近ではローラさんのCMで話題となって ...

ホンネアプリロゴ

アプリ

【HONNE(ホンネ)】匿名の悩み相談ができるヒマつぶし無料アプリの使い方

2018/11/27    , , ,

誰か悩みを聞いてぇー 誰でもイイから、かまちょー 相談にのってぇー そんな時にバッチリなアプリ【HONNE】     「みんなの本音、覗きみちゃう」がキャッチフレーズな完全ヒマつぶ ...

アプリ

【ARINE(アリネ)】女性のための美容まとめ無料アプリ。使い方から評判などを解説!

2018/12/03    

キレイになりたい。 可愛くなりたい。 オシャレになりたい。 美容が大好き。 すべての女性の為の、美容アプリ【ARINE(アリネ)】   美容に関する全般(ヘア・メイク・コスメ・ファッション・ ...

よく読まれている記事

-AFFINGER5
-, ,

Copyright© wright BLOG , 2019 All Rights Reserved.