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の新機能が続々アップデートされているので、カスタマイズ方法なども気が向いた時にブログで更新していきます。

 

急上昇の記事

トークライバー画像

アプリ

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

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

ライブアプリ

アプリ 比較・まとめ

【2020年】最新の稼げるライブ配信アプリはどれ?

2020年11月現在、コロナ禍の影響もあり、自宅にいながらお小遣い稼ぎが可能なライブ配信アプリが物凄い勢いで普及しています。お小遣い稼ぎや副業としてアプリに参加している『ライバー』増えている一方で、自 ...

ビゴライブロゴ

アプリ

【BIGO LIVE】ビゴライブとは?稼げるライブ配信アプリの使い方を徹底攻略!

2020/11/27    , ,

ライブ配信アプリの中でも 稼げるライブ配信優秀なアプリ使いやすい操作が簡単 などと評判の良い 【BIGO LIVE】(ビゴライブ)   最近とにかくビゴライブの噂を耳にするので、どんなライブ ...

ショッピファイの公式サイト

インターネット

最近噂のShopify(ショッピファイ)とは…?使い方から費用まで

最近話題の『Shopify(ショッピファイ)』   皆様ご存じですか?   名前は聞いた事があるけど、細かいことまで知っているって人はまだまだ少ないのではないでしょうか・・・ &n ...

イリアムのロゴ

アプリ

人気でハマる人が続出…?ライブ配信アプリの【IRIAM】イリアム

2020/12/2    ,

誰でもキャラクターになってライブ配信を行うコトができる   【IRIAM】イリアム   一般的なよくあるライブ配信アプリでは、ライブ配信者が自分の顔をスマートフォンにかざして、テレ ...

よく読まれている記事

-AFFINGER5
-, ,

© 2020 wright BLOG