圧倒的な使いやすさ!WordPressテーマ「SWELL」公式サイトをみる!

コピペするだけ!ブログデザインを簡単に変える方法【Nomad Code】

突然ですが、次のように考えたことはありませんか?

「ブログデザインを変えてみたいけど、デザインのことよく分からないし。……自分には難しそうだな……」

デザインはとても大切です。けれど、実際にやってみると結構難しいですよね。プログラミングの知識が必要だったり、失敗するとデザインが崩れてしまったり…。

ブログ初心者には、少しハードルが高く感じてしまうかもしれません。

今回は、そんな悩みを解決してくれるサイト「Nomad Code」についてご紹介します。

Nomad Codeって何?

  • ブログデザインのライブラリ
  • 100種類以上のデザイン
  • WordPress、はてなブログ…さまざまなブログに対応
  • コピぺするだけでデザインが整う

Nomad Codeは、ブログのためのカスタマイズデザインが集まっているサイトです。

 Nomad Codeで出来ること

  • 見出し、ボタン、リストなどのデザイン変更
  • Rinker、カエレバなどブログツールのデザイン変更
  • デザインのカラー変更

100種類以上のデザインサンプルが用意されており、必要なコードをコピペするだけで手軽にデザイン変更ができます。

今のデザインに満足できないブロガーさん、簡単にデザインを変更したいブロガーさんにおすすめのサイトですよ。

本記事では、Nomad Codeについて、Nomad Codeの使い方について解説します。

目次

ブロガーために作られたデザインライブラリNomad Code

NOMAD CODE TOPPAGE
Nomad Code

「Nomad Code」は、ブロガーが「記事を書くこと」に集中できるように、「コピペだけで簡単にカスタマイズできるデザイン」が集められているサイトです。

見出しボックスCVボックスリストボタン、シェアボタンブログカードカエレバアプリーチRinker

いろいろなブログデザインのカスタマイズ可能です。

よく使われているブログサービスに対応しています

Blogservice
Nomad Code

Nomad Codeは、WordPressはてなブログアメブロBloggerに対応しています。さらに、WordPressはテーマごとにデザインが用意されています。

  • JIN
  • Cocoon
  • Affinger
  • SANGO

どれも人気のテーマですね。上記以外のテーマも「その他のテーマ」として、デザインが用意されていますよ。

プログラミング知識がなくても大丈夫

ブログデザインの変更には、HTMLCSSというプログラミング言語が必要です。けれど、1から勉強するのは大変ですよね。

Nomad Codeではデザインの見本と一緒に、カスタマイズ用のHTML、CSSが用意されています

つまり、用意されたものをコピペすればデザイン変更できるというわけですね。

コピペでできる!Nomad Codeの使い方

Nomad Code

今回は、商品レビューなどで使える「CVボックス」を例としてNomad Codeの使い方を解説します。上にあるのがそうですね。

Nomad Codeの使い方で、おそらく一番難しいのがCVボックスです。これさえできれば、他のカスタマイズはサクサクできると思います。

WordPressCocoonテーマに対応したデザインの手順となりますが、他のテーマの場合も使い方はほぼ同じです。

 CVボックスって何?

CVボックスはコンバージョン(conversion)ボックスの略です。直訳すると「変換ボックス」「変換ボックス」ですが、ブログ成果につながるものを表示させるボックスと考えたらよいでしょう。例えば、商品レビュー、資料請求の案内、会員登録の案内などですね。

①Nomad Codeでデザインを選ぶ

まずは、Nomad Codeへアクセスしましょう。

WPデザインをクリック

WordPressの場合は「WPデザイン」をクリックします。

※WordPress以外のブログは、「ブログデザイン」から選んでください。

テーマを選択

Cocoon(自分の使っているテーマ)から「CVボックス」をクリックします。

②デザインの中から好きなものを選ぶ

CVボックスデザインの中から、好きなものを選びましょう。

色を変更

COLOR」の色をクリックすれば、CVボックスの色変更ができます。

③デザインのコードをコピぺする

「コードを表示」をクリックしましょう。すると、デザインのHTMLコードとCSSコードが出てきました。

CSSコードをコピペする

CSSコードをコピー

「COPY」をクリックして、CSSコードをコピーします。

WordPressの管理画面から、外観の「カスタマイズ」をクリックします。

CSScode
CSSコードを貼りつけ

カスタマイズ画面に移動したら、「追加CSS」にコピーしたCSSコードを貼りつけて「公開」をクリックしましょう。

コードをコピーする前に……

※Nomad CodeのCSSコードをコピーする前に、CSSファイルのバックアップを取っておきましょう。表示がおかしい場合は、コピーしたCSSコードの削除、バックアップファイルの上書きで元の状態に戻ります。

HTMLコードをコピペする

Nomad Codeに戻って、HTMLコードをコピーします。

HTMLcode
HTMLコードをコピー

WordPressで投稿画面をひらき、ブロックを「カスタムHTML」にします。

カスタムHTML

コピーしたHTMLコードを貼りつけたら、コードの中のタイトル、画像などを変更しましょう。

商品名・テキストなどを変更

Webアイコンフォントの設定

アイコンの設定

Nomad Codeを使ったカスタマイズでは、Webアイコンフォントの設定が必要なものがあります。CVボックスもその1つです。

Webアイコンフォントは、Webサイト上でアイコン表示させることができるサービスのこと。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

上のコードをコピーしてください。WordPressの管理画面から外観の「テーマエディタ―」をクリックします。

テーマヘッダーを編集

編集するテーマが子テーマになっている場合は、Cocoon(親テーマ)に変更します。「テーマヘッダー」(header.php)をひらき、<head>~</head>内にコードを貼りつけます。

これで作業は完了です!投稿画面のプレビューで確認してみましょう。

アナログ子

わたしのCVボックスを作ってみました!

おすすめ商品!アナログ子

アナログ子3つの特徴

アナログ人間

食欲旺盛

睡眠の状態異常に弱い

5

体力

6

スタミナ

6

攻撃力

9

食欲

ブログデザインはNomad Codeにおまかせ!

Nomad Code

「デザインに時間をかけれない」というブロガーの悩みを解消してくれるサイト「Nomad Code」。ブログ始めたばかりの頃、わたしもデザインのカスタマイズにとても時間がかかっていました。

その時間が無駄だったとは思わないけれど、少しもったいなかったかもしれない……とも思っています。ブログ書かずに、ずっとカスタマイズしていました(笑)

これからデザイン変更を考えておられる方は、Nomad Codeにデザインをおまかせすれば、時短できるはず!(うらやましい)

Nomad Codeでは、「こんなデザインが欲しい!」というリクエストを随時募集されています。リクエストを元に新デザインが次々と追加されていますので、種類が増えてさらに使いやすくなりそうですね。

参考|Nomad Code

アナログ子
「アナログな自分から変わりたい」アナログ子です。機械オンチで、よく物を壊します。ブログ、WordPress、ライティングなどの勉強中。

気になったこと、良かったことなどを記事にまとめています。好きな食べものは「焼いも」

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URL Copied!

コメント

コメント一覧 (2件)

  • こんばんは!アナログ子さんのブログを参考にさせていただいています。

    このブログの文字が凄く見やすく教えていただきたくコメントさせていただきました。

    フォント設定はどちらでされていますか?

    • 山中さん、コメントありがとうございます!
      WordPressテーマ「Cocoon」を使っているのですが、テーマのCocoon設定からフォント変更しました。フォント名は「小杉丸ゴシック」です~。

アナログ子 へ返信する コメントをキャンセル

目次
閉じる