研究室ホームページをwordpressでおしゃれに作成する方法まとめ

「研究室のサイトも古いし、今っぽくかっこよくしたいな~」

「ブログやニュースを簡単に投稿したいからwordpressがいい」

「けど、どういう流れで研究室のサイトをリフォームすればいいかわからない」

この記事では、このようなお悩みを応用情報技術者の筆者が状況別で網羅的に解説します!

 

研究室ホームページリフォームの流れ

まずは、簡単に研究室ホームページリフォームの流れをご紹介します。

  1. wordpressでサイト構築する
  2. wordpressのテーマを選ぶ
  3. テーマをカスタマイズする(上級者向け)
  4. 画像の力でもっとおしゃれにする

流れはシンプルでこんな感じの流れになります。では、順に見ていきましょう!

ちなみに、IT系は苦手でなんか難しそうだな…。という方には、研究室ホームページ作成特化型のlabbyというサービスもあります!お安く簡単にかっこよく作成することが出来るので、ぜひご覧ください。

とりあえずデモを見たい方はこちら(登録等不要)

 

wordpressでのサイト構築方法

新規でサイト構築する場合

新規でサイト構築する場合は、まずはサーバーを借りる必要があります。サーバーの選び方などは研究室ホームページのサーバー選択についてをご覧ください。

 

既存のサイトが既にある場合

既存のサイトがある場合は、既にドメインやサーバーもレンタルしているか持っていると思います。カラフルボックス等のレンタルサーバーがあればとても簡単にwordpressを導入することが出来るのですが、特に独自サーバー等であってもそれほど難しくはありません。初心者でも簡単にできる!WordPressをインストールする方法こちらを参考にすれば、wordpressを問題なく導入できますので、参考にしてください。

 

wordpressのテーマ選びが大事

wordpressには、テーマと言われるテンプレートが存在します。このテーマを使用することによって、簡単におしゃれなサイトを構築することが可能になります。WordPressテーマ50選にておしゃれなテーマがたくさん紹介されていますが、その中でも研究室サイトであれば私のおすすめはAscend(無料)になります。

迷ったら、Ascendを使えば問題ないでしょう。ちなみに、Ascendを使った研究室は

のようになります。研究室のサイトとしてはかなりおしゃれではないでしょうか。

テーマ選びが終われば、次はテーマのカスタマイズが必要なのですが、テーマごとにカスタマイズの方法が多少違ってきます。ここからは、筆者おすすめのAscendでのカスタマイズのみご紹介させていただきます。

 

テーマのカスタマイズ

まず、外観  >  Getting Start  から、Kadence Toolkitをクリックし、インストールします。すると、外観にTheme Options が増えているはずですので、ここから、各種項目をセットしていきます。

とりあえず、下記の項目を設定すれば、先ほどの例に示したサイトのようになります。それでは、テーマのカスタマイズをしていきましょう!

 

HeaderSetting

Enable Sticky Parts of Header?
Yes – only main header
Enable shrinking header when sticky?
On
Header Shrunk Height
66

 

Logo Settings

Logoをアップロード
 

Transparent Header Options

Enable Transparent header until scrolled by default?
On

 

Home Page Header

Enable Typed Text instead of standard
On
Home Page Title Typed Text
Cool Labo

    Enable Typed Loop
    Home Page Title Height
    555
    Enable background parallax
    On

    下から2列目の名前のない項目で画像をアップロードし、background-sizeでcoverを選択します。
     

    Mobile Home Header

    スマホ画面ではデザインが崩れてしまう場合は、先ほどの “Home Page Header” 項目同様にスマホ用のカスタマイズをします。
     

    メニュー

    外観  >  カスタマイズ  >  メニュー

    から好きなメニューを作成します。例のサイトではHome/Member/Reserch/Newsの4項目で作成しています。

     

    お疲れ様でした!他にもカスタマイズできる項目はたくさんありますので、もっとカスタマイズしておしゃれなホームページを目指してみてください!

     

    おしゃれなサイトは画像できまる

    もちろん、おしゃれなサイトにテーマ選びはすごく大事なのですが、それと同じくらい画像選びも大切です。サイトの大部分は画像が占めますからね。

    そこで、おしゃれな画像がたくさんある無料のおすすめ画像サイトを2つだけ紹介します。

    1つは、Unsplashです。今回の例サイトの画像はすべてこちらのサイトの画像から作っています。海外のサイトですが、本当におしゃれな画像ばかりです。無料なんて信じられません…。

    2つ目は、PhotoACです。こちらは日本語のサイトなので、海外サイトが苦手な人にはおすすめです。

    これらの無料の写真サイトを使って、綺麗なサイトに仕上げましょう。

     

    まとめ

    技術の発展で研究室サイトも初心者でも作成できるようになってきました。しかし、手間がかからないかと言われると、それなりに手間はかかってしまうようです…。

    「挑戦してみてもやっぱり無理だった」「そんなに時間をかけてられない!」という方には、研究室ホームページ作成特化型のlabbyというサービスもあります!お安く簡単にかっこよく作成することが出来るので、ぜひご覧ください。

    とりあえずデモを見たい方はこちら(登録等不要)