simplicityのカスタマイズでWordPressブログのレイアウトを調整する方法

前回はウィジェットでブログの構造をカスタマイズしました。

⇒前回の記事はこちら

構造が出来あがったら、今度は色やデザインなど、細部のデザインに自分のこだわりを出していきましょう。

※ここから先は、テーマに「simplicity」を使用している前提で進んでいきます。

ウィジェットでブログの構造を整えた状態がこちらにです↓

少し整いはしたものの全体的に白黒で、パッと見かなり地味ですね。

これではいくらいい記事を書いたとしても、訪問者はすぐにこのブログから立ち去ってしまいます。

そこで今回は、WordPressの「カスタマイズ」機能を使ってレイアウトをきれいにしていきます。

カスタマイズの使い方

カスタマイズページには以下のように行きます。

カスタマイズを開くと下の画像のような画面が開きます。

画面左側がカスタマイズ項目になります。

ここで具体的な色やデザインを編集していきます。

画面右がブログのプレビューです。

simplicityの場合は、プレビューはスマホでの見え方になります。

パソコンでの見え方を確認したい場合は、別タブでブログを開いておきます。

さっそく、ひとつひとつ設定していきましょう。

サイト基本情報

ブログのタイトル、ブログのキャッチフレーズ(サイトの説明)、サイトのアイコン(ブラウザのタブにつくロゴのようなもの)を編集することが出来ます。

ブログのタイトルは、一度決めたら変えない方がいいとされています。

ブログのキャッチフレーズは、初期状態では英字が書かれているので簡単なブログの説明を入力しましょう。

サイトのアイコンとは、ブラウザでサイトを開くと、タブに開いているサイトのアイコンが表示されているのを見たことありませんか?

上の画像は、左から「Wikipedia」「Ameba」「Yahoo!」のページを開いたタブです。

それぞれのタブの左側に表示されているアイコンを「ファビコン」と言います。

「サイトのアイコン」の設定をすれば、ファビコンを設定することが出来ます。

「画像を選択」ボタンをクリックします。

「ファイルを選択」をクリック。

好きな画像を選択します。推奨画像在津は512×512なので、なるべく近いもの、もしくは正方形の画像を選択します。

画像を取り込んだら、画面右下の「選択」ボタンをクリック。

画像の切り抜きが出来ます。

しなくていい場合は、そのまま画面右下の「画像の切り抜き」ボタンをクリック。

ここまで設定出来たら、「保存して公開」をクリック。

ブログを見てみましょう。

ブラウザのタブに先ほど設定したファビコンが表示されています。

タイトルの下のブログ説明も更新されています。

ここでは、あらゆる要素の色を編集することが出来ます。

好きなようにいじくってみましょう。

ブログ画面を確認したい場合は、「保存して公開」をクリックし、ブログを開き直します。

これはちょっと青すぎて目がチカチカしますね…笑

ちなみに当ブログは、お金を稼ぐ方法を紹介しているブログなので、全体的にお金をモチーフにした黄色とオレンジで統一させています。

ヘッダー

ヘッダーでは、ブログのタイトル部分の表示方法を設定出来ます。

ヘッダーの背景を画像に設定したり、ブログのタイトルを画像に置き換えることもできます。

上の画像はタイトル部分に背景を指定した場合。

現在のヘッダーの「新規画像を追加」から、ファビコンの設定と同じように画像を指定して挿入すると、表示されます。

背景ではなく、画像をそのままタイトルとして表示させる方法は、ロゴ画像の「画像を選択」ボタンをクリックし、上と同様に画像を設定します。

設定したら、「ロゴを画像にする」にチェックを入れます。

設定を終えたら「保存して公開」をクリック。

背景画像

ブログの背景を画像にすることが出来ます。

ただ、背景を画像にすると、ブログの読み込みが若干遅くなるような気がします。

スキン

ブログの細かい要素のデザインをこの中の項目から選んで簡単に編集できます。

編集してみると、上のメニューバーや、真ん中にある記事の項目の色が薄い青に変わりました。

画像

ここでは、記事などに挿入した画像の読み込みに関する設定が出来ます。

画像は多くなると、ブログの読み込みに時間がかかるようになるので、なるべく軽くするために設定しておきます。

アイキャッチを自動設定

ブログのアイキャッチ画像を自動生成してくれます。

基本的に毎回手動でも設定出来るので、チェックをつけなくてもいいです。

Lazy Loadを有効

これを設定しておくと、ブログを表示するときに、挿入されている画像を全て読み込まずにページが表示されるようになるので、ブログの表示がスピーディーになります。

ページをスクロールして、画面に画像を挿入した位置が表示された時点で、その画像の読み込みを行います。

Lazy Loadのエフェクトを有効

画像位置までスクロールされ、画像が表示されるとき画像が急にバっと表示されるのではなく、フェードイン(スーっと自然な形)で表示されるようにする設定です。

Lazy Loadで読み込むタイミング

「スクロール表示と同時」にチェックでOK。

画像効果

挿入した画像に枠線をつける設定です。

記事の背景は基本的に白なので、画像に枠線をつけてメリハリをつけた方が見やすくなります。

「ボーダー」もしくは「シャドー」を選択します。

ここまで設定したら、「保存して公開」をクリックし、保存しましょう。

以上の機能を駆使して、オリジナリティのあるブログにカスタマイズしてみましょう。

ブログのレイアウトは自分の世界観、価値観を瞬間的に相手に伝えられる貴重な要素なので、

自分の納得のいくまでカスタマイズしてみましょう。

⇒次はアクセス解析ツールを導入していきます

応援ぽちっとよろしくお願いします
↓応援ぽちっとよろしくお願いします

シェアする

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

フォローする

モッピーでポイントサイトアフリエイトを始めよう!

★初心者にも使いやすいポイントサイト「モッピー」★

モッピー!お金がたまるポイントサイト
お小遣いを簡単に稼ぐことが出来るポイントサイトで、アプリダウンロードなど簡単な案件もあるので、初心者におすすめです。
ポイントサイトを活用したアフィエイトにも効果的です。
⇒ポイントサイトアフィリエイトの方法について解説しています。