ブログサイト作成講座【有料テーマの導入】

こんにちは!

ひでです。

今回はずっとめんどくさくて
無料版のままにしていたワードプレステーマを
有料版にしてきました!

いままではデザインが気になったら、
自分でCSSなどをいじってたんですけど、
デザイン素人の僕には、なかなかの労力だったので、
今回、有料版を購入することを決めました。

ITエンジニアなら簡単に作れるんじゃないの?
って思う方もいるかもしれませんが、

残念ながら、つくれません。。。

プログラムが書けるといっても、
WordPress自体の勉強をしないと、高度なカスタマイズはできないんですよ。。

いままでは、だましだましやってきましたが、
本気でブログやるなら、有料テーマへの課金は必須ですね。

 

 

この記事では、有料テーマの導入方法と、
導入後の設定方法について解説していきます!

この記事を読むと、

このブログと同じっぽいデザイン、レイアウトの
ブログ作成方法を完全マスター

できます!

オシャレかどうかはわかりませんが、
サイトの雰囲気は一気にかわりますよ!

では、さっそく見ていきましょう!

 

 

  1. 有料テーマの購入
  2. サイトの基本色を変える
  3. サイドバーにプロフィールを表示する
  4. おまけ:ブログアイコンの変更

 

 

①有料テーマの購入

今回導入するテーマはこちら
SWALLOW(スワロー)です。

僕が買ったとき、9,900円でした。

このシンプルで洗練された感じに、惚れたので買いました!(そのまんまですね。笑)

この製作会社、OPENCAGEのテーマは
スワローだけでなく、
どれもシンプルでかっこいく、おすすめです。

気になる方は見てみてください。

ブロガー専用のWordPressテーマ「OPENCAGE」

②サイトの基本色を変える

テーマの導入がおわったら、
早速サイトテーマの色を変更していきましょう。

WordPressメニュー「外観>カスタマイズ>サイトカラー設定」から
サイトの基本色の変更ができます。

今回、僕が変更したのは、こちら。

・ヘッダー背景色
・記事ページ見出し(H2)背景

どんな色にするかは、
こちらのサイトを参考にして決めました。
(自分で色をつくるのって大変なので。。)

Web カラー 配色パターン一覧リスト

このサイトではそれぞれの色が、
見たひとにあたえる印象も一緒に解説されていて、おすすめです。

あなたのサイトに合った色を探す参考にしてみてください!

③サイドバーにプロフィールを表示する。

こんなプロフィールを作ることができます。

けっこう簡単。3ステップで作成から設置までできます!

①プロフィール画像のアップロード

WordPressメニュー「メディア>新規追加」から、
プロフィール画像のアップロードをします。

アップロードが終わったら、
画像のURLをコピーしておいてくださいね。

②サイドバーにカスタムHTMLを追加する。

WordPressメニュー「外観>ウィジェット」から、
カスタムHTMLを「【PC用】サイドバー」に追加します。

③カスタムHTMLを設定します。

カスタムHTMLをこんな感じに設定します。

以下のコードをコピーして、
太字の部分を変更すれば、簡単に作成できます。

・タイトル:
プロフィール(なんでもいいです)

・内容:

<div>
<center>
<img alt="プロフィール"  style="border-radius:50%;" 
src="先ほどコピーしたプロフィール画像のURL" width=”180″ height=”180″>
</center>
</div>
<center>
<h4 style=”text-align:center;display:block;margin:1em auto 0.5em”>あなたのお名前</h4>
</center>
<br>
プロフィールの内容
<br>

これで保存したら、プロフィール画像は完成です!
実際にブログにアクセスしてみると、ちゃんと表示されているはずです!

おまけ:ブログアイコンの変更

ブログのアイコンが
ずっとデフォルトのままだったので、
これを期に変えました。

これですね。ファビコンっていうらしいです。

このファビコン、
地味に何をいれたらいいか分からず、
放置してしまっているひとも多いのではないでしょうか。(まさに僕もそうです。笑)

と、いうことで、
なんかないかな~、って探したところ、
いい感じのサイトがあったので紹介します。こちらです。

SVG SISH

こんな感じのアイコン画像を、
SVGとPNGで無料でダウンロードできます。
アイコンの種類も豊富なので、選びたい放題です。

ファビコンの変更は、WordPressメニュー
「外観>カスタマイズ>サイト基本設定>サイトアイコン」
からできます。

と、いうことで、
僕は有袋類代表、カンガルーをセットしておきました。

最後に

一部、駆け足で解説した部分もありましたが、
いかがだったでしょうか。

また分からない部分がありましたら、
TwitterのDM等で聞いていただければ、出来る限り対応いたします!

お気軽にどうぞ~。

では、あなたの素敵なブログライフを!

ばいやい。