見た目をガラッと変える。Pelicanのテーマ(外観)を変更して自分好みのサイトにする方法
前回の記事では、マークダウンで書いた記事を実際にインターネット上へ公開するまでの手順を解説しました。自分の書いた文章がウェブサイトとして表示された瞬間の感動は、ひとしおだったのではないでしょうか。
無事に記事の公開ができたら、次にこだわりたくなるのがサイトの「見た目(デザイン)」です。
Pelicanの初期状態のデザインは非常にシンプルですが、実は世界中のクリエイターが作ったおしゃれなデザインに、まるで洋服を着せ替えるように一瞬で変更することができます。
サイトのデザインが変わると、記事を書くモチベーションもさらに高まります。
今回は、Pelicanの強力な機能の一つである「テーマ(外観)」の変更方法について、初心者の方にも分かりやすくステップ形式で解説します。当サービスのサーバー環境を活かした、安全でスマートなデザイン変更のコツを一緒に学んでいきましょう。
1. サイトの印象を左右する「テーマ」の魅力
無事に最初の記事が公開できたら、次にこだわりたいのがサイトの見た目です。Pelicanには、ウェブサイトのデザインを丸ごと切り替えることができる「テーマ」という仕組みが備わっています。
お洋服を着せ替えるようにデザインを変更できる
Pelicanの初期デザインは非常にシンプルですが、テーマを変更することで、スタイリッシュなビジネス風、親しみやすいブログ風、あるいは写真を主役にしたポートフォリオ風など、好みに合わせてガラッと雰囲気を変えることができます。
記事の本文(マークダウンファイル)はそのままで、外観のデザインだけを自由に着せ替えることができるのが、Pelicanのような静的サイトジェネレーターの大きなメリットです。
静的サイトだからこそデザイン変更も安全
一般的なブログシステム(WordPressなど)では、デザインを変更する際にシステム全体のデータやデータベースに不具合が起きるリスクが少なからずあります。
しかし、Pelicanの場合は手元のパソコンでデザインの変更 and 確認を行い、完成したHTMLデータだけをサーバーにアップロードします。そのため、万が一デザインの表示が崩れても、インターネット上のサイトに影響を与えることなく、じっくりと手元で修正作業を行うことができます。当サービスの安定したサーバー環境とも非常に相性が良い、安全な仕組みです。
2. 世界中のクリエイターが作ったテーマを探してみよう
Pelicanのテーマは、世界中の開発者やデザイナーがボランティアで作成したものが数多く公開されています。まずは、どんなデザインがあるのかを覗いてみましょう。
公式のテーマギャラリーを活用する
テーマを探す際は、Pelicanの公式がまとめているテーマギャラリーをチェックするのが一番の近道です。
シンプルなテキスト主体のものから、2カラム(2列構成)の本格的なブログ風デザインまで、様々なテーマが一覧で紹介されています。それぞれのテーマにデモ画面やサンプルが用意されていることが多いので、自分のサイトに合うものをじっくり探すことができます。
選ぶときのポイントは「シンプルさ」と「レスポンシブ」
たくさんのテーマを見ていると目移りしてしまいますが、初心者が選ぶときのポイントは2つあります。
1つ目は「構造がシンプルなもの」を選ぶことです。あまりに機能が多すぎるテーマは、後で設定をカスタマイズする際に難易度が上がってしまいます。
2つ目は「レスポンシブ対応(スマートフォン対応)」しているかどうかです。今の時代、ブログを読む人の多くはスマホからアクセスします。画面の横幅に合わせて自動で読みやすく調整されるテーマを選ぶことが、読者満足度にも繋がります。
3. 【実践】Pelicanのテーマを変更する3つのステップ
お気に入りのテーマが見つかったら、実際に手元のパソコンでテーマを適用してみましょう。手順は大きく分けて3つのステップです。
ステップ1:気に入ったテーマをダウンロードする
まずは、世界中のクリエイターが作ったテーマが集まっている、公式のPelicanテーマギャラリー(GitHub)にアクセスします。
一覧の中から気に入ったテーマを見つけたら、そのテーマの個別ページを開いてみましょう。ページが開いたら、画面右上にある緑色の「Code」と書かれたボタンをクリックし、メニュー内にある「Download ZIP」を選択してください。これでテーマのデータ一式が、圧縮されたフォルダ(ZIP形式)としてパソコンにダウンロードされます。
ダウンロードが完了したら、そのZIPファイルを展開しておきます。
次に、Pelicanのプロジェクトフォルダ(前回記事を書いたフォルダ)の中に、新しく「themes」という名前のフォルダを作成します。その中に、先ほど展開したテーマのフォルダ(例:my-favorite-theme)を丸ごと移動させてください。
ステップ2:設定ファイル(pelicanconf.py)にテーマ名を指定する
次に、Pelicanの設定ファイルである「pelicanconf.py」をメモ帳などのテキストエディタで開きます。
ファイルを開いたら、一番下の行などに以下のような「テーマを指定する設定」を1行書き加えます。
THEME = 'themes/my-favorite-theme'
これはPelicanに対して、「今からこのフォルダにあるデザインを使ってサイトを作ってね」と指示を出すための合言葉です。書き換えたら、ファイルを上書き保存します。
ステップ3:再ビルドしてサーバーへアップロードする
設定が完了したら、前回のステップ2と同様にコマンドプロンプト等の黒い画面を開き、以下の変換コマンドを実行します。
pelican content
これで、新しいデザインが適用されたホームページのデータ(HTML)が「output」フォルダの中に自動で再生成されます。
最後に、生成されたデータをWinSCPを使って当サービスのレンタルサーバーへアップロードすれば、インターネット上のサイトの見た目が新しいテーマへと切り替わります。
4. まとめ:お気に入りのデザインで楽しく情報発信を続けよう
今回は、Pelicanのサイトデザインをガラッと変える「テーマ」の変更手順について解説しました。
全体の流れをもう一度おさらいしてみましょう。
- 公式のPelicanテーマギャラリーから、気に入ったテーマをパソコンにダウンロードする
- プロジェクトフォルダ内に「themes」フォルダを作り、ダウンロードしたテーマのフォルダを配置する
- 「pelicanconf.py」を開き、THEMEの設定行を追加して上書き保存する
- 再度コマンドを実行してホームページのデータを生成し、サーバーへアップロードする
デザインが変わると、サイト全体の雰囲気が変わるだけでなく、記事を更新する楽しさも倍増します。世界中のクリエイターが作った素晴らしいデザインの中から、ぜひあなたのサイトのコンセプトにぴったりなものを見つけてみてください。
当サービスのレンタルサーバーであれば、手元でデザインの確認を行ってから安全に本番環境へ反映させることができるため、様々なテーマを安心して試すことが可能です。
お気に入りのデザインに身を包んだあなただけのオリジナルサイトで、これからも楽しく情報発信を続けていきましょう。