Vectornatorは数千のアイコンが入手できる。

<!DOCTYPE html> <html lang = "ja"> <head>   <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133409287-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-133409287-1'); </script>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6918386144875495", enable_page_level_ads: true }); </script> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width"> <title>Vectornatorは数千のアイコンが入手できる。 </title>  <meta name = "description" content = "Vectornatorの「Iconator」という機能を使えば、無料で数千単位のアイコンを取り入れることができる、ということを発見してしまった。〽️ すごい特典が隠されていた。〽️ Iconator、アクセス方法。〽️ 観てるだけで時が経つ。〽️ 無料でいいのか？" >  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@fukarararu" /> <meta property="og:url" content="https://fuuno.net/SVG/icon/icon.html" /> <meta property="og:title" content="Vectornatorは数千のアイコンが入手できる。" /> <meta property="og:description" content="〽️ ホントに無料でいいのか？" /> <meta property="og:image" content="https://fuuno.net/SVG/icon/twitter.png" />  <link rel = "icon" type = "image/x-icon" href = "https://fuuno.net/main_img/favicon.ico">  <style> /*--------------ベースstyle。12/24AM更新。---------------------------------------*/ html{ max-width:1000px; margin: 0 auto; background-color:#fff; } body { font-family: 'Hiragino Kaku Gothic Pro', 'arial', 'メイリオ', sans-serif; width:100%; margin-left:0; font-size:130%; background-color:#fcfcfc; } img{width:80%; padding-left:10%; padding-top:20%; } /*-------------メディアクエリ。-----------------------------*/ @media only screen and (max-device-width: 480px) { body{ font-size:4.9vw; } header{ line-height:1.4; font-size:0.9em; } img{width:90%; padding-left:5%; } } /*.gamegamen{width:80%; margin-left:10%; } */ .komidasi { background-color:coral; text-align:center; padding:0 1em ; } header {background-color:aquamarine; padding:1em; word-wrap:break-word; margin-bottom:-1em; /*-----------headerにbackground-imageを設定----------------------- background-image:url(""); background-size:cover; ---------------------------------------------------------------*/ } .codesample { font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; line-height: 1.7; /* border: solid 1px;*/ padding:1em; font-size:100%; font-weight:800; background-color:beige; /*margin-top:1em;*/ margin-bottom:1em; color:black; /* -----確実に改行させる----------*/ /* word-wrap:break-word;*/ /* -----改行させず、スクロール。----------*/ word-break:keep-all; overflow:scroll; /*margin-left:5%; margin-right:5%;*/ /*padding-top:-2em;*/ margin-left:5%; margin-right:5%; } /*-------横スクロールさせたときにテキストの末尾がギリの場合、1番幅をとっているテキストの最後に全角スペースを付ける。------------*/ /*---------------------------------------------------------------*/ /*--------pの頭に◼︎をつけ、２行目以降インデントさせたい場合。--------------- p{ padding-left:2em; text-indent: -1em; } -----------------------------------------------------------------*/ p{ padding:5%; /* padding-bottom:20%;*/ /* text-align:justify;*/ /* color:#222;*/ } /*iphoneの画面右側に余白ができた時の対処 <body>直下を<wrapper>で囲み、 cssで　「　#wrapper { overflow:hidden } とする。 */ #wrapper{ overflow:hidden; } /*箇条書きタイトル。*/ .kajotitle{ background-color:darkcyan; color:white; /* へんこう。*/ /* color:darkcyan; border:solid 4px; background-color:white; margin-bottom:-1.7em; */ text-align:center; font-weight:600; padding:0.8em; padding-top:0.5em; padding-bottom:1em; font-size:1.1em; margin-bottom:-2.5em; /*color:beige;*/ /*ラベルっぽくしてみる width:50%; margin:auto; margin-bottom:-2.5em; */ margin-left:5%; margin-right:5%; } .kajotitle::before { content: ''; display:inline-block; width:1em; height:1em; background:url("../../main_img/kajo_R.png") no-repeat; background-size:contain; } .kajotitle::after { content: ''; display:inline-block; width:1em; height:1em; background:url("../../main_img/kajo_L.png") no-repeat; background-size:contain; } .kajonaiyou { /*font-size:1.1em;*/ color:darkcyan; /* font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; */ line-height: 3; /* border: solid 2px;*/ padding:1em; font-weight:600; background-color:white; margin-top:2em; margin-bottom:2em; margin-left:5%; margin-right:5%; } .kajonaiyou p { padding:1em; line-height:1.7em; } .kajonaiyou p { padding-left:2em; text-indent: -1em; } /*------------kaisi_02------------------------------------------*/ .kaisi_02 { position:relative; line-height:1.7em; padding:0.9em; padding-left:3.8em; font-size:150%; border-bottom:solid 0.1em gray; /*border-right:solid 1.4vw gray;*/ /* border-top:solid 0.08em gray;*/ letter-spacing:0.02em; background-color:#ffffff; word-wrap:break-word; /*background-color:azure;*/ } .kaisi_02:before { position:absolute; left:0.4em; content:""; display:inline-block; width:2.5em; height:2.5em; background:url("../../main_img/fu_icon.png") no-repeat; background-size:contain; margin-top:-0.3em; /* ▲ メディアクエリで書換えようぜ。0.4emで結構しっくり。*/ } /*----------codesampleにつけるラベる。----------------------*/ .codelabel p{ display:inline-block; /*border:solid 1px;*/ padding:0.2em; padding-left:0em; padding-right:1em; font-weight:500; margin-left:0.5em; color:cornflowerblue; } .codelabel { margin-bottom:-1em; } /*----------imageにつけるラベる。----------------------*/ .imglabel p{ display:inline-block; /*border:solid 1px;*/ padding:0.2em; padding-left:0em; padding-right:1em; font-weight:500; margin-left:0.5em; color:cornflowerblue; } .imglabel { margin-bottom:-8em; } @media only screen and (max-device-width: 730px) { .imglabel { margin-bottom:-5em; } } /*--------ブラウザのプレビューに外枠がほしい。-----------------*/ .gamenwaku { border:solid 1px; } /*-------------nav-------------------------------*/ .nav { color:#219367; background-color:beige; display:inline; font-family:'Hiragino Kaku Gothic StdN'; font-size:1em; font-weight:900; padding:1em; padding-left:4em; padding-right:1em; border:solid 1px white; border-radius:1em 0 1em 0; text-decoration:none; } /*-----------今回の書き換えここまで。--------------*/ /*-----------navsvg。------------ .navsvg img { width:25%; margin-left:-16px; margin-top:-24px; } --*/ /* licard消します。2019.12.18。もし復旧したければそれ以前のCSSをコピペの事。 */ /*---------headerと距離を置きたい-------------------*/ .yohaku{ height:5em; } /*--------今回のみ-----------------------------*/ /*--------関連記事-----------------------------*/ .kijilist{ list-style:none; padding-left:0; position:relative; } .kijilist li{ /*height:6em;*/ border:solid 2px; background-color:floralwhite; } .kijilist a { text-decoration:none; color:black; } .kijilist a img { height:auto; width:6em; float:left; margin-right:2em; margin-top:1.6em; margin-left:0; padding-left:1em; /* グローバル指定の汚染を解消。*/ padding-top:0; /*liのimageにはそもそもpaddingが設定されているみたいだ。だからpadding-leftを０にする。！！！そしてaspect fitさせること！正方形のViewに。 */ } .kijilist li a strong{ color:#000; display:block; padding-top:0.6em; font-size:1.2em; margin-top:0.5em; margin-bottom:-0.6em; display:flex; padding-right:1em; } .kijilist li a p { display:flex; padding:0.5em; padding-left:0; text-indent:0; color:#000; margin-left:9em; } /*-------------------------------------------- */ /*---------sampleが長い時に高さを制限----------------*/ #nagainode { height:15em; overflow:scroll; } /*-----------今回のみ-----------------------------*/ </style> </head> <body> <div id = "wrapper">  <div class = "katamari">  <div class = "komidasi"> <h3 id = "toplink"><a href = "https://fuuno.net/" style = "text-decoration:none; color:black; ">フーノページ</a></h3> </div>  <header>  <img src = "topsita.png" style = "padding-top:0;"> <h1>Vectornatorは数千のアイコンが入手できる。 </h1> <p class = "topsita_p"> 〽️ すごい特典が隠されていた。〽️ Iconator、アクセス方法。〽️ 観てるだけで時が経つ。〽️ ホントに無料でいいのか？ </p> </header><br>   <a href = "https://fuuno.net/"> <img src = "../../main_img/topmenu.svg " style = "width:6em; padding-left:0;padding-top:0;"> </a> <a href = "https://fuuno.net/contact.html"> <img src = "../../main_img/conta.svg " style = "width:6em; padding-left:0;padding-top:0;"> </a> <a href = "https://twitter.com/fukarakaru" style = "text-decoration:none; font-size:1.7em;"> <img src = "../../main_img/twitter.svg " style = "width:3.5em; padding-left:0;padding-top:0;"> </a> <br><br> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4281704178" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br><br><br>  <div class = "katamari"> <h2 class = "kaisi_02"> すごい特典が隠されていた。 </h2> <p> こんにちは、「ふ」です。<br> iPad上でイラレのごとくベクター画像の編集ができるVectornator。まだ使い方の全てを把握していないのですが、すっかりこのアプリ、気に入ってしまいました。<br> 毎日いろいろ試しています。 </p> <p> <img src = "00.png" style = "padding-top:0;"> <a href="https://apps.apple.com/jp/app/vectornator-x/id1219074514?mt=8" target = _blank>Vectornator X - Linearity GmbH</a> </p> <p> そんなとき、<a href = "https://vectornator.io/">本家のページ</a>にてこのような一文を見かけました。 </p> <img src = "01.png"> <br><br><br><br><br><br>  <div class = "kajonaiyou"> 訳：「Vectornatorを使用すると、すべてのプロジェクトで使用できる数千のアイコンに素早くアクセスすることができます。」 </div> <div class = "yohaku"></div> <h3 class = "komidasi"> 何？ </h3> <p> <strong>「数千のアイコンにアクセスできる」</strong>ですと？<br> すごい機能が隠されていました。これは試してみるしかないですね。 </p> <br><br><br><br> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4990057280" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br><br><br><br>  </div> <br><br>  <div class = "katamari"> <h2 class = "kaisi_02"> Iconator、アクセス方法。 </h2> <br> <p> アイコン群にアクセスするには<strong>「Iconator」</strong>という機能を呼び出す必要があります。 </p> <img src = "02.png"> <p> Vectornatorを起動 ▶︎ プロジェクトを開いたら、右上のインスペクターボタン群の「＋」をクリックします。 </p> <img src = "03.png"> <p> インポートメニューが開かれました。 </p> <img src = "04.png"> <p> 下部右端の「Iconator」をタップ。 </p> <img src = "05.png"> <p> これで検索ワードが入力できるように成増。 </p> <img src = "06.png"> <p> 試しに「star」と入力してみました。<br> フフ。いっぱいアイコンが出てきたぞ。 </p> <img src = "08.png"> <p> 気に入ったアイコンをワークスペース上にドラッグします。 </p> <img src = "09.png"> <p> これだけで完了！ちゃんとベクターデータとして認識されているみたいですね。 </p> <div class = "yohaku"></div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4990057280" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br><br><br><br>  　</div>  <div class = "katamari"> <h2 class = "kaisi_02"> 観てるだけで時が経つ。 </h2> <p> 千種類単位のアイコンにアクセスできるIconator。検索キーワードは日本語には対応していないようです。<br> その辺はちょっと残念ですが、「ふ」の拙い英語力で少し検索してみましょう。 </p> <div class = "imglabel"> <p> 「twitter」 </p> </div> <img src = "10.png"> <p> 「twitter」で検索。<br> モノクロ表示されているものが単一または複数のオブジェクトで、カラー表示がグループ構造になっているようです。 </p><br><br><br> <div class = "imglabel"> <p> 「child」 </p> </div> <img src = "11.png"> <p> 「child」。<br> 〽️ 熊の子見ていたかくれんぼー </p><br><br><br> <div class = "imglabel"> <p> 「mouse」 </p> </div> <img src = "12.png"> <p> 「mouse」で検索したら予想外。<br> 「ねずみ」や「PCのマウス」のアイコンではなく、Mouse Trap（ねずみ取り）が優先的に表示された。 </p><br><br><br> <img src = "14.png"> <p> 下の方へスクロールさせるとそれらがありました。<br> 英語で「ねずみ」は「rat」なんですね。「ふ」の英語力はこの程度です、フフフ。 </p><br><br><br> <p> 表示されたアイコン群を眺めていると、デザイン面でも参考になりそうです。<br> キーワードを入力して、観ているだけでも楽しいものですよ。 </p> <div class = "yohaku"></div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4990057280" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class = "yohaku"></div>  </div> <br><br><br><br>  <div class = "katamari"> <h2 class = "kaisi_02"> ホントに無料でいいのか？ </h2> <p> もちろんですが、取り入れたアイコンをVectornatorの機能を使って編集することができます。<br> あなたのコンテンツのテーマに合うようにカスタマイズしてくださいね。 </p> <img src = "13.png" > <br><br><br> <p> 〜ところで世間では、アイコン画像がweb上で販売されているケースも見られます。<br> 一方、今回紹介したものは、 </p><br><br> <div class = "kajonaiyou"> ◼︎Vectornator自体 : 無料<br> ◼︎数千のアイコン : 無料 </div><br><br><br> <h3 class = "komidasi"> 無料でいいんすか？ </h3><br><br> <p> Iconatorという機能にはホント驚かされました。全て無料で、しかもベクターデータとしてインポート・編集ができるのです。<br><br> UIデザインを作成するときに、アイコンを１つ１つ自作しなくてもIconatorを使って画面上に配置していくことができますね！<br> これは便利です。是非使ってみてください ♫ </p> <div class = "yohaku"></div> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4990057280" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  </div> <br><br><br><br><br>  <script type="text/javascript"> (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.src=g, d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))}) (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js","msmaflink"); msmaflink({"n":"Apple iPad","b":"Apple(アップル)","t":"MW742J\/A","d":"https:\/\/images-fe.ssl-images-amazon.com","c_p":"\/images\/I","p":["\/41h0H4SCgPL.jpg","\/41OeCBJv7mL.jpg","\/31fm01rvNlL.jpg","\/31BEJuMevgL.jpg"],"u":{"u":"https:\/\/www.amazon.co.jp\/Apple-iPad-10-2%E3%82%A4%E3%83%B3%E3%83%81-Wi-Fi-32GB\/dp\/B07PQRFYLF","t":"amazon","r_v":""},"aid":{"amazon":"1617364","rakuten":"1526493","yahoo":"1618576"},"eid":"swwoc","s":"s"}); </script> <div id="msmaflink-swwoc">リンク</div>  <br><br><br><br><br> <div class = "codelabel"> <p> 関連記事 </p> </div>  <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/nator/nator.html"><img src ="https://fuuno.net/SVG/nator/icon.png"> <strong>Vectornator、「 iPadのイラレ」となりうるのか。 </strong><br> <p>2019.12.19<br> 〽️ 結論。ほぼイラレ。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/data/data.html"><img src ="https://fuuno.net/SVG/data/icon.png"> <strong>iPadでSVGデータを作成、<br>Vectornator+ LiquidLogic〜無料。 </strong><br> <p>2019.12.12<br> 〽️ 都合のいい話がありました。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/tyoku/tyoku.html"><img src ="https://fuuno.net/SVG/tyoku/icon.png"> <strong>SVGをCSSで編集。 </strong><br> <p>2019.12.06<br> 〽️ 結果、用途が広がりまくります。 </p> </a> </li> </ul>   <ul class = "kijilist"> <li><a href = "https://fuuno.net/SVG/passgoto/passgoto.html" target = "_blank" ><img src ="https://fuuno.net/SVG/passgoto/icon.png"> <strong>SVG、オブジェクト単位でCSSを適用させる。 </strong><br> <p>2019.12.08<br> 〽️ 必要な箇所だけカスタマイズしたい！ </p> </a> </li> </ul>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6918386144875495" data-ad-slot="4990057280" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br><br><br><br> <br><br><br><br> <script> //classnameで要素たちをhtmlcollectionとして取得。変数名はclstrs。 var clstrs = document.getElementsByClassName("codesample"); //順に取り出しreplace。 for(i=0;i<=clstrs.length;i++) { //innerHTMLを取り出す var clstr = clstrs[i].innerHTML; //試しにlog。 // console.log(clstr); //---------------ここからreplace作業。----------------------- //タグを特殊文字化。 clstr = clstr.replace(/</g,"<"); clstr = clstr.replace(/>/g,">"); //ダブルクオテーション。 //clstr = clstr.replace(/"/g,"&quot"); //自動改行。 clstr = clstr.replace(/\r?\n/g,'<br>'); //{}の字下げ。 clstr = clstr.replace(/\{/g,"{<div style = 'padding-left:4em;margin-top:-1.7em; margin-bottom:-1.7em;'>"); clstr = clstr.replace(/\}/g,"}</div>"); //「「1 で▶︎をdardcyanに。// clstr = clstr.replace(/「「１/g,"<span style = 'color:dodgerblue;'>"); clstr = clstr.replace(/」」/g,"</span>"); //「「２　で行を強調。 clstr = clstr.replace(/「「２/g,"<span style = 'color:mediumblue;'>"); clstr = clstr.replace(/」」/g,"</span>");//これ共通でいいのでは？ // console.log(clstr); //「「３　でコメアウト。 clstr = clstr.replace(/「「３/g,"<span style = 'color:gray;'>"); //「「４　は紫式部。 clstr = clstr.replace(/「「４/g,"<span style = 'color:mediumvioletred;'>"); //「「５　はダークオレンジ。 clstr = clstr.replace(/「「５/g,"<span style = 'color:darkorange;'>"); //最初のbrを削除。 clstr = clstr.replace(/<br>/,""); //字下げさせたくない波括弧。 clstr = clstr.replace(/｛/g,"{"); clstr = clstr.replace(/｝/g,"}"); //反映させる。--------------------------------------------- var realstr = clstrs[i]; realstr.innerHTML = clstr; } </script>  <div id = "profile"> <hr><hr> <img src = "../../main_img/fu_icon.png " style = "width:31%;float:left"> </div> <div class = "komidasi" style = "background-color:forestgreen; color:azure;"> <h3 style = "padding:0.5em;">「ふ」です。</h3> </div> <p>swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。<br><br> <a href = "https://twitter.com/fukarakaru" style = "text-decoration:none; font-size:1.7em;">🐧 twitter 🐧</a> </p><hr>  </div> </body> </html>

CINXE.COM

Vectornatorは数千のアイコンが入手できる。