WordPressおしゃれテーマ【Ignis】のカスタマイズ方法〜プログラミングなしで動的サイトの作成〜

wordpress-ignis-customize-top WEB制作

Ignis(イグニス)は、トップページのテキストアニメーションが特徴的なWordPressテーマです。

通常はこのようなテキストアニメーションをもつサイトを作成するためには、Javascriptなどのフロントエンド系のプログラミング言語の習得が必要です。

しかし、Ignisはこのようなプログラミングはせずに、簡単に実装することができます。

Ignisデモ(クリックで再生)

お手軽に動画のようなサイトを作成できるので、フリーランスの自己紹介サイト等に重宝できると思います。

今回は、Wordpressテーマ「Ignis」の導入方法を解説します。

その他のおすすめのおしゃれなWordpressテーマは下記ページで紹介しているので、読んでいただけると嬉しいです。

スポンサーリンク

プラグイン導入

デモサイトのような記事をアニメーション表示するためには、プラグインの導入が必要です。

ダッシュボード→プラグイン→新規追加の検索欄で、「Jetpack」を検索します。

wordpress-Ignis-customize.002

Jetpack by WordPress.comのプラグインが表示されるので、インストールしましょう。

インストールしたら、ダッシュボード→Jetpack→設定に移動します。

wordpress-Ignis-customize.003

執筆の項目から、ポートフォリオをONにします。

①執筆の項目に移動

wordpress-Ignis-customize.004

②ポートフォリオをON

ここまでできたらプラグインの設定は完了です。

このプラグインは必須なので必ずインストールしておきましょう。

ポートフォリオの追加

ポートフォリオをONにしたら、ダッシュボードにポートフォリオの項目が追加されるので、新規追加をクリックして、記事を作成していきましょう。

wordpress-Ignis-customize.006

タイトルと内容、およびアイキャッチ画像を設定したら、「公開する」をクリックして記事を公開します。

wordpress-Ignis-customize.007

続いて、ダッシュボード→固定ページ→固定ページ一覧をクリックして、初めに表示されるホームページの設定をしていきます。

デフォルトではタイトルがHomeとなっている固定ページがフロントページ(ホームページ)になっているので、クリックして編集します。

wordpress-Ignis-customize.008

テンプレートを「Portfolio」として更新しましょう。

wordpress-Ignis-customize.009

できたらトップページに戻り、デモサイトのようなサイトレイアウトになっていれば、とりあえず大まかな外観は完成です。

カスタマイズ

続いて、細かいレイアウトの調整を進めていきます。

カラー変更

まずは、カラーの変更からやっていきましょう。

カスタマイズ→color→generalで各項目の色を変更することができます。

wordpress-Ignis-customize.010

primary colorは記事の背景色です。初期設定はピンクになっているので、お好みの色に変更してください。

secondary colorはヘッダーのテキストアニメーションの色です。こちらもお好みの色に変更しましょう。

ヘッダーの変更

続いて、ヘッダーを変更していきます。

カスタマイズ→header→header textに移動します。

wordpress-Ignis-customize.011

タイトルとサブタイトルを任意の文字列に変更してください。

そして、Animated typingの項目にアニメーションさせたいテキストを入力します。

この際、デフォルトでテキストの前についている「^」は設定上必要なので、消さないようにしましょう。

ヘッダー画像は、カスタマイズ→header→header mediaに移動すると変更することができます。

wordpress-Ignis-customize.012

コピーライトの変更

デフォルトでは、ページの一番下のフッター部分にIgnisのコピーライト表示があります。

そのままだとIgnisのホームページになってしまうので、任意のコピーライト表示に変更しておきましょう。

今回は、とりあえずコピーライト表示はいらないので消すことにします。

まず、該当のコピーライト表示の部分で右クリックして、検証をクリックしてサイトの構造を確認します。

wordpress-Ignis-customize.013
wordpress-Ignis-customize.014

.site-infoとCSSのクラス名がついていることが分かったので、カスタマイズ→追加CSSの項目に移動します。

wordpress-Ignis-customize.015

追加するコードは、

.site-info{

display:none;

}

と入力すればコピーライト表示を消すことができます。

wordpress-Ignis-customize.016

ここまでできたら完成です。

さいごに

今回、Wordpressのおしゃれなテーマ「Ignis」のカスタマイズ方法を解説しました。

やり方さえマスターすれば、非常にお手軽に動的なサイトを作成することができます。

WEB制作でお悩みの方に少しでも参考になれば幸いです。

お知らせ

当ブログでは、サイト制作・Wordpressカスタマイズ等でお悩みの方に向けて、WEB制作サービスを提供しています。

ぜひご相談・ご依頼いただけると幸いです。

サービスの具体的な内容はポートフォリオサイトにて紹介しておりますので、サイトだけでも見ていただけると嬉しいです。

WEB制作でお困りの方はこちら(ポートフォリオサイト)

最後まで読んでいただきありがとうございました。

コメント

タイトルとURLをコピーしました