アフィリエイト 副業

【画像28枚】アフィンガー5でトップページをおしゃれにカスタマイズ【誰でもできます】

 

ぶたくん
アフィンガー5を使ってるんだけど、トップページをおしゃれにしたい!だけど、やり方がよく分からないんだよね…

こんなふうに悩んでいませんか。

 

せっかく有料テーマを買ったのですから、どうせならかっこいいおしゃれなデザインに仕上げたいですよね。

特に、サイトの顔となるトップページならなおさらです。

 

そこで、本記事では、アフィンガー5を使ったおしゃれなトップページのカスタマイズ方法について紹介します。

 

そのカスタマイズ法とは、このブログのトップページのようなカテゴリーごとに分けられたすっきりとした見やすいページです

本記事の内容に沿ってカスタマイズしていくだけで、上の画像のようなトップページが簡単にできますよ

 

画像を28枚使って初心者でも分かるように丁寧に解説しているので、ぜひご覧ください!

 

\期間限定キャンペーン開催中/

※一度購入するだけで使いまわしができる

 

アフィンガー5でトップページをおしゃれにカスタマイズする手順

カスタマイズしていくのは、上の画像の赤い四角で囲ったエリアです。

 

カスタマイズする手順は大きく分けて次の4ステップ!

 

step
1
トップページを2分割する

step
2
バナーリンクをつくる

step
3
ブログカードを配置

step
4
ボタンリンクを設置

 

ステップ1 トップページを2分割する

まずは、上の画像にようにトップページを2分割していきます。

 

固定ページ > 新規追加」で上の画面を表示します。

 

 

次に、「スタイル > レイアウト > PCとTab左右50%」を選択。

 

 

すると、上の画像のように黄色と青色の枠が現れます。

 

 

プレビューで見ると、上の画像のように表示されます。

トップページの2分割はこれで完了です。

 

ステップ2 バナーリンクをつくる

次に、上の画像の赤い四角で囲った部分のバナーリンクをつくります。

 

 

まずは、トップページの左側から編集していきます。

左側の黄色い枠内の「左側のコンテンツ50%」という文字を消し、「タグ > ボックスデザイン > バナー風ボックス > 基本」を選択します。

すると、上の画像のようなコードが自動で書き込まれます。

 

 

上の画像の赤い四角で囲った3ヵ所を編集します。

  1. st-flexbox url="リンク先(カテゴリ一覧など)のURLを入力"
  2. title="バナーリンクのタイトルを入力"
  3. background_image="バナーリンクに使う画像のURLを入力"

 

 

 

これで上の図のようなバナーリンクが完成です。

 

ブログカードを配置

次に、上の画像の赤い四角で囲った部分「ブログカード」を設置していきます。

 

 

上の画像の赤い四角で囲った「カード」を選択します。

すると、青い四角で囲ったコードが自動で書き込まれます。

 

 

自動で書き込まれたコードを1ヵ所だけ編集します。

  • st-card id=表示したい記事のidナンバーを入力

 

 

これでブログカードの設置は完了です。

あとは、ブログカードを設置したい数だけ同じ作業を繰り返します。

 

ブログカードは、だいたい3枚か4枚ぐらいにしておくと見た目のバランスがええぞ!
マネー博士

 

上の画像はブログカードを3つ設置した場合のプレビューです。

 

これでブログカードの設置は完了じゃ!
マネー博士

 

ステップ4 ボタンリンクを設置

最後にボタンリンクを設置します。

 

 

タグ > カスタムボタン > ノーマル > 詳しくはこちら(ブルー)」を選択します。

すると青い四角で囲ったコードが自動で書き込まれます。

 

編集するのは赤い四角で囲った3ヵ所だけ。

  1. st-mybutton url="リンク先(カテゴリ一覧など)のURLを入力"
  2. title="ボタンリンクのタイトルを入力"
  3. ref=""

 

ボタンを光らせたくなければ、3つめの「ref="on"」を「ref=""」にするといいぞい!
マネー博士

 

これで、下の画像のとおりボタンリンクの設置までが一通り完了です☟

 

 

あとはトップページの右側も同じことを繰り返すだけで、カテゴリーごとに分けられたおしゃれなトップページが完成します☟

 

 

アフィンガー5でつくったトップページを微調整する方法

以上でトップページはひとまず完成なのですが、少し気になるところがあるので、そこを微調整して完璧なページに仕上げます。

 

ぶたくん
気になるところってどこ?

 

出来上がったトップページをもう一度ご覧ください☟

まずは、赤い四角で囲った部分です。

この部分はブログカード間の幅に比べて、スペースが大きすぎてバランスが悪いです。(もう少しスペースを縮めたい)

 

そして、青い四角で囲った部分ですが、ブログカードのサイズが違うために横のラインが揃っていません。

 

ぶたくん
確かにちょっと惜しいよね…
よーし、では解決法を伝授するぞ!
マネー博士

 

トップページのスペースを微調整する方法

まずは、トップページのスペースを微調整する方法を紹介します。

最初に、バナーリンクのコードブログカードのコードの間の余白を無くします。

 

 

次に、バナーリンクのコードとブログコードの間にカーソルを持ってきて、Shiftを押したままEnterを押します。

そうすると、上の画像のようにブログカードのコードが行を空けずに改行されます。

 

 

すると、上の画像の赤い四角のスペースが、ブログカード間のスペースと同じぐらいになってすっきりとしてきれいなデザインになります。

トップページの右側半分と比べると違いがよく分かりますよね。

 

 

同様に右側半分も同じ作業を繰り返します。

すると上の画像のようになります。

 

ぶたくん
ちょっとしたこだわりだけど、見栄えが全然違うね!

 

ブログカードのサイズを揃える方法

次に、ブログカードのサイズを揃える方法を紹介します。

方法はいたって簡単で、「アフィンガー管理 > デザイン」を選択し、サムネイル画像設定で「サムネイル画像を大きくする(タブレット以上は1.5倍)」にチェックを入れます。

 

 

すると、上の画像のようにサムネイル画像が大きくなって、ブログカードのサイズがすべて均等になります。

これで、横のラインがすべて揃ってトップページは完璧です!

 

 

最後にちょっとした調整を加えるだけで、見た目が格段に良くなりますので、ぜひ挑戦してみてください。

 

 

【画像28枚】アフィンガー5でトップページをおしゃれにカスタマイズ|まとめ

以上、「【画像28枚】アフィンガー5でトップページをおしゃれにカスタマイズ」でした。

 

これで新着記事が並ぶだけの味気ないトップページとはおさらばです。

それに、ブログを訪問した読者が利用しやすくなることで、直帰率や滞在時間が長くなる効果も期待できます。

 

ぶたくん
SEOにも良い影響がありそうだね!

 

簡単なので、ぜひ試してみてください!

 

\期間限定キャンペーン開催中/

※一度購入するだけで使いまわしができる

 

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

【無料公開】ブログ初心者でも月1万円稼げるキーワードと案件を暴露【ライバル激弱】

続きを見る

【要注意】アフィリエイト商品(案件)の選び方|間違えると悲惨な目に【案件公開】

続きを見る

ブログアフィリエイトの経費ってどこまでOK?計算方法は?税務署に行って聞いてきた!

続きを見る

 

副業

アフィリエイト 副業

【画像28枚】アフィンガー5でトップページをおしゃれにカスタマイズ【誰でもできます】

  ぶたくんアフィンガー5を使ってるんだけど、トップページをおしゃれにしたい!だけど、やり方がよく分からないんだよね… こんなふうに悩んでいませんか。   せっかく有料テーマを買ったのですから、どうせならかっこいいおしゃれなデザインに仕上げたいですよね。 特に、サイトの顔となるトップページならなおさらです。   そこで、本記事では、アフィンガー5を使ったおしゃれなトップページのカスタマイズ方法について紹介します。   そのカスタマイズ法とは、このブログのトップページ ...

アフィリエイト 副業

ブログアフィリエイトの経費ってどこまでOK?計算方法は?税務署に行って聞いてきた!

  ぶたくんブログで収益が出たから確定申告しなくちゃいけないんだけど、ブログって一体どこまでが経費に認められるんだろう?それに経費の計算の仕方もよく分からない… こんふうに困っていませんか?   実は、私も昨年ブログ(アフィリエイト)の収益が60万円を超えたので、今年初めて確定申告をしなくてはいけません。   しかしはっきり言って右も左も分からない…。   とりあえず、収入と経費を計算するところから始めたのですが、とにかく経費の考え方がよく分からない。   ...

アフィリエイト 副業

【無料公開】ブログ初心者でも月1万円稼げるキーワードと案件を暴露【ライバル激弱】

  ぶたくんブログを始めて半年たつけど、月1,000円稼ぐのがやっと…もうブログ辞めようかな… こんなふうに悩んでいませんか?   ブログで成果を出すにはそうとうな時間がかかります。 それこそ、半年続けても「収益0…」なんて人の方が多いのではないでしょうか。   もはや「修羅の道」じゃのぉ…マネー博士   よほどの忍耐力を持った人でないと、なかなか続けるのすら難しいのがブログです。 ましてや収益化となるとさらに難しい…。   そこで、本記事ではそんなあなた ...

Uber Eats(ウーバーイーツ)

【2020最新】ウーバーイーツ埼玉について解説【配達パートナー向けキャンペーン情報も紹介】

  ぶたくん埼玉でもついにウーバーイーツのサービスが始まったらしいね! そうなんじゃよ。おぬし意外と情報通じゃのぉマネー博士   2018年9月26日より、埼玉でもUber Eats(ウーバーイーツ)がサービスを開始しました。 日本では7番目のサービス提供都市になります。   2016年からお隣の東京でサービスがスタートしたウーバーイーツですが、やっと埼玉でもサービスが始まったかと待ちかねた人も多くいることでしょう。 そこで本記事では、埼玉で始まったウーバーイーツについて分か ...

Uber Eats(ウーバーイーツ) 副業

【写真あり】ウーバーイーツで配達する時の服装は自由?制服とかあるの?

  ぶたくん「ウーバーイーツで配達する時の服装って決まりはあるの?制服とかあるのかな?」 と困っていませんか?   いつでもどこでも自由に働けるのが売りのウーバーイーツですが、果たして服装はどうなのでしょうか? 服装すらも自由なのでしょうか。 それとも、制服など決まりがあるのでしょうか。 気になりますよね。   そこで本記事では、ウーバーイーツで配達する時の服装について、実際にウーバー配達パートナーとして働いている人の写真を交えながら紹介していきます。 これからウーバーイーツ ...

副業の記事はこちら






資産運用

確定拠出年金(DC) 資産運用

【運用歴6年】企業型確定拠出年金の実績をブログで公開【評価損益は+〇〇円】

  ぶたくん確定拠出年金やってる人の運用実績が知りたいなぁ。個人ブログでものぞいてみようかな! こう思ってこの記事にたどり着いたあなた。   自分以外の人の資産運用額や運用実績って気になりますよね。 みんなどれくらい儲かっているんだろう?それとも、損している人もいるのかな? 他の人の実績を参考に、自分の運用成績の水準を知りたいな こんなふうに思い、私もついつい他の人のブログを読んだりしています。   そこで本記事では、確定拠出年金に加入してから6年経つ私の運用実績すべてを公開 ...

確定拠出年金(DC) 資産運用

【データ公開】確定拠出年金の評価損益の目安っていくら?運用歴6年のベテランが解説!

  ぶたくん確定拠出年金で資産運用しているんだけど、評価損益の目安ってどのくらいなんだろう? 他の人の実績が気になるなぁ… こんなふうに悩んでいませんか?   実は私も確定拠出年金を6年以上運用しているのですが、いまだに他の人と比べて運用利益が多いのか少ないのか気になります。 別に他の人と競うことが資産運用の目的では無いのですが、やはり何かしらの目安があると安心しますよね。   そこで本記事では、確定拠出年金に加入しているおよそ160万人の運用実績をもとに、評価損益の目安がど ...

ウェルスナビ 資産運用

【検証】ウェルスナビのリスク許容度5→1へ変更で利益確定できる?【ポートフォリオ公開】

  ぶたくんウェルスナビの運用利益を一部確定したいんだけど、リスク許容度の変更でそれが可能だろうか? 先日ふとこんなことを思いました。   というのも実は、2018年6月から始めたウェルスナビの運用益が、米国株の高騰の影響で「+7,000円(+6%)」を超えたからです。   メモ 2019年11月にNYダウが史上初めて2万8,000ドルを超え、史上最高値を更新してから2019年の年末にかけて、結局2万8,872円まで高騰しました。   この影響でこれまでほとんどマイ ...

確定拠出年金(DC) 資産運用

【サルでも分かる】確定拠出年金のメリットとデメリットをやさしく解説

  ぶたくん確定拠出年金(DC)ってどんなメリットやデメリットがあるの?全然分からない… と悩んでいませんか?   私も実際に確定拠出年金を始めるまでは、「何それ?何かすごく難しそう…」と食わず嫌いしていました。 でも実は、確定拠出年金って仕組みはいたって単純で、それにとてもお得な制度なのです。 正直、加入しないのはもったいない!   そこで本記事では、確定拠出年金の「メリット」「デメリット」をサルでも分かるようにやさしく解説しています。   本記事を読めば、「確定 ...

ウェルスナビ 資産運用

【計算比較】WealthNavi(ウェルスナビ)の手数料1%が「高い」は嘘【それどころか安い】

  ぶたくんウェルスナビの手数料って1%だけど、果たしてこれって高いの?それとも安いの? と悩んでいませんか?   ウェルスナビのように “ 長期 ” での投資が前提であれば、手数料はかなり重要です。 将来の投資成績を大きく左右すると言っても過言ではありません。   そこで本記事では、ウェルスナビの手数料が高いのか安いのかを明確にするために、次の2つの対象と手数料を比べてみました。 ウェルスナビ VS 他のロボアドバイザー ウェルスナビ VS ウェルスナビの投資対象銘柄に自ら ...

資産運用の記事はこちら






節約

節約 貯金

35歳までに貯金1000万円を貯める10のコツをブログで紹介【本業×副業×節約×資産運用】

  ぶたくん貯金を1,000万円貯めるにはどうすればいいんだろう?何かコツとかあれば知りたいなあ こんなふうにお悩みのあなた。   貯金って口で言うほど簡単ではないですよね。 おしゃれな洋服が着たい おいしいものが食べたい 旅行に行きたい ついつい誘惑に負けて散財してしまう…。 お金ってなかなか貯まりにくいのが現実です。   しかし、実は貯金もやり方次第ではストレスなく効率よくできるのも事実です。   私は、実際に10個のテクニックを使って35歳までに1,000万円 ...

スーツ代 節約

【毎年2,750円もらえる】洋服の青山ライフカードはコスパ最強【スーツ代を節約したいサラリーマンにおすすめ】

  スーツにあまりお金をかけたくない スーツにそもそもそんなにこだわりが無い 洋服の青山で買い物することが多い 本記事はこんな方に向けて書いています。   営業マンやスーツでオシャレしたいという人でもない限り、スーツって意外とどうでもよかったりするものです。   仕事中に特に外出することもなく、ほとんどの時間を会社の中で過ごすサラリーマンならなおさら。 実は、私もその一人です。   なるべくならスーツやシャツ、それにネクタイ、ベルトなどに極力お金をかけたくない! & ...

格安スマホ 節約

【格安スマホ】初心者に圧倒的におすすめなのはワイモバイル【安さと安定感を両立】

  ぶたくん格安スマホってどれを選べばいいか分からない。 それに、なんか手続きとか面倒くさそう… こんなふうに悩んでいませんか?   格安スマホっていろんな会社からサービスが提供されていて、「正直どこを選べばいいのかよく分かない…」という方も多いはず。   それに、なんだか手続きも面倒くさそうだし、3大キャリア(ドコモ・au・ソフトバンク)に比べて、サービスの品質や通話エリア、それに通信速度が劣らないかが心配…。   しかし、安心してください! 実は、そんなあなたの ...

節約

【実践済み】おすすめの節約法3つを紹介|固定費を下げることを最優先にすべし!

  ぶたくん全然貯金が貯まらない…そろそろ本気で節約でもしようと思うんだけど、何かおすすめの節約法知らない? こんなふうに悩んでいませんか?   「節約」と聞くと、我慢の生活を強いられるイメージが先行して、あまり気乗りしないですよね。 でも、実は節約ってそんなに難しいものではないのです。 むしろ上手に節約すれば、まったくストレスなくお金を貯めることができるのです。   そこで本記事では、節約が苦手な人でも必ず実行できるおすすめの節約法を3つ紹介します。   ストレス ...

節約の記事はこちら






“ 億りまっせ ” 運営者の運用資産総額

運用資産総額:約350万円

本サイト “ 億りまっせ ” 運営者の資産運用額を公開!投資先ごとの投資元本や評価資産、それに評価損益などを詳しく解説しています。毎月、副業で稼いだお金を投資に回し「資産1億円」を目指します。毎月情報を更新しているのでぜひチェックをお願いします。

詳しい解説記事はコチラ


スポンサードリンク

-アフィリエイト, 副業

Copyright© 億りまっせ , 2020 All Rights Reserved Powered by AFFINGER5.