const{Fragment:n,jsx:e,jsxs:l}=arguments[0];function _createMdxContent(r){const c={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...r.components},{CodeGroup:i,Image:h}=c;return i||_missingMdxReference("CodeGroup",!0),h||_missingMdxReference("Image",!0),l(n,{children:[e(c.h1,{children:"FontAwesomeでSNSのロゴを手に入れよう"}),"\n",e(h,{src:meta.imgSrc,alt:"Thumbnail",layout:"responsive",width:1200,height:800}),"\n",e(c.h2,{children:"目次"}),"\n",e(c.p,{children:"どうも、こんにちは。"}),"\n",e(c.p,{children:"WEBサイトを自分で作り始めたら誰もが通るであろう、SNSのロゴのお手軽な実装の仕方をお伝えします。"}),"\n",e(c.h3,{children:"SNSのロゴって？"}),"\n",e(c.p,{children:"SNSのロゴというのはWEBサイトなどでよく見るリンクのついたロゴマークですね。"}),"\n",e(c.p,{children:e(c.img,{src:"/images/frontend/HTML/20181130-1.png",alt:"toppage"})}),"\n",e(c.p,{children:"実はこのブログにも使われています！\n右上の方にありますが、スマホなどでは確認できないかもしれません。"}),"\n",e(c.p,{children:"そんなキャッチーなロゴが非常に簡単に自分のサイトでも使えます！"}),"\n",e(c.h3,{children:"FontAwesome"}),"\n",e(c.h4,{children:"FontAwesomeとは"}),"\n",e(c.p,{children:"様々なロゴを提供しているのがFontAwesomeというサイトです。"}),"\n",e(c.p,{children:"フォントオーサムと読みます。"}),"\n",e(c.p,{children:"awesomeというのは形容詞で「畏敬の念を抱かせる」という意味です。"}),"\n",e(c.p,{children:"転じて、まじすごい、神だわ、くらいのテンションで使われたりするそうです。"}),"\n",e(c.h4,{children:"FontAwesomeにアクセス"}),"\n",l(c.p,{children:["まずは",e(c.a,{href:"https://fontawesome.com/",children:"FontAwesome"}),"にアクセス。"]}),"\n",e(c.p,{children:"特にログインとかも必要ないです。"}),"\n",e(c.p,{children:"するとこんな画面になるのでStartをクリック。"}),"\n",e(c.p,{children:e(c.img,{src:"/images/frontend/HTML/20181130-2.png",alt:"20181130-2.png"})}),"\n",e(c.h4,{children:"コードをコピー"}),"\n",e(c.p,{children:"するとページの真ん中の方にコードがあるのでコピー。"}),"\n",e(c.p,{children:e(c.img,{src:"/images/frontend/HTML/20181130-3.png",alt:"FontAwesome_code"})}),"\n",e(c.h4,{children:"headの中に記述"}),"\n",e(c.p,{children:"自分のHTMLのファイルのheadの中に記述"}),"\n",e(i,{title:"sample.html",children:e(c.pre,{children:e(c.code,{className:"language-html",children:'\n\n \n\n \n\n \n'})})}),"\n",e(c.h4,{children:"好きなロゴ、アイコンを探す"}),"\n",e(c.p,{children:e(c.img,{src:"/images/frontend/HTML/20181130-4.png",alt:"exsample"})}),"\n",e(c.p,{children:"いいのが見つかったらクリックしてコードをコピー。"}),"\n",e(c.h4,{children:"bodyに記述"}),"\n",e(i,{title:"sample.html",children:e(c.pre,{children:e(c.code,{className:"language-html",children:' \n \n \n \n'})})}),"\n",e(c.p,{children:"iでもdivでもspanでもいいです。使いたいところに貼りつけましょう。"}),"\n",e(c.h4,{children:"（CSSで値を変更）"}),"\n",e(c.p,{children:"そのままでもいいですが小さかったりするので、CSSを当てます。"}),"\n",e(i,{title:"sample.css",children:e(c.pre,{children:e(c.code,{className:"language-css",children:".fab {\n font-size: 36px;\n}\n\ni {\n color: #55caee;\n}\n\ndiv {\n color: #315096;\n}\n\nspan {\n color: #cd201f;\n}\n"})})}),"\n",e(c.p,{children:"これはあくまで例です。"}),"\n",e(c.p,{children:e(c.img,{src:"/images/frontend/HTML/20181130-5.png",alt:"logo_example"})}),"\n",e(c.p,{children:"このような形で表示されているはずです。"}),"\n",e(c.p,{children:"わからない部分とかがあればツイッターでリプかブログのコンタクトフォームからご連絡ください。\n余裕があればご回答します！"}),"\n",e(c.p,{children:"FontAwesomeにはたくさんのロゴがあるので、\n好きなものを探してみてください！"}),"\n",e(c.p,{children:"今度はこのFontたちにリンクを貼る方法もまとめたいと思います。"}),"\n",e(c.h3,{children:"Conclusion"}),"\n",l(c.ol,{children:["\n",l(c.li,{children:[e(c.a,{href:"https://fontawesome.com/",children:"https://fontawesome.com/"})," にアクセス"]}),"\n",e(c.li,{children:"headタグ内にコードを記述"}),"\n",e(c.li,{children:"使いたいロゴのHTMLをbodyタグ内に記述"}),"\n",e(c.li,{children:"CSSを記述する"}),"\n"]}),"\n",e(c.p,{children:"FontAwesome、まじ神だわ"})]})}return{default:function(n={}){const{wrapper:l}=n.components||{};return l?e(l,{...n,children:e(_createMdxContent,{...n})}):_createMdxContent(n)}};function _missingMdxReference(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}