【HTML/CSS】コードをコピーするだけで、デザイン実装できちゃう!【Nomad Code】とは?

Technology
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Nomad Code」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・HTML/CSSを学習している方
・Webデザインを学んでいる方
・Webサービス開発をしている方

使い回せる、デザインがほしい!

おさかな
おさかな

毎回デザイン考えるの大変だから、使い回せるようにしたいな…。

ナビまる
ナビまる

それなら「Nomad Code」が活用できるかも!?

おさかな
おさかな

なんだ何だ〜!?

【HTML】だけで!郵便番号から「住所」を自動入力する方法!【web】
みなさんこんにちは!おさかなです! 今回は「【HTML】だけで!郵便番号から「住所」を自動入力する方法!」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・HTMLを勉強中の人 ・お問い合わせ...

「Nomad Code」って何?

Nomad Code」とは、株式会社 Nomad Worksが運営している、HTML/CSSコードを「コピー」するだけで実装できる、デザイン集のことです。
見出し」や「ボタン」「吹き出し」などのデザインを、WordPressのテーマ、ブログサービスごとに探すことができる便利なサイトとなっております!(いいね!)

Nomad Code|コピペで使えるブログカスタマイズツール
HTML/CSSをコピー&ペーストするだけで、 あなたのブログデザインが見違えるほどに整います。伝えたい情報を適正に伝えるために、正しいデザインを。
【商用利用OK!】シンプルで可愛い「被り物アイコン」が作れちゃう?!【かぶりっこメーカー】とは?
みなさんこんにちは!おさかなです!今回は「かぶりっこメーカー」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・かわいいアイコンを探している方・被り物をしたキャラクターアイコンが欲しい方・シ...

実際につかってみよう!

それでは早速サイトにアクセスします!

デザインを探そう!

それでは早速デザインを探していきましょう!(おー!)
上の方にあるメニューバーから「ブログデザイン」「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

ちなみに「こんなデザインほしい!」という「リクエスト」も送ることができるみたいなので、気になる方はぜひ送ってみてください!(おー!)

おさかな
おさかな

デザイン集を活用して、作業を効率化しよう〜!

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

【アバター モデル販売】Live2D公式マーケット「nizima」とは?
みなさんこんにちは!おさかなです!今回は「nizima」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・Live2Dのモデルを探している方・Live2Dモデルを販売したい方・オーダーメイド...
おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

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