コピペで頑張るカスタマイズ

お世話になっております。m(_ _)m

サイドバーにアフィリエイト

アフィリエイト

Web Design Trendsさんの   もう迷わない！CSS Flexboxの使い方を徹底解説からのコピペです。

ブログのサイドバーに、こんな感じのアフィリエイト商品リンクを並べてみました。


テキストリンクの下線は消したけど、リンクとわかるアイコンと、マウスオーバーで点線です。

ブラウザを狭くした時に、サイドバーから、はみ出ないように出来ました。スマホでも、このまま表示です。でも…、文字が小さくなってる…、em　指定にしてしまったからですね。失敗として残しておきます。


◎html

  1. <div class="side-container">
  2.     <div class="item01"><div class="af-img">画像コード</div></div>
  3.     <div class="item02"><span class="af-text">テキストコード</span></div>
  4. </div>

　
　
　 ◎css　

  1. .side-container{
  2.   display:flex;    
  3.   align-content: stretch;
  4.   width: 100%;
  5. }
  6. .item01 {
  7. flex-basis:39%;
  8. }
  9. .item02 {
  10. flex-basis:61%;
  11. padding: 0 8px;
  12. word-wrap: break-word;
  13. line-height: 20px;
  14. font-size: 0.8em;
  15. }
  16. .af-img img{
  17.   width: 100%;
  18.   height: auto;
  19. }
  20. .af-text a {color:#000000}
  21. .af-text a:vlink {color:#000000}
  22. .af-text a:hover { text-decoration:underline dotted; }
  23. .af-text a {text-decoration: none;}
  25. .af-text::before {
  26.     content:"\f08e";
  27.     font-family: FontAwesome;
  28.     font-size: 1em;
  29.     font-weight:bold;
  30. }


　
　
「headに要素を追加」

  1. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  2. <script src="https://kit.fontawesome.com/4133822834.js"></script>

 

Font Awesomeのユニコードが反映されなくて、要素の追加がこうなりました…。わかってません。 「content:"\f08e";」は、バージョン4.6.3 です。　


　

webllica.com