みなさんこんにちは！おさかなです！
今回は「Nomad Code」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・HTML/CSSを学習している方
・Webデザインを学んでいる方
・Webサービス開発をしている方
使い回せる、デザインがほしい！
毎回デザイン考えるの大変だから、使い回せるようにしたいな…。
それなら「Nomad Code」が活用できるかも！？
なんだ何だ〜！？
「Nomad Code」って何？
「Nomad Code」とは、株式会社 Nomad Worksが運営している、HTML/CSSコードを「コピー」するだけで実装できる、デザイン集のことです。
「見出し」や「ボタン」「吹き出し」などのデザインを、WordPressのテーマ、ブログサービスごとに探すことができる便利なサイトとなっております！(いいね！)
実際につかってみよう！
それでは早速サイトにアクセスします！
デザインを探そう！
それでは早速デザインを探していきましょう！(おー！)
上の方にあるメニューバーから「ブログデザイン」「WPデザイン」のどちらかを選択していきます！
ブログデザインの方では
・はてなブログ
・アメブロ
・Blogger
・その他サービス
の4種類から選択することができます！(ふむふむ…。)
WPデザインでは、WordPressのテーマを選択することができます！(色々対応してて、すごい！)
・JIN
・Cocoon
・Affinger
・SANGO
・その他テーマ
今回は当ブログでも使用している、WordPressテーマの「Cocoon」を選択していきます。
試しに、Cocoonの中にある「見出し」のデザインを見てみます！(ポチッと！)
するとこのようなページが表示されました！(わーい！)
スクロールしてみると…？
こんな感じで色々なデザインが出てきました！(どれもステキ✨)
デフォルトでは「シンプル」になっていますが、「オシャレ」というタブに切り替えると…？
こんな感じで、よりオシャレなデザインが出てきました！
他にも「リスト」や…。
「ボタン」なんかもあります！
「COLOR」から色を変更することもできます！(どれも良くて、迷うな〜。)
(あともう少し…🚩)
実装していこう！
気になるデザインを見つけたら、実装していきましょう！(君に決めた！)
まず「コードを表示する」を押しましょう！(ポチッと)
すると、このように「HTML」と「CSS」のコードが表示されるのでコピーしましょう！
コピーしたコードを貼り付けて行きましょう！
今回はWordPressの「ダッシュボード」＞「新規投稿」から、記事内に貼り付けていきたいと思います！(よしっ！)
「＋」プラスマークから、「カスタムHTML」を選択します。
先ほどコピーした「HTMLコード」を貼り付けましょう！
今回のボタンのコードのように、「リンク先」や「文字」などを編集できる場合もあるので、ご自身のサービスに合わせて、変更してみましょう！
↓編集前
<a href="ここにリンク先" class="nomadBtn4">ここに文字</a>↓編集後
<a href="https://note.com/osmomo_neo16sb/" class="nomadBtn4">おさかなのnote</a>「CSSコード」を貼り付ける場合は<style>タグを記述して、その中に入れるようにしましょう！
<style>ここに貼り付けます</style>
コードの貼り付けが完了した後に「プレビュー」を押すと…？
こんな感じで、先ほどのデザインが反映されているのがわかります！(わーい！)
↓実装したデザインはこちら
おさかなのnoteちなみに「こんなデザインほしい！」という「リクエスト」も送ることができるみたいなので、気になる方はぜひ送ってみてください！(おー！)
デザイン集を活用して、作業を効率化しよう〜！
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
