初心者でも出来るホームページの作り方ガイド

kawaii

MANUAL

「キュン♥」となる可愛いブログ・ホームページの作り方完全ガイド

投稿日:2016年11月21日 更新日:

以前にWordPressテーマ「STINGER PLUS+」を公開した際に作成したサンプルサイト「可愛い!」と特に女性の方から非常に好評をいただきました。

ただ現在「STINGER PLUS+」が配布終了しておりまして、代りに有料テーマ「AFFINGER4」にて同じサンプルを作りなおしております。

でもこれ、ほとんどmicata2(無料版)」でも同じように作成ができるのです。

サンプルサイトに使用している素材も有料のものが多いのですが無料でも十分に代替えできるサービスがたくさんあります。

一緒に紹介していきながら、はじめての方でも無料で可愛いサイトができるように順番にわかりやすく解説したいと思います。

※有料版との違いについて

サンプルにある「オリジナルボタン」「スマホの下部挿入エリア」「広告エリア」及び「YouTube背景」は有料版(AFFINGER4)のみとなっております。AFFINGER4御利用の方は下部の方にて併せて説明しておりますのでご参考下さい。

可愛いブログ・ホームページの作り方

まずは「可愛い」を作る下準備!

shutterstock_164757155

料理は素材が命と言いますが、ホームページも素材が命です。

まずはサイトに使用する可愛い素材配色するカラーを決めておくと作成が一気に捗りますよ。

可愛い素材の用意しよう

写真素材

2016-11-18_201437

サンプルサイトの画像は主に「ShutterStock」というサービスを利用しています。その他には、日本の素材が多い「PIXTA」がリーズナブルなのでよく利用します。ただこちらはリーズナブルとはいえ有料です。

そこで「無料」でもオシャレな画像が入るサイトがコチラ

おすすめの無料の代替え画像サービス「pixabay」
2016-11-18_204658

画像だけでなくベクター画像や動画も検索できる無料素材サイト。その数なんと800,000枚以上。

https://pixabay.com/

御存知の方も多いかもしれませんが「pixabay」はCreative Commons CC0にて無償配布されていて、改変、配布、および使用に関しては、商用利用に際してもロイヤリティーフリー。 著作権の帰属先の表示は不要なのにクオリティも高く気に入っているサービスです。

「Baby(赤ちゃん)」と検索すると以下のように十分使えそうな素材がたくさん見つかります。

2016-11-19_095407

一度、メール登録(無料)をしておくと毎回画像認証する手間が省けるのでおすすめです。

PickUp!可愛いが溢れるガーリー素材サイト

可愛い素材を中心としたガーリーな素材サイトを紹介します。

2016-11-19_17h58_18

GIRLY DROP

2016-11-21_133054

女の子による女の子な写真素材
美容やファッション、カフェに雑貨やインテリア。一般的な素材サイトとは異なる女の子らしいテイストの素材があります。クレジット不要・商用利用可能なフリーです。

http://girlydrop.com/

2016-11-19_18h04_31

ガーリー素材

2016-11-21_133257

クオリティの高い柔らかなイラストがepsとpngで用意されています。個人、商用利用無料です。このクオリティで無料なんて凄い。

http://girlysozai.com/

2016-11-19_18h12_38

FREE LINE DESIGN

2016-11-21_133743

400点以上の罫線・ライン素材がフリー(無料)でダウンロードできる「FREE LINE DESIGN」。手書き風の素材など可愛いサイトを作るのに役立ちそうな素材がたくさんあります。

http://free-line-design.com/

 背景画像を用意しよう

2016-11-18_201808

サンプルサイトの背景は「subtlepatterns.com」という無料素材サービスを利用しています。数が豊富というわけではありませんがシンプルで使いやすい素材があるので気に入っています。シンプルって可愛さを演出するのに大切なんですよね。

2016-11-18_202329

サンプルに使用した素材はコチラ

まだまだある!シームレスな可愛い背景素材配布サイト

2016-11-19_102331

Pixeden

有料とフリーがまじっていますが使える素材が多いサイトです。

2016-11-21_132424

木目素材1つとってもクオリティが高いです。

http://www.pixeden.com/graphic-web-backgrounds

2016-11-19_100418

Bg-Patterns

様々なパターン素材が無料で配布されているサイト。

2016-11-21_132117

サイズの変更など嬉しいカスタマイズが出来て無料でダウンロードできます。

http://bg-patterns.com/

2016-11-19_100526

PATTERN

POPな素材が豊富

2016-11-21_132716

カラーなどのカテゴリで探すことができます。

http://www.pattern-sozai.website/data/

無料の画像加工ツールでさらに可愛く!

2016-11-18_195114

素材をいい感じに加工するとサイトの可愛さもグッと上がります。

サンプルサイトをスマホで見た時に下にいる動物たちは背景が透けている「png」と呼ばれる形式の画像で保存しています。

IMG_2848

通常、このようなサイトはPhotoshopなどで作成するのですが「ipiccy」という無料のWebサービスで作成する事も可能です。

http://ipiccy.com/

Chromeの拡張アプリもあります。

https://chrome.google.com/webstore/detail/imokeandodnlammaoenbgcnbhigjbpjh?hl=ja

2016-11-18_194901

好きなサイズで作成ができ画像のアップロードやトリミングはもちろん、様々な加工ができる優れものです。

2016-11-18_195146

作成した素材は「jpg」か「png」でダウンロードできます。

※テキストも入れれますが英字のみとなります。テキストを日本語で入れたい方は無料ソフトのGIMPなどが良いかも

参考無料で作る!バナーの作り方 ~ フリーソフトGIMPのわかりやすい使い方

背景が透過した画像配布サービス

2016-11-19_085645

Freepic

「Freepic」には可愛いカラーで背景の無いイラストやアイコンが多数配布されています。

PNGをはじめとした様々な形式でダウンロードできるので便利です。

http://www.flaticon.com/

またiPadアプリの「合成写真 合成スタジオ」でも簡単に背景を消した画像が作成できます。広告が入りますが無料で使用できます。

itune store合成写真 合成スタジオ

可愛いカラーの選び方

shutterstock_322250714

サイトを作る時は基本色は3~4つ決めておくと統一感のあるデザインに仕上がります。逆にそれ以上のカラーがあると統一感が無くどことなく落ち着かないサイトになってしまうので注意。

3~4のカラーも出来れば

  1. ベースカラー(メインを少し濃くしたカラー)
  2. メインカラー(基本カラー)
  3. サブカラー(メインカラーをものすごく薄くしたカラー)
  4. アクセントカラー(基本色に対するような目立つカラー)

とするとさらに統一感が増します。

ちなみにサンプルサイトは以下のカラーとなっています。

#FEB20A メインカラー
#FFFDE7 サブカラー
#F48FB1 メインカラー
#FCEDF2 サブカラー
#4fc3f7 アクセントカラー

このサイトはBabyらしさを出す為に少し配色を多めにしています。

明るい色の彩度の低いカラーを選ぶと可愛いサイトの印象になりますよ。

参考カラー配色で迷わない!シーン別配色見本32パターン
参考カテゴリー別配色アイデア100

カラーの参考になる無料サービス

2016-11-19_110152

MaterialDesignColors

カラーが一覧で確認でき、好みの色をクリックするだけでコピーできる便利なサイト。楽ちんなので愛用しています。

https://www.materialui.co/colors

2016-11-19_110329

ColorHexa

2016-11-21_134139

カラーを1つ指定すると様々なパターンの配色を一覧で見ることが出来ます。表示されたカラーを選択することでさらに違うバリエーションも確認できます。

拘りたい時にとても便利。

http://www.colorhexa.com/

2016-11-19_110432

HUE/360

2016-11-21_134443

クリックするだけで統一感のあるカラーパターンだけを簡単に作成することが出来ます。どうもサイトのカラーが落ち着かないという方にぜひ。

http://hue360.herokuapp.com/

ホームページ作成の流れ

2016-11-19_203339

作成の前提として、すでにWordPressのインストール、テンプレートの「micata2(無料)」の有効化までは作業が完了しており記事も数ページあると仮定して作成していきます。WordPressのインストール方法などがわからない方は以下を参考にして下さい。

DLmicata2(ミカタ)ダウンロード

gazou
micata2(ミカタ)ダウンロード及び規約

利用規約 サイト及びテーマに記載している機能は100%保障するものではありません。 当テーマ使用による如何なる不具合やトラブル、損害の責任は一切負いかねます。自己責任にてご利用下さいませ。 ダウンロー ...

続きを見る

素材の準備が整ったところでいよいよサイトの作成に入ります。

「micata2」ではHTMLやCSSなど難しい知識は不要です。管理画面からサクサクと作成していきましょう。ちなみにサンプルサイトで用意した主な画像は以下の通りです。

babylog

babylog-f

baby-h1

baby-h2

stf

順番に「ヘッダー用のロゴ」「フッター用のロゴ」「タイトルの背景アイコン」「hタグの背景アイコン」「スマホ用のフッターアイコン」です。これらが必ず必要というわけではありません。

ロゴも通常は1つで良いのですが今回はフッターに色を設定した為、黒では見にくくなり白色を用意しました。使用しているフォントは「ふい字」です。

参考日本語のかわいいフォント一覧

最初にしておきたいWordPressの基本設定

2016-11-19_121008

「サイトのタイトル」「キャッチフレーズ」にテキストを入力します。

「キャッチフレーズ」はサイト名(ロゴ)の下に表示されると同時にトップページの検索タイトルにもなります(テーマ管理で変更可能)

入れておくと便利なプラグイン

  • Image Widget(ウィジェットでの画像登録が簡単に出来ます)
  • Easy FancyBox(画像をクリックすると拡大画像がふわっとポップアップ表示されます。YouTube動画なども可)
  • TinyMCE Advanced(エディタの拡張機能)

メニューの設定

2016-11-19_121308

サンプルはブログタイプの為、スマホ以外はメニューを非表示にしていますが、必ず「メニュー」を作成して設定して下さい。当テーマでは「ヘッダー」「フッター」「サイドバー」「スマホ用」とそれぞれ別に作成する事も可能です。

作成したら赤枠の「テーマの位置」の設定を忘れないようにして下さい。きちんと設定しないとデザインが綺麗に反映されません。

最初にしておきたいテーマの基本設定

2016-11-19_123742

テーマオリジナルで用意してあるいくつかの設定を予め有効化しておきます。

※画像は「AFFINGER4」を使用しているため、「micata2」にはない機能も表示されています。ご了承下さい。

1- オリジナルカスタマイザーの使用を有効化

2016-11-19_122128

カスタマイザーでは様々なカラーやレイアウトの変更ができるようになっています。「オリジナルテーマカスタマイザーを使用する」にチェックを入れて下さい。

2016-11-19_134812

上記のようなカスタマイザーが使用できるよになります。

最初からいくつかのカラーパターンを用意していますが今回は「デフォルト」を選択しておいてください。

2- ヘッダー設定

2016-11-19_122148

2016-11-19_131913

デフォルトではヘッダーは「ロゴとキャッチフレーズ」と「電話番号とウィジェット」の2カラムとなっています。これを1つに統合してセンター寄せに変更します。

ついでにサイト名(ロゴ)とキャッチフレーズの上下を反対にします。

※サイト名とキャッチフレーズの管理画面からの変更は次回verにて実装致します。それまではお手数ですが以下の方法にてご変更下さい。

参考サイト名(ロゴ)とキャッチフレーズの位置を上下入れ替えたい

3- サムネイル画像設定

2016-11-19_122201

2016-11-19_132250

「一覧のサムネイル画像を丸くする」にチェックを入れて写真を可愛く丸くします。

サムネイルの画像は大きくしたり、非表示にも出来ます(サムネイル画像が無い時の画像も設定可能)

4- Googleフォントの設定

2016-11-19_122214

2016-11-19_132723

要所で表示される英数字をGoogleフォントで可愛くします。

サンプルでは女性に人気の高い「JosefiSans」を使用。Googleフォントを反映する範囲はカスタマイザーで選択できます。

5- トップページの設定

2016-11-19_122229

2016-11-19_132956

トップページに任意のコンテンツを読み込みます。

トップ用の記事は下部のエディタで直接作成する事も可能です。

6- 投稿・固定記事設定

2016-11-19_122247

2016-11-19_133136

「記事一覧・関連記事一覧などにカテゴリを表示する」で記事一覧の上にカテゴリを表示します。各カテゴリには個別のIDがクラスに付与されていますのでカラーを指定することも可能です。

7- スライドショーの設定

2016-11-19_122301

2016-11-19_133516

後述するカスタマイザーにてヘッダー画像を2つ以上設定した場合にスライドショーにします。表示方法は「フェードイン・アウト」「スライド右・左」の3パターンで速度を調節出来ます。

8- メニュー設定

2016-11-19_122314

今回はPCでのメニューを非表示にしました。ちなみに表示するとこんな感じ

2016-11-19_133831

メニューはヘッダー画像の上にしたり下に変えたりできます。

9-スマホ用ボタンの追加

2016-11-19_122338

2016-11-19_134007

スマホ用のメニューボタン「お便り」を作成します。

アイコン、テキスト、リンクが作成できボタンは2つまで追加できます。

10- ページTOPボタンを非表示

2016-11-19_122356

スマホで下部にイラストを表示するため、今回は「ページTOPボタン」を非表示にしています。

11- おすすめ記事一覧の作成

2016-11-19_122419

2016-11-19_134256

サイドバーや記事下に読んで欲しい記事一覧を作成します。記事はIDで複数指定できます。

表示位置は「サイドバー」「トップ」「投稿記事」など指定ができ、各カラーはカスタマイザーから変更可能です。

12- アイコン・ファビコンの設定

2016-11-19_122436

2016-11-19_134421

ブックマークやiPhoneで表示されるアイコンを設定します。

任意の画像を指定してアップロードするだけです。

13- 演出

2016-11-19_122448

2016-11-19_134653

「記事タイトルをフェードインする」で、記事が表示されてからふわっとタイトルを表示させて可愛さを演出します。

カスタマイザーでカラーとデザインの設定

2016-11-19_134812

「外観」>「カスタマイズ」でサイトのカラーなどを変更していきます。

主要な箇所は画像を添付するので拡大クリックで設定を確認して下さい。

おさらいとなりますがサンプルサイトのカラーは以下の通りです。

#FEB20A メインカラー
#FFFDE7 サブカラー
#F48FB1 メインカラー
#FCEDF2 サブカラー
#4fc3f7 アクセントカラー

0- 簡単!全体設定

2016-11-19_134933

1つづつ設定するのが面倒だ!という方は「全体カラー設定」にて基本カラーを指定し、「全体的に反映」にチェックを入れて保存するととりあえずいい感じになります。

1- ロゴの設定

2016-11-19_16h30_31

「ロゴの設定」ではヘッダーとフッターに表示するロゴ画像を設定できます。

babylog

ヘッダーとフッターの画像は別にすることも同じにすることも可能です。

ロゴ画像が無い場合はサイト名が表示されます。

2- ヘッダー画像の設定

2016-11-19_135705

「ヘッダー画像」にて①「新規画像を追加」でヘッダーに表示する画像を追加していきます。

2016-11-19_135854

スライドショーを使用する場合は他の画像とサイズをそろえる為に同じ画像を用意して「切り抜かない」を選択するか、デフォルトの画像サイズをテーマ管理にて任意のものに変更して「画像切り抜き」で揃えましょう。

※スライドショーを使用する場合は必ず2つ以上登録して下さい。

2016-11-19_135728

今回は使用しませんが、他にもヘッダー画像の下にさらに背景画像を指定できます。ヘッダー画像を透明度のあるPNG画像を設定することで面白いヘッダーにしたり出来ます。

3- 背景の設定

2016-11-19_140400

「背景画像」で「シンプルで可愛い背景画像」の項目でダウンロードした画像を設定ます。

背景の繰り返しは「タイル」を選択して下さい。

4- 見出しの設定

2016-11-19_163728

[+]メニューのカラー設定にて各見出しやテキストを設定できます。

記事のタイトルにはキツネの画像背景を設定しています。

baby-h1

他にもPC時のフォントサイズや背景(グラデーション)やボーダーなども設定可能です。

背景画像は

  • 横位置を左
  • 縦位置を真ん中
  • 背景画像を繰り返さない
  • 左の余白を90px
  • 上下の余白を10px

に設定しています。
余白は設定する画像のサイズによって適宜変更して下さい。

同様にh2タグにも画像の背景を指定してます。

2016-11-19_164133

この他にもh3タグやメニュー、フッターやヘッダーにも任意の背景画像や色を設定できます。(PNG画像であれば重ねることもOK※一部ブラウザを除く)

 

5- その他カラーやレイアウトの設定

基本エリア設定 

2016-11-19_184225

ヘッダー部の5pxの線とフッターの背景色、そして幅を100%に広げています。

2016-11-19_184205

当テーマではヘッダーフッターだけでなく、ヘッダー画像やメニューもカスタマイザーにてワイド化(幅を100%にする)できます。

今回は使用していませんが、「基本エリア設定 」では他に

  • ヘッダーエリアの背景画像
  • サイト名とキャッチフレーズの文字色
  • 記事エリアの背景色や透明度、記事エリア幅の変更

などが行えます。

[+]メニューのカラー設定

2016-11-19_184922

「[+]メニューのカラー設定」ではスマホのアコーディオンメニューのカラーを指定しています。

「[+]メニューのカラー設定」では他にグローバルナビやサイドバーメニューのカラー変更やWebアイコンの設定などが行えます。

[+]各テキストとhタグの見出し

2016-11-19_190012

2016-11-19_190137

[+]各テキストとhタグの見出しでは、各見出しタグのデザイン設定の他に

  • GoogleWebフォントの反映範囲
  • カテゴリの背景色
  • 投稿日時・ぱんくず・タグのカラー
  • 引用部分の背景色
  • NEW ENTRY & 関連記事
  • タグクラウド
  • 一括テキスト色強制変更
  • 記事内リンク色
  • 全てのリンクテキスト

などが変更できます。

サンプルサイトでは

GoogleWebフォントの反映範囲とカテゴリの背景色、投稿日時・ぱんくず・タグのカラー、引用部分の背景色、NEW ENTRY & 関連記事を画像のようにカラー指定しています。

※カラーに関しては前述のサンプルサイトで使用しているカラーを参考にして下さい。

[+]オプションカラー

2016-11-19_185252

2016-11-19_185324

[+]オプションカラーでは

  • 記事内のWebアイコン
  • 数字リストのカラー
  • チェックリストのカラー
  • table(表)全体のカラー
  • ウィジェットの利用
  • RSS(購読する)ボタン*
  • SNSボタン※一括
  • お知らせ
  • おすすめ記事
  • フリーボックスウィジェット
  • ウィジェット問合せフォームボタン
  • オリジナルウィジェットボタン
  • TOC+(目次)のカラー
  • コンタクトフォーム7送信ボタン

のカラーが変更できます。

各配色は画像のとおりです。

ウィジェットの設定

2016-11-19_192430

2016-11-19_192316

ウィジェットからサイドバーに様々なコンテンツが挿入できます。

※サンプルでは➀「オリジナルボタン」と②「フリーボックス」が挿入されていますが➀「オリジナルボタン」はPro版のみとなります。

FontAwesomeの利用

2016-11-19_18h07_36

サイトではWebアイコンの「FontAwesome」が使用できます。

2016-11-21_141552

例えばフリーボックスのタイトルにあるハートマークは

2016-11-21_141423

FontAwesomeのハートアイコンのページの赤枠の部分をコピーします。

2016-11-21_141442

ウィジェットの「03_STINGERフリーボックス」のタイトル部分の頭に貼り付けるだけでOKです。

広告エリアとスマホ用下部画像の設定

広告スクロール

2016-11-21_142641

サイドバーの下部で記事の長さに応じて追尾する広告エリアでは「おすすめの絵本」の広告を表示しています。

これはAmazonのリンクをA8.netのASP経由で作成しています。

2016-11-21_150734

A8でamazonを登録したら「商品リンク作成」にて作成したい商品を検索します。

2016-11-21_150847

サンプルでは

  1. 画像を表示する(160×160)
  2. 表示テキストの位置-左
  3. 枠線-なし

として赤枠のコードをコピーしておきます。

ウィジェットの「スクロール広告用」に「テキスト」をドロップして➀にタイトル、②に先ほどのコードを貼り付ければ完了です。

2016-11-21_150540

複数ある場合は続けて繰り返し貼り付けて下さい。

フッターの下部画像の登録

 これ以下は申し訳ありませんがAFFINGER4利用の方の為の解説となります。

IMG_2848

スマートフォンで閲覧した時にページTOPへ戻るボタンを設定する方法です。

2016-11-21_143429

ウィジェットの「スマートフォンのフッターに固定するウィジェット」を使用します(通常はここには広告を設置するエリアです)

プラグインで紹介した「ImageWidget」を有効化しておくとウィジェットに「ImageWidget」があるのでこれをドロップします。

➀「Select an Image」で登録したい画像を選択します。

2016-11-21_143325

②Linkに「#wrapper」と記述して③「FullSize」として④「保存」すれば完了です。

アドセンス広告の登録

2016-11-21_144755

アドセンス広告などはウィジェットにて登録できます。

2016-11-21_144456

  • 広告・Googleアドセンス用336px
  • 広告・Googleアドセンス用300px
  • 広告・スマホ用記事下のみ

にそれぞれウィジェットのテキストをドロップしてコードを貼りつけて下さい。記事下に自動で表示されます。

スマートフォンでは広告を続けて並べてはいけないので「広告・スマホ用記事下のみ」にはアドセンス以外の広告を貼りつけて下さい。

「広告・Googleアドセンス用300px」は記事内にてショートコードで自由に呼び出せます

2016-11-21_144602

※アドセンスの「ページ単位の広告(モバイルアンカー広告など)」は「スマートフォンのフッターに固定するウィジェット」エリアではなくファイルの「a-header-code.php(外観>テーマの編集)」に記載して下さい。

まとめ

長くなりましたが以上です。

最後に今回、「可愛い無料のホームページ・ブログを作る」で紹介した主なツールなどのリンクをまとめておきます。

マニュアルでは他のことも記載されているので宜しければご活用ください。

【おまけ】ホームページやブログの作成に使えそうな無料サービス

最後にその他のホームページやブログの作成に使えそうな無料サービスを列挙しておきます。世の中には知っていると便利なサイトがたくさんあるんですよね。

2016-11-18_210112

iconfinder

クレジットカードのブランドマークなど使える素材が沢山!

https://www.iconfinder.com/iconsets/creditcarddebitcard

2016-11-18_210332

FREE BGM

無料で使用できる「音楽」素材の配布サイト

http://dova-s.jp/

2016-11-18_210452

FLAT ICON DESIGN

可愛いフラットなアイコンが見つかります。

http://flat-icon-design.com/

2016-11-19_092104

AppStoreアイコン取得プログラム

ituneアプリのアイコンを取得できます。

http://masterpeace21.com/iTunes2.php

2016-11-19_085042

freepic

写真、ベクター画像からPSDファイルやSVGアイコンまであらゆるグラフィック素材が手に入るサイト

http://jp.freepik.com/

2016-11-19_084412

Veteezy

こちらも高品質なベクター画像が手に入るサイト

https://www.vecteezy.com/

2016-11-18_210812

FindA.Photo

カラーで写真素材を検索するユニークなサイト。思わぬ発想が生まれることも

http://finda.photo/

2016-11-18_210701

タダピク

全33の無料素材サイトを縦断検索する画像サイト

http://www.tadapic.com/

ツール系

2016-11-19_092145

.htaccessEditor

リダイレクトなど面倒な.htaccessファイルを簡単作成

http://www.htaccesseditor.com/

2016-11-19_092237

JuDress

住所を1クリックで英語表記に変換

http://judress.tsukuenoue.com/

2016-11-19_092422

CopyContentDetector

無料のコピペチェックツール

https://ccd.supersonico.info/

2016-11-19_092919

Webサイトの利用規約(ひな型)

Webサイトの利用規約などの汎用的なひな型がダウンロードできるサイト

http://kiyaku.jp/hinagata/gp.html

人気記事

kawaii 1

以前にWordPressテーマ「STINGER PLUS+」を公開した際に作成したサンプルサイトが「可愛い!」と特に女性の方から非常に好評をいただきました。 今回の参考サンプルサイト ただ現在「STI ...

2

ホームページを今まで沢山作ってきましたが、リニューアル案件以外の方はやはり「予算重視」である場合が多く、こちらの言う「大切」な事とか「重要な事」なんていう意見は「わかっているけど・・・」とはいうものの ...

tonkotu 3

今回はまず、ベースとなる「ホームページのタイトル」の考え方と下層ページコンテンツに何を作るべきかを考えていきます。 「タイトル設定」はまず最初に行うべき事であり、またホームページの命運を分ける最重要項 ...

-MANUAL

Copyright© ホームページ作成なら無料テンプレートのmicata(ミカタ) , 2016 AllRights Reserved Powered by AFFINGER4.