みなさんこんにちは!おさかなです!
今回は「Nomad Code」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・HTML/CSSを学習している方
・Webデザインを学んでいる方
・Webサービス開発をしている方
使い回せる、デザインがほしい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
毎回デザイン考えるの大変だから、使い回せるようにしたいな…。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
それなら「Nomad Code」が活用できるかも!?
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
なんだ何だ〜!?
![](https://osakanav.com/wp-content/uploads/2020/05/20-05-28-15-19-36-120_deco-160x90.jpg)
「Nomad Code」って何?
「Nomad Code」とは、株式会社 Nomad Worksが運営している、HTML/CSSコードを「コピー」するだけで実装できる、デザイン集のことです。
「見出し」や「ボタン」「吹き出し」などのデザインを、WordPressのテーマ、ブログサービスごとに探すことができる便利なサイトとなっております!(いいね!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/3c61ff758dbf5c980d8c7a8f66b51096.jpg)
![](https://osakanav.com/wp-content/uploads/2021/11/iconpon-top-160x90.png)
実際につかってみよう!
それでは早速サイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code.png)
デザインを探そう!
それでは早速デザインを探していきましょう!(おー!)
上の方にあるメニューバーから「ブログデザイン」「WPデザイン」のどちらかを選択していきます!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-design.png)
ブログデザインの方では
・はてなブログ
・アメブロ
・Blogger
・その他サービス
の4種類から選択することができます!(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-blog.png)
WPデザインでは、WordPressのテーマを選択することができます!(色々対応してて、すごい!)
・JIN
・Cocoon
・Affinger
・SANGO
・その他テーマ
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-wp.png)
今回は当ブログでも使用している、WordPressテーマの「Cocoon」を選択していきます。
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-cocoon.png)
試しに、Cocoonの中にある「見出し」のデザインを見てみます!(ポチッと!)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-cocoon-midasi.png)
するとこのようなページが表示されました!(わーい!)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-design-midasi.png)
スクロールしてみると…?
こんな感じで色々なデザインが出てきました!(どれもステキ✨)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code.gif)
デフォルトでは「シンプル」になっていますが、「オシャレ」というタブに切り替えると…?
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-tab.png)
こんな感じで、よりオシャレなデザインが出てきました!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-osyare.gif)
他にも「リスト」や…。
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-list.png)
「ボタン」なんかもあります!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-btn.png)
「COLOR」から色を変更することもできます!(どれも良くて、迷うな〜。)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-flatbtn.gif)
(あともう少し…🚩)
実装していこう!
気になるデザインを見つけたら、実装していきましょう!(君に決めた!)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-flatbtn.png)
まず「コードを表示する」を押しましょう!(ポチッと)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-copy.png)
すると、このように「HTML」と「CSS」のコードが表示されるのでコピーしましょう!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-flat-copy.png)
コピーしたコードを貼り付けて行きましょう!
今回はWordPressの「ダッシュボード」>「新規投稿」から、記事内に貼り付けていきたいと思います!(よしっ!)
![](https://osakanav.com/wp-content/uploads/2021/03/wp-sinkituika.png)
「+」プラスマークから、「カスタムHTML」を選択します。
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-c-html_LI.jpg)
先ほどコピーした「HTMLコード」を貼り付けましょう!
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-code-paste.png)
今回のボタンのコードのように、「リンク先」や「文字」などを編集できる場合もあるので、ご自身のサービスに合わせて、変更してみましょう!
↓編集前
<a href="ここにリンク先" class="nomadBtn4">ここに文字</a>
↓編集後
<a href="https://note.com/osmomo_neo16sb/" class="nomadBtn4">おさかなのnote</a>
「CSSコード」を貼り付ける場合は<style>タグを記述して、その中に入れるようにしましょう!
<style>ここに貼り付けます</style>
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-css.png)
![](https://osakanav.com/wp-content/uploads/2021/11/code-css1.png)
コードの貼り付けが完了した後に「プレビュー」を押すと…?
こんな感じで、先ほどのデザインが反映されているのがわかります!(わーい!)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-btn-get.gif)
↓実装したデザインはこちら
おさかなのnoteちなみに「こんなデザインほしい!」という「リクエスト」も送ることができるみたいなので、気になる方はぜひ送ってみてください!(おー!)
![](https://osakanav.com/wp-content/uploads/2021/11/nomad-codereq-btn.png)
![](https://osakanav.com/wp-content/uploads/2021/11/nomadcode-request.png)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
デザイン集を活用して、作業を効率化しよう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/02/nizima-top-160x90.jpg)