当サイトへのリンクについて

「地味に儲かる副業」は、原則リンクフリーです。

リンクを行う場合の許可や連絡は必要ありません。

リンクの設定をされる際は、「地味に儲かる副業」へのリンクである旨を明示ください。

※引用についても、出典元の明記とリンクをしていただければOKです。

WP-Searchにサイト事例として掲載されています。
※当サイトはプロモーションが含まれています。

副業で月5万円稼ぐ方法!詳しくは >

PR ブログ

AFFINGER6 HTMLを使って簡単カスタマイズ

AFFINGERカスタマイズ

基本機能だけでも十分魅力的なテーマのAFFINGERですが、少しの手間で自分だけのAFFINGERにカスタマイズできます。
収益に特化したテーマなので、デザイン・レイアウトはHTMLを使って自分好みに仕上げれば、よりパーフェクトなテーマに近づきます。

自分好みのプロフィールに仕上げよう!

afg-customize-01

自動で改行されるので、文章によっては見栄えが悪くなる場合があります。
読みづらいですよね。。。

afg-customize-02

ご存知だと思いますが、WordPressの管理画面より「ユーザー」→「プロフィール」で設定できます。
プロフィールはHTMLを使ってレイアウトを整えることができます。

ここでは、文字サイズ、色、改行、均等配置(ジャスティファイ)を指定しています。

均等配置(ジャスティファイ) ○○○の中に文字を入れる
<p style="text-align: justify;">○○○</p>
afg-customize-03

いかがでしょうか? 中央揃えを均等配置(ジャスティファイ)に変更しただけでも読みやすくなったと思います。
お好みで余白の調整や協調したいところは、部分的に文字サイズや色を変更したり自分なりに楽しんでください。

ヘッターメニュー・フッターメニューをカスタマイズ

afg-customize-04

上記の写真のようにヘッターメニューにアイコンを入れたり、その色を変更したりカスタマイズすると少しオシャレに見えます。

afg-customize-05

まずはWordPressの管理画面から「AFFINGER管理」→「その他」でFontAwesomeIcons4.7.0にチェックを入れ「Save」ボタンをクリックします。

FontAwesomeIconsとは

afg-customize-06

サイトにアイコンフォントを表示させるWebサービスで、素材は商用利用も可能なため多くの方に使用されています。
※AFFINGERのデフォルトで使用できるバージョンは4.7,0です。
FontAwesomeIcons4.7.0のサイトより好きなアイコンを選んでそのコード入れるだけで利用できます。

afg-customize-07

お問い合わせのアイコンをFontAwesomeIconsのサイトからアップロードさせます。サイト内からお好みのアイコンを探し、上記の写真のようにコードが表示されるのでコピーします。

afg-customize-08

WordPressの管理画面から、「外観」→「メニュー」→「ヘッターメニュー」を選びます。アイコンを表示させたいナビゲーションラベルを選択して、上記の写真のようにメニュー名の前にペーストします。※後ろに表示させたい場合はメニュー名の後ろにペースト

今回はアイコンのみカラーを変えたいので属性で色を変えています。

今回使用したコード
<i class="fa-envelope" style="color: #eb5e00;"> </i>お問い合せ

フッターで使用する場合

afg-customize-09

フッターにもアイコンをつけることはできます。お問い合わせにメールのアイコンをつけます。
※左3つはすでに設定済み。

afg-customize-10

WordPressの管理画面から、「外観」→「メニュー」→「フッターメニュー」を選びます。アイコンを表示させたいナビゲーションラベルを選択して、先ほどと同様にメニュー名の前にペーストします。※後ろに表示させたい場合はメニュー名の後ろにペースト

ここではフッター文字全体を小さくしたいので90%指定をしましたが、アイコンだけを表示させたい場合のやり方はヘッターと同様です。

ヘッダーカードをカスタマイズ(ヘッダー下のおすすめ記事)

afg-customize-11

写真のように部分的に文字を大きくしたり、改行したり、色を変えたりとヘッダーカードもHTMLを使えばいろいろと変更できます。

afg-customize-12

WordPressの管理画面から、「AFFINGER管理画面」→「ヘッダー下/おすすめ」でヘッダーカードを表示させます。
上記の画面はEX版のため入力できる項目が2段ありますが、通常版は1段かと思います。

実は、今回のやり方で通常版をお使いの方も、EX版同様に2段組が可能です!

HTMLを使えば改行や文字のサイズ変更等調整が可能です。テキストの前後をHTMLのタグで囲んであげるだけです。

当サイトで使っているコード 
<span style="font-size: 130%;">ア</span>フェリエイトの<span style="font-size: 130%;">始</span>め方
ブロラボ
ブロラボ
今回のやり方は通常版のAFFINGERを使用している方には特におすすめです。2行表示にした方が内容が伝わりやすく見た目のバランスも良いです。私もAFFINGER5の時は通常版を使用していたので、このやり方で使用していました。

AFFINGER6の購入をご検討の方は、 >>公式サイト または AFFINGER6の購入方法とインストール方法 をご覧ください。

  • この記事を書いた人

ブロラボ [副業家]

副業に興味があるが、「何をすれば良いか分からない」「できる自信がない」「時間が限られている」など、何かしらが原因で副業を躊躇しているあなたに向けたブログになります。

当ブログではまったくの初心者の方でも、副業を行うためのノウハウなどが学べるように、「オンライン学習(スクール)」〜「副業」までの手順もサポートしています!もちろんスキルなしでも出来る副業も紹介します。

私自身も今まで数々の副業を行ってきました。その経験と知識を活かして書き上げたブログになります。皆さんの参考になれば幸いです。

運営 >>

-ブログ