Ignis(イグニス)は、トップページのテキストアニメーションが特徴的なWordPressテーマです。
通常はこのようなテキストアニメーションをもつサイトを作成するためには、Javascriptなどのフロントエンド系のプログラミング言語の習得が必要です。
しかし、Ignisはこのようなプログラミングはせずに、簡単に実装することができます。
お手軽に動画のようなサイトを作成できるので、フリーランスの自己紹介サイト等に重宝できると思います。
今回は、Wordpressテーマ「Ignis」の導入方法を解説します。
その他のおすすめのおしゃれなWordpressテーマは下記ページで紹介しているので、読んでいただけると嬉しいです。
プラグイン導入
デモサイトのような記事をアニメーション表示するためには、プラグインの導入が必要です。
ダッシュボード→プラグイン→新規追加の検索欄で、「Jetpack」を検索します。
![wordpress-Ignis-customize.002](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.002-e1588291262367-1024x463.png)
Jetpack by WordPress.comのプラグインが表示されるので、インストールしましょう。
インストールしたら、ダッシュボード→Jetpack→設定に移動します。
![wordpress-Ignis-customize.003](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.003-e1588291245511-1024x465.png)
執筆の項目から、ポートフォリオをONにします。
①執筆の項目に移動
![wordpress-Ignis-customize.004](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.004-e1588291231189-1024x473.png)
②ポートフォリオをON
![](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.005-e1588291216750-1024x468.png)
ここまでできたらプラグインの設定は完了です。
このプラグインは必須なので必ずインストールしておきましょう。
ポートフォリオの追加
ポートフォリオをONにしたら、ダッシュボードにポートフォリオの項目が追加されるので、新規追加をクリックして、記事を作成していきましょう。
![wordpress-Ignis-customize.006](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.006-e1588291198632-1024x473.png)
タイトルと内容、およびアイキャッチ画像を設定したら、「公開する」をクリックして記事を公開します。
![wordpress-Ignis-customize.007](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.007-e1588291182612-1024x468.png)
続いて、ダッシュボード→固定ページ→固定ページ一覧をクリックして、初めに表示されるホームページの設定をしていきます。
デフォルトではタイトルがHomeとなっている固定ページがフロントページ(ホームページ)になっているので、クリックして編集します。
![wordpress-Ignis-customize.008](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.008-e1588291168411-1024x463.png)
テンプレートを「Portfolio」として更新しましょう。
![wordpress-Ignis-customize.009](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.009-e1588291152453-1024x465.png)
できたらトップページに戻り、デモサイトのようなサイトレイアウトになっていれば、とりあえず大まかな外観は完成です。
カスタマイズ
続いて、細かいレイアウトの調整を進めていきます。
カラー変更
まずは、カラーの変更からやっていきましょう。
カスタマイズ→color→generalで各項目の色を変更することができます。
![wordpress-Ignis-customize.010](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.010-e1588291137812-1024x471.png)
primary colorは記事の背景色です。初期設定はピンクになっているので、お好みの色に変更してください。
secondary colorはヘッダーのテキストアニメーションの色です。こちらもお好みの色に変更しましょう。
ヘッダーの変更
続いて、ヘッダーを変更していきます。
カスタマイズ→header→header textに移動します。
![wordpress-Ignis-customize.011](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.011-e1588291118363-1024x471.png)
タイトルとサブタイトルを任意の文字列に変更してください。
そして、Animated typingの項目にアニメーションさせたいテキストを入力します。
この際、デフォルトでテキストの前についている「^」は設定上必要なので、消さないようにしましょう。
ヘッダー画像は、カスタマイズ→header→header mediaに移動すると変更することができます。
![wordpress-Ignis-customize.012](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.012-e1588291104857-1024x468.png)
コピーライトの変更
デフォルトでは、ページの一番下のフッター部分にIgnisのコピーライト表示があります。
そのままだとIgnisのホームページになってしまうので、任意のコピーライト表示に変更しておきましょう。
今回は、とりあえずコピーライト表示はいらないので消すことにします。
まず、該当のコピーライト表示の部分で右クリックして、検証をクリックしてサイトの構造を確認します。
![wordpress-Ignis-customize.013](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.013-e1588291086314-1024x506.png)
![wordpress-Ignis-customize.014](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.014-e1588291072292-1024x473.png)
.site-infoとCSSのクラス名がついていることが分かったので、カスタマイズ→追加CSSの項目に移動します。
![wordpress-Ignis-customize.015](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.015-e1588291052648-1024x471.png)
追加するコードは、
.site-info{
display:none;
}
と入力すればコピーライト表示を消すことができます。
![wordpress-Ignis-customize.016](https://chemizuki.com/wp-content/uploads/2020/05/wordpress-Ignis-customize.016-e1588291036694-1024x473.png)
ここまでできたら完成です。
さいごに
今回、Wordpressのおしゃれなテーマ「Ignis」のカスタマイズ方法を解説しました。
やり方さえマスターすれば、非常にお手軽に動的なサイトを作成することができます。
WEB制作でお悩みの方に少しでも参考になれば幸いです。
お知らせ
当ブログでは、サイト制作・Wordpressカスタマイズ等でお悩みの方に向けて、WEB制作サービスを提供しています。
ぜひご相談・ご依頼いただけると幸いです。
サービスの具体的な内容はポートフォリオサイトにて紹介しておりますので、サイトだけでも見ていただけると嬉しいです。
最後まで読んでいただきありがとうございました。
コメント