運営元:K'sHoldings株式会社

    【swell】色々な追加cssの備忘録

    当ページのリンクには広告が含まれています。

    お世話になります。

    K’sHoldings株式会社の下道です。

    私が個人的に気に入っているCSSコードを備忘録として記録しておきます。

    興味がある機能があればぜひ使ってみたください!

    目次

    メインビジュアルのフォントサイズ変更

    /* メインビジュアル メインテキスト フォントサイズ */
    @media (min-width: 600px){
    .p-mainVisual__slideTitle.p-mainVisual__slideTitle{font-size: 55px;}}
    
    @media (max-width: 600px){
    .p-mainVisual__slideTitle.p-mainVisual__slideTitle{font-size: 35px;}}
    
    
    /* メインビジュアル サブテキスト フォントサイズ */
    @media (min-width: 600px){
    .p-mainVisual__slideText.p-mainVisual__slideText{font-size: 18px;}}
    
    @media (max-width: 600px){
    .p-mainVisual__slideText.p-mainVisual__slideText{font-size: 19px;}}

    投稿一覧をNEWS風にカスタマイズ

    「投稿リスト」ブロックを追加して、表示方法を「テキスト型」にする

    次に高度な設定から下記の追加CSSクラスを記入

    top-newslist

    カスタマイズの追加CSSに下記コードを記入

    /** トップページのお知らせ一覧 **/
    
    /* 日付とカテゴリー並べ替え */
    .top-newslist .p-postList__cat {
    order: 1;
    }
    .top-newslist .p-postList__times.c-postTimes.u-thin {
    order: 2;
    }
    /* 日付とカテゴリーのアイコン非表示 */
    .top-newslist time.c-postTimes__posted.icon-posted::before,.top-newslist span.p-postList__cat.icon-folder::before{
    display: none;
    }
    /* 日付とカテゴリーの文字サイズ */
    .top-newslist .p-postList__cat,.top-newslist time.c-postTimes__posted {
    font-size: 13px;
    }
    /* カテゴリーの装飾 */
    .top-newslist .p-postList__cat {
    color: #6ca6c7;
    border: solid 1px #6ca6c7;
    border-radius: 5px;
    padding: 3px;
    }

    色や細かい設定をして完成!

    よくあるコーポレートサイトのニュース一覧風に設定可能です。

    「メディアとテキスト」の重なった部分を半透明にする

    /** 重なったテキストの背景を半透明に **/
    .has-white-background-color {
    	background-color:#fff9!important;
    }

    投稿タイトル(H1)を非表示にする

    ※各種ページのCSS用コード欄に記載することで個別設定可能

    h1 {
    display: none;
    }
    .l-mainContent__inner>.post_content {
    margin-top: 0;
    }
    よかったらシェアしてね!

    この記事を書いた人

    がくとのアバター がくと K’sHoldings株式会社 専務取締役COO

    この度は弊社メディアサイトへのご訪問くださいまして誠にありがとうございます。

    当サイトでは、弊社の取り扱いしている商材に関する情報や、その他企業様の商材の中で弊社が自信を持ってお勧めできるもの、また最近話題になりつつあるトレンド商材の世間の口コミ等を客観的に執筆していく所存です。

    まだまだ従業員が足りず更新頻度は少ないと思いますが、どうぞよろしくお願いいたします。

    コメント

    コメントする

    目次