元サラリーマンブロガーなつのプロフィール

AFFINGER6の見出しデザインの作り方と使い方!

こんにちは!ブログ運営半年で月20万超の元サラリーマンブロガーなつです。

AFFINGER6のデザインは作りこむと個性的でカッコいいパーツを設置することができます。投稿ページになくてはならない見出しも自分で調整できます。

AFFINGER6(アフィンガー)の見出しデザインの作り方をご紹介していきます。

このページで得れる情報

  • AFFINGER6の見出しはどんなの?
  • AFFINGER6の見出しでどんなことができる?
  • AFFINGER6の見出しデザインパーツの使い方とは
  • 見出しデザインの使い方 「自前の画像にする」
  • 見出しデザインの使い方 「パーツの導入方法」
  • AFFINGER6の見出しデザインの作り方と使い方
  • 見出しデザインの使い方「基本スタイルとテキストの変更」
  • AFFINGER6のデザインパーツでの作り方 (見出し使い方)
ブロガーが欲しい機能満載のWordpressテーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。
※今なら、5大購入特典をお付けしています!

AFFINGER6の見出しデザインはどんなの?

AFFINGER6(アフィンガー)は、見出しデザインを自分で作りだすことができます。ユニークなのは、形柄も変更し、見出しの大きさによって個別に設定していけることです。

 

見出し例

AFFINGER(アフィンガー)の見出しは、見出しの大きさ別にアレンジしたり、形を変えたりなど自由に操作ができるようになっています。

わかりやすい例として、AFFINGER5のデザイン済データーで見ていきます。(AFFINGER6でも加工はできますので作り方は後でご説明します。)

なつ
AFFINGER6のサンプルの見出しはかなりシンプルになりましたのでAFFINGER5にあるデザインの見出しを例としてみてみます。

 

出典:AFFINGER5(アフィンガー5)HappyDiary 2020

 

出典:AFFINGER(アフィンガー)

見た目にシンプルなのですが、結構設定箇所が細かく作りこまれています。

見出し h2

  • 文字色:#ffffff
  • 背景色:#ffe567
  • 背景色:#ffec91
  • ボーダー色:#ffec91
  • ボーダー色:#ffe567

基本スタイル

  • ストライプデザインに変更
見出し h3

  • 文字色:#ffffff
  • 背景色:#ffe567

基本スタイル

  • 吹き出しデザインに変更
  • テキストを中央寄せ
  • 背景や吹き出しの角を丸くする

配置

  • 背景画像を繰り返さない
  • 左の余白(px)10
  • 上下の余白(px)10
見出し h4

  • 文字色:#474747
  • ボーダー色:#f0f0f0
  • 背景色:#fffced

基本スタイル

  • 背景や吹き出しの角を丸くする
  • ふせん風の影をつける
見出し h5

  • 文字色:#474747
  • ボーダー色:#ffe567
  • 背景色:#fffced

基本スタイル

  • 左ボーダーを付ける
見出し まとめ

  • 文字色:#ffffff
  • ボーダー色:#94d0bf
  • 背景色:#94d0bf
見出しを見ながら調整できるので、色合わせなどがキッチリとできていればすごく完成度の高いパーツが出来上がります。

操作はカスタマイザーで簡単にできます。具体的な作り方は、後の章「AFFINGER6(アフィンガー)の見出しデザインの作り方」で詳しく説明をします。

 

速報!
AFFINGERの特典として芸大卒のなつが作ったオリジナルトップページの作り方の記事閲覧パスワードが追加されました!


⇒ 詳しくはこの記事をご覧ください。


//今なら、稼げる5大特典オリジナルデザインマニュアル付き!\\

 

AFFINGER6の見出しデザインの使い方「どんなことができる?」

AFFINGER6(アフィンガー6)の見出しの「h2」と「h3」は作れるデザインが多いです。もう一段階下の「h4」と「h5」は若干できる項目は少なくなります。

例えば、「h2」「h3」では以下のようなアレンジが可能

 

h2、h3でできること

  1. 吹き出しデザイン
  2. 囲み&左ラインデザイン
  3. 2色アンダーライン
  4. グラデーションアンダーライン
  5. センターラインに変更
  6. 囲みドットデザイン
  7. ストライプデザイン
  8. 破線アンダーライン
  9. 左ラインデザイン
  10. チェックボックスデザイン

など。

 

この他、テキストの位置や見出しを画面いっぱいに伸ばしたり、角をとったりと加工をしていけます。

1. 吹き出しデザインサンプル

 

2. 囲み&左ラインデザイン

3. 2色アンダーライン

4. グラデーションアンダーライン

5. センターライン

6. 囲みドットデザイン

7. ストライプデザイン

8. 破線アンダーライン

9. 左ラインデザイン

 

↓ 配色は以下の記事が役にたちます。

 

 訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。
※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

AFFINGER6の見出しで透過画像を使う。

ここからは、AFFINGER6(アフィンガー)の面白い機能です。透過画像などがあれば背景の色と合わせ技で、ドットなどの見出しが作れます。

この機能は他ではあまり見かけないので、より自分の個性を出したい場合には使用すると良いと思います。

実際に作ってみると以下のようになります。

 

透過画像と背景で作った見出し

水玉模様を見出しに使った例です。水玉を目立たせるように背景はドット部分は白にしています。(テキストは好きな色にできます)

市松模様を見出しに使った例です。

色も併せて変えてみるとかなり雰囲気が変わりますし、これらの模様も大きさが違うものが複数用意されていますので、自分の好みに変更できます。

配布される透過の画像は濃いドット、薄いドット、ドットの大、ドットの小、市松など広範囲に及びます。

※AFFINGER5の時に購入された方はパターン画像として配布されています。

 

AFFINGER6の見出しデザインの使い方 「画像にする」

AFFINGER6(アフィンガー)の見出しを自分が用意した画像にすることもできます。これは工夫次第で無限大に作ることができます。

 

自分でダウンロードした画像を使う

ダウンロードをしてきた画像を見出しに使っています。

ちょっとこれは見づらいですが、小柄なものを使った方が文字が見えやすいですし、もう少しぼかしてから文字をはっきりさせると良いと思います。

こちらは写真が元になっています。こちらもちょっと見づらいのですが、例えば、自分でなにか商品を作っている人なんかは、横一列に並べた画像などを使用してもかわいいかもしれません。

 

↓ フリー画像なら以下の記事が役にたちます。

 訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。
※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

 

AFFINGER6の見出しデザインの作り方(使い方)

AFFINGER6(アフィンガー)の見出しの作り方は色と形、テキストの配置などで構成されます。難しいように見えますがボタンひとつで簡単に変わるのでアレンジがしやすいです。

h2とh3の変更のやり方とh4とh5の変更のやり方は若干違いますが、h2、h3のやり方ができるようになれば他も大丈夫です。

 

▼ 外観 ⇒ カスタマイズ ⇒ 見出しタグ(hx)/テキスト

 

各色の変更

色の変更については「色を選択」をクリックするとカラーパレットが開きます。

見出しの形によっては、設定の必要のないものもありますが、出来上がりのデモ画像を見ながら調整してみてください。


  1. 文字色
  2. 背景色
  3. 背景色(グラデーションの場合の上部)
  4. ボーダー色
  5. ボーダー色のサブ色

AFFINGER6の見出しデザインの使い方「基本スタイルとテキストの変更」

色の指定ができたら、基本スタイルとテキストの変更をしていきます。



 

基本スタイルはラジオマークを変更するだけで基本の形が変わります。その他、テキストは見たままですので、中央寄せしたい時にはその部分にチェックを入れていってください。

 

 訪問者に刺さるワードプレステーマ「AFFINGER6/ACTION」
AFFINGER6(アフィンガー6)の公式ページを確認する。
※今なら、5大購入特典をお付けしています!

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

AFFINGER6で透過画像と背景で作る見出し

同じ画面でデザインパーツを使って模様を変更することができます。透過画像があれば、背景とプラスしてちょっと個性的な見出しが作れますのでおすすめです。

 

▼ 外観 ⇒ カスタマイズ ⇒ 見出しタグ(hx)/テキスト

 

  1. 基本のスタイルの「なし」をクリック
  2. 背景の画像をインストール

 

1. 基本のスタイルの「なし」をクリック

基本スタイルの「なし」をクリックします。

 

2. 背景の画像をインストール

背景画像の部分「画像を追加」をクリックし、メディアライブラリーに保存している画像を選ぶ。

見出しのテキストが見づらいので、黒に変更すれば以下のような見出しができあがります。

 

一般の画像を見出しにする方法

こちらも基本スタイルの設定は同じで「なし」をクリックしておきます。画像の取り込みも同じ方法で行います。

画像のどの部分を見出しに入れるかは、背景画像の位置を設定部分で設定をします。

 

↓ 当ブログからWordpressテーマAFFINGER6を購入くださった方に特典をプレゼント!

記事を取得できませんでした。記事IDをご確認ください。

初心者だからこそWordpress有料テーマ を使うべき理由


無料テーマを使うことで時間の無駄遣いをしていませんか?

  • 思い通りのデザインにできない
  • なかなか稼げない
  • アクセス数が増えない

こんな悩みを抱えていませんか?

 

稼ぐブログにしろ趣味ブログにしろ検索の上位にこなければなかなか読んでもらえません。もしあなたが稼ぐブログを作りたいなら、初心者の時に初期投資することはとても大事なことです。

 

Wordpressの有料テーマができる5つのこと

  1. 検索上位を目指せる
  2. 見た目が綺麗でおしゃれになる
  3. 機能が豊富で出来ることが多い
  4. マニュアルなどのサポート
  5. 有名ブロガーも有料テーマを使っている

これまでにあげた5つの有料テーマの特徴を説明していきます。

1. 検索上位を目指せる

ブログを運営していく上で対策をしていかなければいけないのがSEO対策です。検索エンジンのことを考えてブログを最適に合わせていくということがSEO(SearchEngine Optimizationの略)です。

 

  • 情報の信頼性
  • ユーザーへの役立つ情報であるか?
  • スマホ・PCなどでストレスなく使える

 

などたくさんの要因がありますが、ブログを訪問した人があなたのブログの多くの記事を読んでくれるようなテンプレートの仕組みも有料テーマでは細やかに考えられています。

 

2. 見た目が無料テーマ以上に綺麗になる

シンプルが良いか、綺麗なテーマが良いのかそれぞれの好みによります。無料テーマは必要最低限のものを備えていますがやはりシンプルすぎていずれつまらなくなってしまいます。

有料テーマはデザイン性が高く自分の好きなデザインにもカスタマイズしやすいです。

 


出典:AFFINGER5(アフィンガー5)
 

3. 機能が豊富でできることが多い

今現在新しい機能として出てきたのが「着せ替え機能」です。過去にも賢威などにはベース色とパターンがありましたが最近ではアフィリなどはっきりと違った用途で使えるように作りこんでいます。

4. マニュアルなどのサポート

なにかわからないことがあった場合、詳しく記載しているものがあるだけで安心できます。ここが無料テーマと一番違う部分、有料テーマでは売りっぱなしにしない工夫がされています。

5. 有名ブロガーも多数使用

稼いている有名ブロガーと言われる人のほとんどは有料テーマを使っています。ブログ造りでは内容も非常に大事ですが、文章や扱っている分野が同じ程度ならやはり最後の勝負はテーマの構造などになります。

 

もしあなたが稼ぐブログを作りたいと考えているならば「有料」テーマも検討してみてください。

カスタマイズで悩んでいる時間、ブログの完成度、上位に表示するメリットなど考えると有料テーマはあなたのお役にたちます。

おすすめ!WordPressテーマ
「ACTION(AFFINGER6)」

 

  • 高機能の最新テーマで大人気
  • デザイン変更でいろんな用途に使える
  • マニュアル完備
  • 各パーツがプロに作ってもらったみたいにアレンジ可能
  • バナーや囲い枠スライダーなど特殊なものが簡単に作れる。

※ AFFINGER6(ACTION)は AFFINGER5(WING)の後継版です。
⇒ 違いについてはコチラの記事でどうぞ。

コメントを残す

メールアドレスが公開されることはありません。