このブログサイトはwordpressを使っています。
ブログやWebサイトを作る場合、今やいろいろなサービスやソフトウェアがありますが、僕がwordpressを選んだのは下記の理由からです。
- 外観をオシャレでそれっぽくしたかった
- オリジナリティを出したかった
- 楽に運用したい
- ノウハウや解説しているサイトが豊富
- アフィリエイトやgoogleアドセンスをしたい
- 書籍が豊富
今やブログと言えば、wordpressで作るでしょ？と言わんばかりに、利用実績は多いです。ネットで調べれば大半のことは出てきます。
結構、HTMLやCSSの知識がないと難しいと言われていますが、僕の場合は一応元SEなので、特にハードルは感じませんでした。CSSを直接かけた方が、痒いところに手が届く感じ。
ただ、スクラッチで作るよりは、何百倍も楽ですし、特に外観をいじったりせず、ブログ運用のみであれば、ある程度パソコンやネットサービスが使える人であれば、困らないと思います。
wordpressの外観を変更する場合は、先ずは好みのテーマを選びます。僕は、Simplicityというテーマを使っています。
Simplicityの使い方
上記からSimplicity2をダウンロードして、wordpressにインストールします。
Simplicityを使う2つの理由
- とにかくシンプルなデザインにしたかった
- SEO対策のされているテーマだから
ブログでお金を稼ぐことを目標にしているので、SEO対策してあるかどうかは、かなり大きなポイントになりました。どのサイトでも評判が良いし、作成者の方が、ブログで使い方等を解説されているので、情報に困らない点も魅力です。
Simplicityでデザインをカスタマイズする
Simplicityのデザインはとてもシンプルで洗練されています。ただ、せっかくブログを運営するのであれば、サイトの個性はどんどん出していきたいですよね。
外観＞＞CSS編集から直接CSSを記入することができます。これで、自由にデザインが変わります。
するとCSSの編集画面になります。ここで記述したCSSがプレビューに反映されるのですが、タグやid, classがわかりません。なので、書けません。
その為、デザインの変更したい個所のタグやid, classをgoogle chromeのデベロッパーツールを使って検索します。
上記、画像の赤い丸の部分をクリックするとCSSが開きます。それが下の画像です。
赤い矢印の部分を追記しました。すると左側のサイト表示が変更されます。これで、どこがどのように変わるのかを確認しながら変更していくことができます。
また、デベロッパーツールは入力補完機能が優秀なので、プロパティの値があいまいでも表示されるので、作業効率が格段にアップします。
満足いくデザインになったら、記述をコピーして、wordpessのCSS編集にペーストします。
これで、自由にサイトデザインを変更することができます。
Webサイト作成の際は、Chromeのデベロッパーツールは必需品ですので、ぜひ活用してみてください。
コメント