Nomad Code の使い方を完全図解で説明【ブログを大変身】

nomad code 使い方ブログ・SNS

こんにちは、ろっしーです。


ここ最近ではブロガーさんも増え、記事の差別化が難しくなってきました。

 

 

読者さん E
読者さん E

ブログ書いてるけど、もう少し変わったデザインにできないかな?

読者さん C
読者さん C

デザイン変えてみたいけど、プログラミングの知識なんてないよ

読者さん E
読者さん E

他のサイトより目立った記事にできないかしら?

ろっしー
ろっしー

ブログを簡単にカスタマイズできる便利なサイトがありますよ!


他のブログ・サイトと差別化をしたい方は、Nomad Code(ノマドコード)でブログ内のデザインをオシャレでスタイリッシュに変化させちゃいましょう。

Nomad Code はプログラミングの知識も必要ありませんし、もちろん無料です。

ブログやサイトを運営しているのであれば、知っていて当然の基礎知識だけでカスタムできちゃいます。


使用方法はサイト内を見ていけば、十分にわかるくらい丁寧に説明されています。

今回は実際に僕が使ってみて分かりにくかった所もありましたので、全て1つ1つ図解も入れて説明しています。

この記事を読んでサイトを見てもらえればバッチリ使って貰えます。

 

本記事の内容
  • Nomad Code でデザインをカスタマイズする方法
  • AddQuicktagを使って簡単にコードを使う方法
  • 簡単にカスタマイズ出来るサイトをもう一つ紹介

 

 

早速いきましょう。

 

Nomad Code でデザインをオシャレに変身

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

Nomad Code はデータSIMやポケットルーターのレンタルなどを手掛けている会社

株式会社 NOMAD WORKS

こちらの運営するサイトです。


使用できるデザインはこちら。

  • 見出し
  • ボックス
  • CVボックス
  • リスト
  • ボタン
  • カエレバ
  • アプリーチ

どれもシンプルなデザインで柔らかい色彩。サイトを非常に見やすくしてくれます。

カスタムできるブログデザインも実に豊富。


まずは無料ブログ。

  • はてなブログ
  • アメブロ
  • Blogger



WordPress のテーマはこちら。

  • JIN
  • Cocoon
  • Affinger
  • SANGO

 

幅広く適用できるようになっています。


WordPressはカスタムやデザインが自由にできますが、はてなブログやアメブロも使えるのには驚きました。


では実際の使用方法を見て行きましょう。

 

Nomad Code の使用方法

Nomad Code の使用方法はとても簡単です。


※今回は僕が WordPress の Cocoon を使っているので、Cocoon での説明になります。



他のテーマでも基本的な使用方法は変わりません。

 

デザインの追加手順(Cocoon)
  1. 使用するデザインを選ぶ
  2. CSSコードをコピー
  3. テーマのスタイルシートにペースト
  4. HTMLコードをコピー
  5. デザインを使う所にHTMLコードをペースト

 

この順番でコピーとペーストで使えちゃいます。


他のブログデザインも使用方法はカラーページで非常に分かりやすく説明があるので、順番にやっていけば問題なく使えます。

 

Nomad Code はこちらをクリック

 

シンプルボックスデザインをCocoonに追加してみよう

WordPress のテーマ Cocoon にシンプルボックスデザインを追加してみましょう。

他のテーマやデザインも基本的には方法は同じです。

 

カスタムする前にもしもの時の為にバックアップをとっておきましょう

 

①最初にサイトで自分の使っているブログデザイン、もしくは WordPress のテーマの項目から使いたい項目を選びます。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 


②次に色を選びます。色のアイコンをクリックすればサンプルの色が変わります。今回は僕のテーマが青色をベースにしているので青色を選択します。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

 

③次に「コードを表示をクリック」します。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

④コードは左が HTMLコード、右が CSSコード が出てきます。まず最初にCSSコードをコピーします。赤い丸の部分をクリックすればコピーできますが、うまくいかない時はコードを全選択してコピーしてください。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

⑤ 続いてWordPress のダッシュボードにいきます。左のタスクバーから外観をクリック

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

⑥続いてカスタマイズをクリック

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】


⑦一番したにある、追加CSSをクリック

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

 


⑧ コピーしてきたCSSコードをペースト(貼付け)します。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】


⑨ペースト(貼付け)できたら公開をクリックして作業は完了です。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

これで作業完了です。もう記事の中で使う事ができます。

 

追加したデザインコードを使ってみよう

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】


追加したデザインの使い方はこちらです。

追加デザインの使い方
  1. 記事の中の使う場所を選ぶ
  2. ブロックの「カスタムHTML」を選択
  3. Nomad Code の HTMLコード をペースト
  4. コードの中の文章を記事の文章に変える


では実際に使ってみましょう。


HTMLコードの入力


①記事の中の使う場所を選んでブロックを追加して、「カスタムHTML」を選びます。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



②次にNomad Codeの方から、先程使えるようにしたシンプルボックスのHTMLコードをコピーします。右下の COPY をクリックすれば一発でコピーできますが、うまくいかない時はコードを全選択してコピーです。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



③ブロックの「カスタムHTML」の中にペースト(貼付け)します。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】




④プレビューで確認してみて、シンプルボックスができていれば完成です。「ここに文章」は下書きに戻り、コード内の「ここに文章」を好きな文章に変えればOKです。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

 

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



⑤文章を変えたのがこちら。これで完成です。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】


他のカスタム素材も全て同じ手順になります。

貼り付ける場所さえ間違えなければ、全く難しい所は有りません。


アイコンの設定

一部のカスタム、Cocoon だと「CVボックスデザイン」にアイコンが使われています。赤丸で囲まれている部分がそうです。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】


これを反映させるのに、アイコンフォントの設定が必要となります。



アイコンフォトの設定が必要なカスタムは、左下に「アイコンの設定が必要です」と注意書きがしてあります。

詳しい方法はリンクが貼ってあるので、リンクから飛べば詳しい方法は読むことができます。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



アイコンフォトの設定は指定の場所、WordPress のテーマでは <head>〜</head>内 にコードを貼り付けて反映させればOKです。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】


Cocoonの中のどこに <head>〜</head>内 があるのか分かりませんでした。

Cocoonでは Cocoon設定の「アクセス解析・認証コード設定」の中にある「ヘッド用コード」の部分に貼り付けて、保存すればOKです。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



アクセス解析・認証コード設定の中で下にスクロールすればあります。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



その他のテーマも <head>〜</head>内 を探して貼付けすればOKです。

 

AddQuicktag で簡単に使おう

これは WordPress のみになります。

AddQuicktag (アドクイックタグ)はHTMLコードをショートカットとして記憶させておいて、記事にクリックだけで使えるようにできる便利なプラグインです。

  1. AddQuicktag プラグインをインストール
  2. 有効化する
  3. 設定からAddQuicktag をクリック
  4. HTMLコードを登録
  5. クラシックエディタ(旧エディタ)で使う

プラグインのインストールから有効化まではご存知と思いますので省略します。



④HTMLコードを登録。

  1. 左から、登録するコードの名前を入れます
  2. 次にNomad Code で左側のHTMLコードを開始タグにコピペ
  3. 最後に右のチェックリストを全てチェック入れます。(一番右のボックスにチェック入れると全部チェック入ります)

終わったら下にスクロールして「変更を保存」で登録完了です。

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

注意点として、AddQuicktag はクラシックエディタ(旧エディタ)でしか使えません。

現行のブロックエディタで使う場合は、ブロックの段落を「クラシック版の段落」にすればその1つの段落で使うことができます。


詳しくは他サイトで分かりやすく書いてありますので、こちらを参考にされてください。

 

おすすめのカスタム

WordPress テーマであれば、各テーマで使えるデザインでも満足できるのではと思います。


ここで特におすすめのカスタムは CVボックス、カエレバ、RINKER,アプリーチなどです。

かなりスタイリッシュでかっこよくなります。

 


CVボックス   
左がパソコン、右がモバイルでの表示

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】

 

CVボックスを使った参考記事はこちら。



RINKER、カエレバ

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】



アプリーチ

NOMAD CODE の使い方を完全図解で説明【ブログを大変身】




商品の比較説明や、まとめサイトにCVボックスはかなり使えると思います。

RINKERやカエレバは通常使われていると思いますが、よりスタイリッシュで他よりもカッコよく。

アプリの案内をされている方にはアプリーチも使いやすいと思います。

 

 

もっとカスタムしたい人

もっと他サイトと差別化したい方にオススメなのが、ぽんひろさん@ponhiro がたくさんカスタムコードを作って案内してくれています。

なんとこちらも無料で使えます!こちらも参考にされてみてください。

 

 

カスタマイズについて

Nomad Code、ぽんひろさん の案内してくれているデザインを追加することで他のブログよりも綺麗で読みやすい記事にできると思います。

しかし、それにハマって時間をいたずらに浪費したり記事をかえってゴチャゴチャにして読みにくくならないように気をつけるようにしたいですね。


僕自身もハマりそうになりましたが、未経験者にとってデザインは沼です。

「あれもいい」、「これもいい」となって色々やりすぎてしまいます。


最後に注意点です。

① CSSコードの追加の前に必ずバックアップを取ること

② 足りない物を必要最低限に止めよう


バックアップをとっておかないと、もしも間違えてしまった場合にブログ自体がうまく表示されなくなったり不具合が出ます。そうなった時は素人では修復ができません。


これだけは注意しましょう。


あなたのブログがお洒落で読みやすいものになりますように。

 

おわり

コメント

タイトルとURLをコピーしました