<h1 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform:rotate(-3deg);border-bottom:solid 2px #cd8c5c;width:100%;color:#cd8c5c;font-size:18pt;padding-bottom:5px;margin-bottom:30px;">ä½ã§ãããã§ãã³ããã§è§£æ±ºï¼ã¨ã¯ãããªã</h1>
<p><span style="color:#848484">ã³ã³ãã¥ã¼ã¿ã¼è¨èªãªãã¦ä½ã«ãåãããããã°ãå§ãã¦ãCSSãhtmlã¯ã»ã¨ãã©ã³ããã§ãããããã¨ãã¿ãªããã</span></p>
<p>ä»äºã¯èª¿ç師ãªã®ã§ããã½ã³ã³ã¯çéããªå©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ï¼<a href="http://twitter.com/immukodono"><i class="fab fa-twitter"></i>immukodono</a>ï¼ã</p>
<p>ã§ãè²ã 調ã¹ãã®ã好ããªã®ã§ãèå³ããããã°ãå§ãã¦å°ããã¤æ¥½ãããªã£ã¦ãã¾ããï¼</p>
<p>ä»åã¯ã<br />
<b>ãªã¹ãï¼liï¼ã®é æåããã©ã³ããªã¼ãµã ã®çµµæåã«ããããªãã¨ãã£ã¦ã¿ããããªããªã大å¤ã ã£ã</b>ã¨ããè¨äºã§ãã</p>
<p>å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã使ç¨ãã¦ãããLion Mediaãã¨ãããã¼ãç¹æã®åé¡ãããªã®ã§ã注æã§ãã</p>
<p><strong>çµè«</strong>ããè¨ãã¨CSSã«ã.contentããä»ãããä¸æãããã¾ããã(ã»∀ã»)♪</p>
<p>[adchord]<br />
<!--TOC--></p>
<h2>Font Awesomeï¼ãã©ã³ããªã¼ãµã ï¼ã¨ãªï¼</h2>
<p>ãã©ã³ããªã¼ãµã ã¨ã¯ã<br />
<strong>æ§ã ãªã¢ã¤ã³ã³ã表示ã§ããã¦ã§ããã©ã³ã</strong>ã§ãã</p>
<p>ä¾ãã°ããå©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ãã®ãã <i class="far fa-hand-point-right"></i> ã<i class="fas fa-child" aria-hidden="true"></i>ãããã©ã³ããªã¼ãµã å çã®ä»æ¥ã§ãã</p>
<p>ã¢ã¤ã³ã³ã§ããç»åã§ã¯ãªããããã¾ã§ãã©ã³ããªã®ã§ãæåãã¤ã¸ãã®ã¨åæ§ã«å¤§ãããè²ãªã©ãå¤ãããã¨ãã§ãã¾ãã</p>
<p><center><span style="color:#00aced"><i class="fab fa-twitter"></i></span> <i class="fab fa-twitter"></i> <span style="color:#ec6d71;"><i class="fab fa-twitter"></i></span> <span style="color:#848484"><i class="fab fa-twitter"></i></span></center><br />
</p>
<p>ã¢ã¤ã³ã³ã®ç¨®é¡ã¯ãããã <i class="far fa-clock fa-spin"></i></p>
<p>Twitterã¢ã¤ã³ã³ã®ä»ã«ãã<span style="color:#00B900"><i class="fab fa-line"></i></span>ãªã©ã®ä¼æ¥ãã´ã</p>
<p>é¡æåï¼<i class="far fa-grin-stars"></i> <i class="far fa-surprise"></i> <i class="far fa-smile-wink"></i>ï¼ã¨ãã</p>
<p>é£è¡æ©ï¼<i class="fas fa-plane-departure"></i> <i class="fas fa-plane"></i> <i class="fas fa-fighter-jet"></i>ï¼ã¨ãã</p>
<p>ãã³ï¼<i class="fas fa-pen"></i> <i class="fas fa-pencil-alt"></i> <i class="fas fa-pen-fancy"></i>ï¼ã¨ãã</p>
<p>èç <span style="color:#ec6d71;"><i class="fas fa-paw"></i></span> ãããã¾ãããï¼´ωï½ï¼</p>
<h2>ãã©ã³ããªã¼ãµã ãç®æ¡æ¸ããªã¹ãã®ãã¼ã«ã¼ã«</h2>
<p>ã§ã<br />
ãã®ãã©ã³ããªã¼ãµã ã®ã¢ã¤ã³ã³ãããªã¹ãã¿ã°ï¼liï¼ã§å²ã£ãæã«åºæ¥ã<strong>ç®æ¡æ¸ãã®ãã»ãé»ããé¨åã«ä½¿ããã</strong>ã®ã§ãã</p>
<p>ãã¡ãã®<a href="https://saruwakakun.com/html-css/reference/ul-ol-li-design">ãµã«ã¯ã«ããã®è¨äº <i class="fas fa-external-link-alt"></i> </a> ãåèã«ãã¾ããï¼</p>
<p>
<div class="linkcard"><div class="lkc-external-wrap"><a class="lkc-link no_icon" href="https://saruwakakun.com/html-css/reference/ul-ol-li-design" data-lkc-id="56" target="_blank" rel="external noopener"><div class="lkc-card"><div class="lkc-info"><div class="lkc-favicon"><img src="https://www.google.com/s2/favicons?domain=saruwakakun.com" alt="" width="16" height="16" /></div><div class="lkc-domain">ãµã«ã¯ã« | ãµã«ã§ãåããå³è§£èª¬æãã¬ã¸ã³</div><div class="lkc-share"> <div class="lkc-sns-x">1 Post</div> <div class="lkc-sns-fb">24 Shares</div> <div class="lkc-sns-hb">107 Users</div> <div class="lkc-sns-po">286 Pockets</div></div></div><div class="lkc-content"><figure class="lkc-thumbnail"><img class="lkc-thumbnail-img" src="//xn--p9jk9143a.tokyo/wp-content/uploads/pz-linkcard/cache/5415aeca62f16e4ff19992fea212b6899209257c0e7de15ed67b9380fe3277ac.jpeg" width="100px" height="108px" alt="" /></figure><div class="lkc-title">ã³ããã§ä½¿ãããªã¹ããã¶ã¤ã³34é¸ï¼CSSã§ç®æ¡æ¸ããããããã«</div><div class="lkc-url" title="https://saruwakakun.com/html-css/reference/ul-ol-li-design">https://saruwakakun.com/html-css/reference/ul-ol-li-design</div></div><div class="clear"></div></div></a></div></div><br />
</p>
<h3>ã¾ãã¯ãã©ã³ããªã¼ãµã ã表示ã§ããããã«ãã</h3>
<p>ãã©ã³ããªã¼ãµã ãããã°ã«è¡¨ç¤ºã§ããããã«ããããã«ã¯ããã¼ãã®<;head>;é¨åã«ãã©ã³ããªã¼ãµã ãèªã¿è¾¼ãçºã®éæ³ããããªããã°ããã¾ããã</p>
<p>å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã®<;head>;ã«ã¯ãã®ããã«è¨è¿°ãã¦ããã¾ãã</p>
<p></p>
<div style="display:inline-block;background: #fffff4; padding: 15px; border: dotted 3px #a3b9e0; border-radius: 10px; word-break: break-all;"><;link href=&#8221;https://use.fontawesome.com/releases/v5.6.1/css/all.css&#8221; rel=&#8221;stylesheet&#8221;>;</div>
<p></p>
<p>ããã§ããã°ã«<br />
ã<;i class=&#8221;fab fa-twitter&#8221;>;<;/i>;<br />
ã®ããã«è¨è¿°ããã¨ã<i class="fab fa-twitter"></i>ã¢ã¤ã³ã³ã表示ããã¾ãã</p>
<p>ã¢ã¤ã³ã³ã¯<a href="https://fontawesome.com/icons?d=listing">ãFont Awesomeãã®ä¸è¦§</a>ããã©ããã</p>
<h3>LION MEDIAã®<;head>;ç·¨é</h3>
<p>LION MEDIAã§<;head>;å ãç·¨éããæã¯ãããã·ã¥ãã¼ãã®ãå¤è¦³ãããããé«åº¦ãªè¨å®ããé¸æããã°åºæ¥ã¾ããã</p>
<p>ãã®ä»ã®ãã¼ãã®å ´åã¯ããã¼ãã®ç·¨éããããããã¼ããããã¼ï¼header.phpï¼ããæ¢ãã¾ãã</p>
<div class="wp-caption"><img src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117095534.jpg"/></p>
<p class="wp-caption-text">LION MEDIAã®å ´å</p>
</div>
<h2>å®éã«CSSãã³ãããã¦ã¿ã</h2>
<p>ãã©ã³ããªã¼ãµã ã表示ãããç¶æ ã«ãªã£ãã®ã§ãå ã»ã©ã®è¨äºéãã«CSSã¸ã³ãããã¦ã¿ã¾ããã</p>
<div class="wp-caption"><img src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117122149.jpg"/></p>
<p class="wp-caption-text">é¸ãã ãã¶ã¤ã³ã¯ãã¡ã</p>
</div>
<pre> 
ul { 
 border: solid 2px #ffb03f; 
 padding: 0 0.5em; 
 position: relative; 
} 
 
ul li { 
 line-height: 1.5; 
 padding: 0.5em 0 0.5em 1.4em; 
 border-bottom: dashed 1px silver; 
 list-style-type: none!important; 
} 
 
ul li:before { 
 font-family: "Font Awesome 5 Free"; 
 content: "f138";/*ã¢ã¤ã³ã³ç¨®é¡*/ 
 position: absolute; 
 left : 0.5em; /*左端ããã®ã¢ã¤ã³ã³ã¾ã§*/ 
 color: #ffb03f; /*ã¢ã¤ã³ã³è²*/ 
} 
 
ul li:last-of-type{ 
 border-bottom: none; 
} 
</pre>
<h3>å®éã«ã©ããªã£ãã</h3>
<p>å³å´ã«ãã¬ãã¥ã¼ã表示ãããã®ã§ããã<br />
ã¨ã¦ãæ¬æ°ãªæãã§ã¬ã¤ã¢ã¦ããå´©ãã¾ãã(ã_ã)</p>
<div class="wp-caption"><img src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117125415.jpg"/></p>
<p class="wp-caption-text">ãããæã«ãªã¹ããã¶ã¤ã³ãæ¡ç¨ããã¦ã</p>
</div>
<p>å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã¯ã<strong>LION MEDIA</strong>ãã¨ããã¨ã£ã¦ãç´ æ´ããããã¼ãã使ã£ã¦ããã®ã§ãããã¬ã¤ã¢ã¦ãã«ãliã¿ã°ã£ã¦ä½¿ããã¦ãããã§ããã</p>
<p>ææãªåã</p>
<p>ããããªé¨åã«ãå ã»ã©CSSã«æå®ãããã¶ã¤ã³ãåæ ããã¦ã¾ãã£ã¦ã¾ãã</p>
<p>ããããããåã£ãï¼</p>
<h3>解決çã¯ããã®ã…</h3>
<p>ããããæ°æéããããä¸ããã¾ãã£ã¦è§£æ±ºãæ¢ãã¾ãããè¦ã¤ãããã</p>
<p>諦ãããããã®æããã¡å ã§<strong>ããäº</strong>ããã£ã¦ã¿ãã¨ãããã¬ã¤ã¢ã¦ãå´©ããç´ãã¾ããï¼</p>
<h2>.content ã§è§£æ±ºï¼</h2>
<p>å ã»ã©å ¥åããCSSã®ä¸ãé¡ã£ã¦ã¿ãã¨ããããã£ãè¨è¿°ãè¦ã¤ãã¾ãã <i class="far fa-hand-point-down"></i></p>
<p><img alt="ãªã¹ãã®æåãµã¤ãºãå¤æ´ããããã«.contentã¨è¨è¿°ãã¦ãã" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117122154.jpg"/></p>
<p>éå»ã«ã<br />
ãªã¹ãå ã®æåã®å¤§ãããããã£ã¨å¤§ããããããCSSã§æå®ããè·¡ã§ããã</p>
<p>ãã¡ãããããã大å 輩æ¹ã®æ å ±ãã°ã°ã£ã¦ã³ããããã ããªã®ã§ãç´°ããäºã¯ããåãããè¨è¿°ãããã®ã§ã(ï½¥дï½¥`*)</p>
<p>ãã®æã¯<strong>ãul liãã®åã«ã.contentãã¨è¨è¿°</strong>ãã¦ããã¾ãã</p>
<p>ããã§ã<br />
試ãã«ãã£ãè¨è¿°ããCSSã®åã«ã.contentããä»ãã¦ã¿ã¾ããã</p>
<div class="wp-caption"><img src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117015418.jpg"/></p>
<p class="wp-caption-text">ãã¡å ã§.contentãä»ãã¦ã¿ã</p>
</div>
<p>ãã㨅</p>
<p><img alt=".contentãåã«ã¤ããç¶æ ã§CSSã«æ¸ãè¾¼ãã ã¨ããä¸æãããã¾ãã" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117015421.jpg"/></p>
<p>ããï¼</p>
<p>é»è²ãç·ã¨ããç¢å°ã®ãã¼ã«ã¼ã¨ããç¡ããªã£ã¦ãï¼ï¼</p>
<p>ã©ãããéãè¦ãã¦ããããã§ã( •Ì .Ì« •Ì )â§</p>
<h2>好ã¿ã®ã¢ã¤ã³ã³ãé¸ãã§ãã¼ã«ã¼ã«æå®</h2>
<p>å ã»ã©ã®<a href="https://saruwakakun.com/html-css/reference/ul-ol-li-design">ãµã«ã¯ã«ããã®è¨äº <i class="fas fa-external-link-alt"></i> </a> ã§ã¯ããªã¹ãããªã·ã£ã¬ãªæ ã§å²ããã¶ã¤ã³ã§ããã</p>
<p>ãããè¯ãã®ã§ããããªã¹ãã<b>ãã¤ãæ ã§å²ããã訳ã§ã¯ãªã</b>ã®ã§ãä»åã¯<strong>ãªã¹ãã®ãã»ãé»ãããFont Awesomeã«å¤æ´ããã ã</strong>ã«ãã¾ãã(˘ω˘)</p>
<p>使ãããã¢ã¤ã³ã³ã¯…<br />
ããã¡ãã®ã¹ãã¤ã«ã¡ãã<i class="far fa-smile-wink fa-lg"></i></p>
<p>以ä¸ã®ããã«è¨è¿°ãã¾ãã<i class="far fa-hand-point-down"></i></p>
<pre>.content ul li:before { 
 font-family: "Font Awesome 5 Free"; 
 content: "f4da";/*ã¢ã¤ã³ã³ã®ã³ã¼ã*/ 
 position: absolute; 
 display: block; 
 padding: 0.5em; 
 width: 1.2em; 
 color: #028760; /*ã¢ã¤ã³ã³è²*/ 
 font-weight: normal;/*ã¢ã¤ã³ã³ã¯å¤ªåã«ããªã*/ 
 text-align: center; 
 left : -0.5em; /*左端ããã®ã¢ã¤ã³ã³ã¾ã§ã®è·é¢*/ 
 top : -0.4px 
}</pre>
<p></p>
<p>ã¢ã¤ã³ã³ãå¤æ´ãããå ´åã¯ã<br />
<a href="https://fontawesome.com/icons?d=listing">ãFont Awesomeãã®ä¸è¦§</a>ãã好ã¿ã®ã¢ã¤ã³ã³ã®ã³ã¼ãã«å¤ãã¦ãã ããã</p>
<p><img alt="Font Awesomeã®ä¸è¦§ããé¸ãã§ã³ã¼ããå¤ããã°å¥½ããªã¢ã¤ã³ã³ãæå®ã§ãã¾ã" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117015424.jpg"/></p>
<p>åºæ¬ã¯ãµã«ã¯ã«ããã®è¨äºã§å®çµããã¯ãã§ãã®ã§ãå©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã®è¨äºãåèã«ãã人ã¯ã»ã¨ãã©ããªãã¨æãã¾ãã ç¬</p>
<p>htmlã«è©³ããæ¹ã«ã¯é¼»ã§ç¬ãããã¨æãã¾ãã®ã§ãæ£ããããæ¹ããåãã®æ¹ãããã£ãããã°æãã¦é ãããã§ã(>_<;.)</p>
<div class="wp-caption"><img src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117025033.jpg"/></p>
<p class="wp-caption-text">ãªã¹ãããããªæãã«ãªãã¾ããï¼</p>
</div>
<p>ä»åã¯ã<br />
å©¿ã©ã®<i class="fas fa-child" aria-hidden="true"></i>ã®ãããªæ¹ã®åèã«ãªãã°ã¨æããæ稿ãã¾ããã( ´_ã`)</p>
<p><a href="//www.blogmura.com/ranking.html"><img alt="ããã°ã©ã³ãã³ã°ã»ããã°æ" src="https://xn--p9jk9143a.tokyo/wp-content/uploads/2019/01/20190117050807.png"/></a></p>

Categories: ブログとアプリと私
Leave a Comment
\\ 関連記事はこちら //
- BRAVE Rewardsの認証クリエイターに登録してみた！スマホ版だと認証されていないと表示されるお話
仮想通貨のチップ機能で収益化 ブラウジングで仮想通貨の報酬が受け取れる？ って、もうよく分からないけ…Read More
- ブラウザのBRAVEを使うと仮想通貨のBATが稼げるということで使ってみたお話
お金が稼げるブラウザ？ ポイ活がすごく流行ってますよね。 昔からポイントサイトは利用してるんですが、…Read More
- 素人でも出来たよ！Page Speed Insightsのスコアを上げるためにやったことアレコレ | LION MEDIA
試行錯誤の結果、スコアは倍に！ 久しぶりにCSSなどをイジりましたが、手探りで触りだすと何をしようと…Read More