WordPress無料テーマ【Astrid】のカスタマイズ方法〜とにかく早くおしゃれなコーポレートサイトを作りたい人向け〜

wordpress-astrid-customize-top-image WEB制作

WordPressの無料テーマ「Astrid」は、おしゃれなテーマでありながら、素早くコーポレートサイトやポートフォリオサイトを作ることができるテーマです。

デザインの幅はあまり広くないですが、手軽に今時のモダンなサイトを立ち上げたい人にオススメのテーマです。

公式デモサイトでも、スピーディなセットアップを売りにしています。

Astrid demo

さすがにトップページを5分で作成するのは無理ですが、慣れれば小一時間でサイト作成が可能になります。

今回は、Astridのカスタマイズ方法を解説していきます。

スポンサーリンク

テーマ・プラグインのインストール

まずは、テーマとプラグインのインストールから始めていきましょう。

ダッシュボード→外観→テーマ→新規追加ページに移動します。

wordpress-astrid-customize1.002
Astrid インストール1

検索欄に「Astrid」と入力し、テーマをインストール・有効化してください。

wordpress-astrid-customize1.003
Astrid インストール2

また、ダッシュボード→プラグイン→新規追加ページで「One demo click import」を検索して、インストールしておきましょう。

wordpress-astrid-customize1.004
プラグイン インストール

インストールできたら、プラグイン→Import DEMO dataに移動し、左下の「Import DEMO data」ボタンをクリックすると、DEMOデータをインストールすることができます。

wordpress-astrid-customize1.005
デモサイトのインポート1
wordpress-astrid-customize1.006
デモサイトのインポート

ここまでできたら、トップページに戻りましょう。

図のような画面が表示されたらテーマ・プラグインのインストールまで終了です。

wordpress-astrid-customize1.007
デモサイト

ウィジェットの追加

続いて、ホームページにウィジェットを追加して、ホームページのコンテンツを充実させていきましょう。

各ウィジェットは、ダッシュボード→外観→カスタマイズ→ウィジェット→ホームページに移動して、ウィジェットを追加ボタンで追加します。

wordpress-astrid-customize2.001
ウィジェットのカスタマイズ

サービスウィジェット

サービスウィジェットを追加したら、デフォルトでサービスが表示されるので、一旦公開(保存)してトップページに戻りましょう。

wordpress-astrid-customize2.002
サービスウィジェットのカスタマイズ1

サービスのタイトルをクリックすると、サービスページに移動するので、「固定ページを編集する」ボタンをクリックしてサービスページを編集します。

wordpress-astrid-customize2.003
サービスウィジェットのカスタマイズ2
wordpress-astrid-customize2.004
サービスページの編集1

タイトルと内容、アイキャッチ画像を変更したら、トップページに戻ります。

wordpress-astrid-customize2.005
サービスページの編集2

サービスの表示が変わっていれば、サービスページの変更は完了です。

wordpress-astrid-customize2.006
サービスページの編集3

スキルウィジェット

続いて、サービスウィジェットと同様の要領でスキルウィジェットを追加します。

タイトル・スキルの項目に各値を入力していきます。

wordpress-astrid-customize2.007
スキルウィジェットのカスタマイズ1

下の方の項目で、ウィジェット幅を変えることもできます。

他のウィジェットと横に並べたい場合は、ウィジェット幅の項目を変えましょう。

wordpress-astrid-customize2.008
スキルウィジェットのカスタマイズ2

最大3個までウィジェットを横並びにすることができます。

テキストウィジェット

テキストウィジェットは結構使い勝手の良いウィジェットです。

他のウィジェットと横並びにしてウィジェットの説明をいれることもできるし、画像を配置することもできます。

wordpress-astrid-customize2.009
テキストウィジェットのカスタマイズ1

今回は、ウィジェット幅を1/2にして、スキルウィジェットと横並びにしてみました。

wordpress-astrid-customize2.010
テキストウィジェットのカスタマイズ1

データウィジェット

データウィジェットはアイコンを設置して、視覚的にデータを魅せることができるウィジェットです。

アイコンはFont Awsomeを使います。

Font Awsomeはデータウィジェットの設定項目の上にある「こちらから」のボタンをクリックしてページに移動できます。

wordpress-astrid-customize2.011
データウィジェットのカスタマイズ

Font Awsomeのページに移動したら、目的のアイコンをページ上の検索欄に入力して探してください。

wordpress-astrid-customize2.012
Font Awsomeのサイト
wordpress-astrid-customize2.013
Font Awsomeの検索画面

使いたいアイコンが見つかったら、アイコン上にあるコードをコピーして(Htmlのアイコンの場合は、fa-html5)、アイコンの項目に貼り付けます。

Font Awsomeのアイコンページ

アイコンが無事表示できたら変更終了です。

wordpress-astrid-customize2.011
データウィジェットのカスタマイズ

プロジェクトウィジェット

プロジェクトウィジェットを追加したら、サービスウィジェットと同様に、デフォルトでウィジェットを表示してくれます。

プロジェクトの個別ページを変更する前に、ウィジェット編集欄の「コンテナーを削除しますか?」の欄にチェックを入れておきましょう。

wordpress-astrid-customize3.001
プロジェクトウィジェットのカスタマイズ

こうすることによって、プロジェクトウィジェットをページに全幅表示できるようになります。

ウィジェットが編集できたら、続いて個別ページを編集していきます。

ダッシュボード→固定ページ→プロジェクトページに移動し、「編集」をクリックすると編集ができるようになります。

wordpress-astrid-customize3.002
プロジェクトページの編集1

タイトルと本文、アイキャッチ画像を変更して、更新します。

wordpress-astrid-customize3.003
プロジェクトページの編集2

トップページに戻り、プロジェクトの画像が変わっていれば編集終了です。

wordpress-astrid-customize3.004
プロジェクトページの編集3

クライアントウィジェット

最後に、カスタマイズページに移動し、サービスウィジェットやプロジェクトウィジェットと同様にクライアントウィジェットを追加します。

これもデフォルトでクライアントが表示されるので、あとで個別ページを編集しておきましょう。

ここで注意点があります。

デフォルトのクライアントページはアイキャッチ画像が白色なので、カスタマイズの変更がわかりにくいです。

wordpress-astrid-customize3.005
クライアントウィジェットのカスタマイズ

なので、クライアントウィジェットは背景を変えておきましょう。

ダッシュボードからメディアファイルに移動すると、画像のURLを確認できるので、それで背景にしたい画像をチェックしておきます。

wordpress-astrid-customize3.006
画像のURLデータ取得

そのURLをカスタマイズ画面の「背景画像URL」の項目にペーストします。

すると図のように背景が表示され、クライアントが表示されていることが分かります。

wordpress-astrid-customize3.007
クライアントウィジェットのカスタマイズ2

あとは、クライアントの個別ページに移動し、アイキャッチ画像を変更したら終了です。

テーマの不便な点

このテーマはスピーディに必要なコンテンツをサイトに反映できるので、コーポレートサイトやポートフォリオサイトを素早く作りたい人にぴったりなテーマなのですが、少し不便に感じた点もあるのでその点についても説明しておきたいと思います。

色の変更が難しい

色の変更はカスタマイズ画面から簡単にできるのですが、データウィジェットの色が全て同じ色になってしまいます。

例えばWordpressの公式ロゴは青色なので、カスタマイズで青色に変更しようとすると、その他のアイコンも同じように青色になってしまいます。

wordpress-astrid-customize-skill
ロゴの色の編集

サイトの統一感を出すという意味では良いのかもしれませんが、ロゴを個別に色変更したい場面も出てくると思うので、その点では不便に感じました。

コピーライトの変更が難しい

コーポレートサイトを作るとなると、サイトの下にあるコピーライト表示の変更は必須なのですが、簡単に変更できないようになっています。

このテーマの場合、コピーライトの変更は、2つ余計な手間がかかってしまいます。

1つ目:子テーマの作成

コピーライトを変更するためには、テーマのコード自体を変更しないといけないので、コード変更用に子テーマを作成する必要があります。

子テーマの作成方法は下記記事(WordPress Quest 様)がめちゃくちゃ分かりやすいので参考にしてみてください。

[実践編 Level 11.] WordPress(ワードプレス)テーマ|子テーマの作成方法
テーマをインストールしたら、次は「子テーマ」を作成しよう。WordPress(ワードプレス)には「子テーマ」という概念があり、テーマのカスタマイズは主にこの「子テーマ」を使ってやっていく。このレベルでは、子テーマの簡単な説明と、設定方法を攻

2つ目:footer.phpの編集

子テーマを作成したら、footer.phpを変更していきます。

footer.phpの38行目が別のphpファイルを読み込むようになっているので、この行を削除して、以下のコードに書き換えます。

wordpress-astrid-customize3.008
footer.phpの編集
  1. <p><?php echo "任意の文字列(例)Copyright 2020 Photo lab."; ?></p>

※01.は省いて<p>以降をコピペしてください

編集後のコードはこちら

wordpress-astrid-customize3.009
footer.php編集後

コードを編集したら、保存してトップページに戻ります。

wordpress-astrid-customize3.010
コピーライト表示変更後

コピーライトがきちんと変更されていたら終了です。

さいごに

この記事では、Astridのテーマのカスタマイズ方法について解説しました。

WordPressテーマ「Astrid」は、スピーディにコーポレートサイトに必要なコンテンツを持ったサイトを作成できるので、とにかく早く、おしゃれなサイトを作りたい人におすすめです。

テーマのカスタマイズでお困りの方の手助けに少しでもなることができたなら幸いです。

また、他のおしゃれテーマについてもまとめているので、読んでいただければ幸いです。

お知らせ

当ブログでは、WEB制作サービスを行っております。

WEB制作でお困りの方は、ぜひご相談・ご依頼いただければ幸いです。

ポートフォリオは下記ページをご覧ください。

些細なご相談でも大丈夫です。見ていただけるだけでも幸いです。

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

コメント

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