仕事

【WordPress】ブログをオシャレにする方法(SAMUNE|CSS Stock)

すずき

こんにちはすずきです!

せっかくブログ作ったからブログのデザインも力を入れていきたい

そんな初心者ブロガーのお声に答える記事になってます。

テーマにこだわらず使える方法をご紹介しますのでぜひ今後のブログ生活にご活用ください!

ポイント

  • HPをおしゃれにする要素
  • メインビジュアル、サムネイルのデザインをつくる
  • HTMLとCSSを使って装飾する

上記3点をご紹介します。

HPの見栄えがよくなる要素

すずき

デザインで必要なものは下記

ポイント

  • 色選び
  • サムネイルのインパクト
  • 装飾

ブログに限らずHP制作では上記を意識したうえで設計をします。

ブログの色の決め方

すずき

一般的にはこんな感じ!

ベースカラーを70%、メインカラーを25%、アクセントカラーを5%の割合で使用するのが基本です。

このHPで言うと

  • ベースカラー:白
  • メインカラー:黒
  • アクセントカラー:赤

上記を基本としてサイトを作っています

すずき

相手にどういう印象を与えたいかがとても重要!

まずはあなたが記事を届けたい人を考えてください!

女性に向けて書きたい場合は女性に好かれる色を選ぶ

相手に安心感を与えたい場合は安心感を持てる色を選ぶ

すずき

ペルソナに合わせて色も設定しましょう!

このサイトでは白と黒をメインにすることでシンプルかつ重厚感を与えつつ仲間が欲しいので情熱の色の赤を使って作っています!

メインビジュアルやサムネイルにこだわる

メインビジュアル(トップページの一番上の画像)やサムネイル(記事のアイキャッチ画像)はHP内で一番デザインができるパーツといっても過言ではありません。

すずき

サムネを生かすためにHPのデザインはシンプルであればあるほど際立つね!

特にメインビジュアルはHPの顔と呼ばれています。
サービスのサイトや特化ブログを書くのであればメインビジュアルを見て3秒で何のサイトかわかる必要があります。

そういったことも意識して作っていきましょう!
雑記ブログは別に何のサイトかわかる必要がないのでおしゃれな感じでやったらOKです!

簡単に質の高いサムネを作る方法

すずき

正直すずきはデザイナーじゃないから真似することしかできないのだ

▼すずきの作品▼

別で運営しているAIブログのサムネです。
デザイナーじゃない割にはすごくないですか?

こういったサムネがあるだけでサイトが締まります。

特にTOPページで記事のサムネイルがとても映えるのでおすすめです。

すずき

ここでいつも参考にしているサムネが一覧になっているサイトをご紹介!

出典:SAMUNE

SAMUNE|良質なサムネイル専門のデザインギャラリー

SAMUNE

こちらのサイトではブログからYouTubeまでプロのサムネがギャラリーで見れます。

デザインの構成自体に著作権はないので、こちらを参考にキャラクターの位置や文字の大きさを揃えると本格的なサムネができます!

基本的にはAdobeのPhotoshopで作成します。

すずき

Photoshopの使い方は調べてください!!w

サムネやメインビジュアルに手間を加えてぜひおしゃれなサイトにしましょう!

HTML・CSSを使って装飾する

すずき

有料のテーマだと基本的にデザイン性の良いブロックが揃っているね!

このサイトも有料テーマの『AFFINGER6』を使ったサイトになります。
そのためもう初めからデザイン性の高いブロックやブロックごとのパターンが搭載されています。

ただ今回は初心者向けになりますので、有料テーマを使わなくてもブロックを装飾する方法を教えます!

HTML・CSSをコピペするだけでブロックを装飾

出典:CSS Stock

CSS Stock|Webデザインを楽にするCSSコピペサイト

CSS Stock

otetoさんが運営している、WordPressのブロックをHTMLとCSSで簡単に作れるサイトです。

こちらを使って装飾をすることができます!

CSS Stockの使い方

STEP
作りたいブロックを選ぶ

いろんなブロックの中から今回は波状的に上下するローディングブロックを選びました。

STEP
デザインを調整する

こちらでブロックの色等を調整することができます。

STEP
表示されたHTML をカスタムHTMLブロックに入力

HTMLをブロックのカスタムHTMLに入力

STEP
CSSをカスタムCSSに入力

こちらのCSSを記事の編集画面の一番したにあるカスタムCSSまたは

サイト→外観→カスタマイズにあるカスタムCSS入力しましょう。

すずき

完了!出来上がったのがこちら!

こういった動くブロックも作れますのでぜひ使ってみてください!

カスタムCSSが見つからない

その場合はプラグインで「Arkhe Blocks」をインストールしてください。

このプラグインはGutenbergを拡張するプラグインです。この中にカスタムCSSもあるのでこちらも使ってみてください!

まとめ

  • 色選び
  • サムネイルのインパクト
  • 装飾

上記3つを使いぜひおしゃれなサイトを作ってみてください!

自己満でOK!!!

すずき

僕も死ぬほど自己満サイトです

  • この記事を書いた人

鈴木陽介

株式会社セブンコードの社畜 コンテンツマーケティング事業部の部長! ITパスポートの参考書もうすぐ発売

-仕事