メディアの作り方|Lifeappを構成するテーマとカスタマイズ

今回は「メディアの作り方」と題して「Lifeapp」を構成しているモノについて詳しく説明していこうと思います。その中でも特にサーバーやドメインなどの基礎的な話から使用しているテーマやカスタマイズの情報についてお伝えするつもりです。

サーバーとドメイン

まず、メディアを作るにあたって必要なモノは「サーバー」と「ドメイン」です。

よく例えられるのは「サーバー = 土地」で「ドメイン = 住所」という言い回しで、ブログ・ホームページなどのメディア = 家 となるワケです。

土地が無ければ家が建てられないし、住所が無ければ誰も訪れられないという事で、自分のPC以外からメディアにアクセスしてもらうためにはこの2つが必ず必要だという事です。

レンタルサーバー:Xserver

エックスサーバー

このメディア「LIfeapp」を運用しているのは「Xserver」というレンタルサーバーで、かなりメジャーなサーバーになります。レンタルなので月間・年間契約で料金が発生します。

利点として第一に挙げたいのは「安定性が高い」ということです。アクセスが集中するとサーバーに負荷がかかりますが、個人的にはXserverでダウンしたという話はほとんど聞きません。

  • コンテンツの表示速度が速い
  • メディアが50個まで作成可能
  • 安定性が高い
  • データ容量が多い
  • 「https」への移行が簡単
  • 「CDN」の代わりのサービスがある

細かいところまで挙げたらキリがありませんが「とりあえずXserverにしておけば大丈夫」という感覚を抱かしてくれます。価格自体も他のレンタルサーバーと比べても同じ位なので、迷ったらXserverにしておけば問題ないと思います。

ドメイン:Xdomein

エックスドメイン

ドメインの取得に関しては、基本的にドコでもいいと思っているのですが、私は「Xdomein」を使っています。恐らくどこで取得してもほとんど値段は変わらないです。

ただ、やはり「Xserver」をつかっているのでそこの部分での連携がしやすいという理由で「Xdomein」を利用する様にしています。基本的な機能は全て揃っているので「Xserver」を使うつもりであれば「Xdomein」で問題ないですよ。

ワードプレステーマ

私のメディアは「ワードプレス」というブログ生成のためのサービスを利用して作っています。ちなみに利用は無料です。もちろん自分でHTMLというプログラムを書けたらワードプレスは必要ないのですが、ワードプレスを使えばプログラムの知識がない人でも運用が出来ます。

ワードプレスで運用するメディア・サイトを簡単におしゃれにする為にはまず「テーマ」を決めてから、様々な所をカスタマイズしていく必要があります。トップページ・サイドバー・記事のスタイルなどがテーマによって異なってくるので「テーマ」は重要な要素です。

無料のテーマもたくさんありますが、有料のテーマも存在し、やはり有料のテーマの方がデザイン性・カスタマイズ性に富んでいる場合が多いです。

テーマ:SANGO

この「Lifeapp」というメディアは有料テーマの「SANGO」を活用しています。

「SANGO」は2017年にリリースされた新作のテーマで、2018年度の現在でも頻繁にアップデートがされている良テーマです。作者は「Literally」「サルワカ」というおしゃれで有益な情報を教えてくれるメディアを運営しているCatNoseさんです。

SANGOのテーマ自体はかなりオシャレで、テンプレートを導入しただけでも素敵な1ランク上のメディアに仕上がると思います。ここで、少しSANGOのテーマの特徴と魅力について触れていこうと思います。

参考 SANGOテーマ購入用サイト

①デザイン性が高い

パッと見た瞬間に分かると思うのですが、非常にデザイン性が高いテーマになっています。Googleも採用しているマテリアルデザインの考え方が使われていて、人の行動や思考になじむ様な作りになっています。

配色も考えられていて、テンプレートでは珊瑚の生息するような淡い海をイメージさせます。テーマのカスタマイズに関しては、後ほど詳しく書こうと思いますが、あまりいじってしまうと「SANGO」の良さに欠けると思っているのでほどほどが良いと思います。

ただし、クセが強めテーマなので全くカスタマイズしないと、自分と同じ様なデザインのメディアに頻繁に出くわす様になるかもしれません。その辺りはバランスなので、SANGOのデザイン性の高さを生かせるようにカスタムしていきましょう。

②カスタマイズが簡単

テーマのデザインをカスタマイズしようとした時に、一般的なテーマだと細かい部分に手が届かないということが多々あります。

もちろんコードが書けてCSSもいじれる方であれば、自分で処理できるので問題ありませんが、プログラムをあまり知らない人にとっては、細かい部分までテーマ内のカスタムで変更可能なのは嬉しいところです。

また下記のサイトでは、公式で様々な「SANGO」に関する設定の仕方を解説しているので、このアドバイス通りに設定していけば、自分の思い描くようなメディアの概観を仕上げられる事が多いです。

参考 SANGOカスタマイズサルワカ

③記事の装飾がしやすい

記事の装飾に関しても普通は「CSSをいじって作成してショートコードを作って…」と色々工夫して作らなければいけないのですが、SANGOではデフォルトでかなりの数の装飾が可能で、記事を書いたときに様々な強調を手軽にすることが可能です。

  • Youtubeの貼り付け装飾
  • 見出しの装飾(40種類以上)
  • ボックスの装飾(30種類以上)
  • 文字の装飾(10種類以上)
  • 画像の装飾(5種類以上)
  • ボタンの装飾(20種類以上)
  • 引用ボックスの装飾

しかも、それぞれの装飾がテーマのデザインにあっていて、オシャレに仕上がっています。

④価格が抑えめ

有料テーマもかなり価格帯がバラバラなのですが、この「SANGO」は価格が抑え目だと思います。私が調べた14種類の有料テーマの平均を計算すると「¥16,400」SANGOの価格は「¥10,800」なので、他の有料テーマとは約1.5倍ほどの価格の違いがあります。

初めて有料テーマの価格を見ると「高くない?」と思ってしまうんですが、充実度を考えると十分に納得できて、むしろ安いように思えてきます。

もちろん始めは無料テーマでも問題ないと思いますが、少し時間が経ってから無料テーマでは限界を感じてテーマを移行しようと思った時に面倒なので、私としては初めから有料テーマを購入してしまっても良いのではないかと思っています。

⑤サポートが充実

個人的には一番気に入っているというか、テーマを購入する決め手になっている点なのですが、テーマに対するサポート体制が非常に充実しています。

先ほども紹介したように、テーマのカスタマイズ専用のページが作成されていて、様々な設定について細かく解説してくれています。また、各ページのコメント欄で質問がされていて、それに対して作者の方がレスをしているので、書いていないことはそこで補完可能です。

さらに、もしどこにも記載されていないような事で困った時には、直接お問い合わせをすることも可能なので安心です。ただ基本的には、ほとんど先ほどのサイトに載っているので、まずはそちらを確認してから問い合わせるようにしましょう。

そして、アップデートが適宜配信されているというのが信頼できる点で、不具合の修正という意味合いでのアップデートもあるのですが、その多くがユーザの使い勝手を向上させたり装飾の種類を増やしたりといった内容です。

リリースされた直後から使っていて、その時から既に使い勝手はよかったのですが、どんどん使いやすさが増していって、とても信頼できるテーマだと個人的には思っています。

カスタマイズについて

・人気記事の設置

こちらは下記の公式解説ページに詳しく書いてあるので、そちらを参照していただければと思うのですが、記事の投稿ページ一覧に「人気記事」を設置することが出来ます。

直接PHPファイルを変更する方法ウィジェットで設置する方法があって、私は後者で設定しています。前者の方法でもやってみたのですが、私の場合、画像の表示サイズが崩れてしまって上手く調整できなかったので、ウィジェットを活用する方法に切り替えました。

公式解説ページのそのままのコードだと「人気記事」と「人気記事・新着記事」という文字だけが表示されるようになって、個人的には上部のラインが揃っていないのが気になったので、CSSを調整して、文字の横にラインを入れるようにしました。

この「人気記事」はスマホ表示でも2列で表示されるため、タイトルが長いと縦長に伸びた印象を与えてしまいます。なので、人気記事に設置する記事はタイトルをある程度調整した方がいいでしょう。

参考 トップページに人気記事を設置する方法サルワカ

・プロフィール画像の丸い囲みの除去

PCで見たときにサイドバーに表示されているプロフィール画像について、通常は画像が○で囲まれて表示されています。そのままでも十分にオシャレなのですが、囲まれることで画像が縮小されてしまうので、私の画像の場合、顔とかが分かりにくくなってしまいます。

そこで、こちらの記事を参考にしてCSSをいじって、丸い囲みを除去するようにしました。囲みを除去すると背景画像と一体化するので、プロフィール画像は背景透過しているものを使うように変更しましょう。

・インフィード広告の挿入

広告に関してはもともと「SANGO」のテーマ自体に組み込む機能が設けられていて、ウィジェット部分にコードを貼り付けるだけで良い具合に広告の表示が出来るようになっています。

ただし、記事投稿ページに設置するようなインフィード広告に関しては挿入する機能が無かったため、カスタムしている方の記事を調べて導入してみました。参考にさせていただいたのは下記のサイトです。

CSSなどもいじる必要があるのですが、この広告の調整についてはPHPファイル自体を調整する必要があるので、FTPソフトが必要です。

FTPソフトについては、テーマ製作者CatNoseさんの下記ページでわかりやすく取り上げられているので、そちらを参考に扱うのが良いと思います。基本的にバックアップして臨めば怖いものではありませんよ

参考 WordPressでFTPソフトを使おうサルワカ

記事まとめ

今回は「Lifeapp」というメディアを構成しているモノについて記載してきましたが、基本的には下記のモノが揃っていれば、どんな人でも作り上げることが出来ます。

  • レンタルサーバー
  • ドメイン
  • WordPress
  • カスタムテーマ

なかなか初めてメディアを作り上げるのは大変だと思いますが、もし既に何かのブログサービスで記事を書いているような方であれば、独自ドメインを作って自分で城を構えてみるのも楽しいと思いますよ。