Kuron Blog

Kuron

【スマホ対応】ShareHtmlを、もっと綺麗にしたメーカーのCSS,Sassコード配布

code ,  

こんにちは!クロンです

ShareHtmlを、もっと綺麗にしたメーカー」で使えるcss,sassコードを配布します。

完成形↓

コードを配布する理由

このブログでは「ShareHtmlを、もっと綺麗にしたメーカー」を愛用してるのですが、既存のcssコードで気になる点がいくつか。

  • スマホ対応していない
  • sass対応していない
  • 個人的に無駄と思うコードがあった

特にスマホ対応のコードは、ちょっと需要あるのかなと思いました。

※ぶっちゃけサイトパフォーマンス的には、既存のコードとあまり変わらないと思うので、気になる方だけどうぞ。

CSSコード(スマホ対応)

  • /*—- New Share HTML ——————–*/
  • .link-box {
  •   border: 1px solid #e1e1e1;
  •   padding: 12px;
  •   display: -webkit-box;
  •   display: -ms-flexbox;
  •   display: flex;
  • }
  • .link-box .img-box {
  •   width: 25%;
  • }
  • .link-box .img-box div {
  •   min-height: 80px;
  •   background-size: cover;
  •   background-position: center center;
  • }
  • .link-box .text-box {
  •   width: 75%;
  •   padding-left: 20px;
  •   line-height: 1.5;
  • }
  • .link-box .text-box .title {
  •   font-size: 13px;
  •   font-weight: bold;
  •   color: #428bca;
  • }
  • .link-box .text-box .description {
  •   font-size: 11px;
  •   color: #333;
  •   margin-top: 8px;
  • }
  • @media (min-width: 479px) {
  •   .link-box:hover {
  •     background-color: #f3f3f3;
  •     -webkit-transition: 0.35s;
  •     transition: 0.35s;
  •   }
  •   .link-box .img-box div {
  •     min-height: 168px;
  •   }
  •   .link-box .text-box {
  •     line-height: 1.7;
  •   }
  •   .link-box .text-box .title {
  •     font-size: 18px;
  •   }
  •   .link-box .text-box .description {
  •     font-size: 15px;
  •   }
  • }
  • /*—- New Share HTML ここまで ——————–*/

Sassコード(スマホ対応)

  • /*—- New Share HTML ——————–*/
  • .link-box {
  •     border: 1px solid #e1e1e1;
  •     padding: 12px;
  •     display: flex;
  •     
  •     .img-box {
  •         width: 25%;
  •         div {
  •             min-height: 80px;
  •             background-size: cover;
  •             background-position: center center;
  •         }
  •     }
  •     
  •     .text-box {
  •         width: 75%;
  •         padding-left: 20px;
  •         line-height: 1.5;
  •         .title {
  •             font-size: 13px;
  •             font-weight: bold;
  •             color: #428bca;
  •         }
  •         .description {
  •             font-size: 11px;
  •             color: #333;
  •             margin-top: 8px;
  •         }
  •     }
  •     @media (min-width:479px) {
  •         &:hover {
  •             background-color :#f3f3f3;
  •             transition: 0.35s;
  •         }
  •         
  •         .img-box div {
  •             min-height: 168px;
  •         }
  •         .text-box {
  •             line-height: 1.7;
  •             
  •             .title {
  •                 font-size: 18px;
  •             }
  •         
  •             .description {
  •                 font-size: 15px;
  •             }
  •         }
  •     }
  • }
  • /*—- New Share HTML ここまで ——————–*/