読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

ブログカード風アフィリエイトリンクCSSを作ってみた

はてな
スポンサーリンク

ちょっと「バナーどん!!」とか「テキストリンクそっと」とかでは芸がないのでブログカード風アフィリエイトリンクCSSを作ってみました。

ブログカード風アフィリエイトリンクCSS

作ったCSSは以下のもの。

.ad_box{
    width:95%;
    margin:10px;
    padding:10px;
    border: dashed 1px #0000ff;
}
.ad_box br {
    display: none;
}

.ad_title:before {
     content: "\f046";
     font-family: FontAwesome;
     top: 8px;
     line-height: 1em;
     font-size:140%;
     color: #0000ff;
}

.ad_title{
    width:90%;
    border-bottom: dashed 1px #0000ff;
    margin:10px;
    padding:10px;
    font-weight: bolder;
    font-size: 110%;
}

.ad_main{
}
.ad_img{
    float: left;
    margin:2px;
    padding:2px;
}
.ad_img img{
    width:128px;
    height:128px;
    position: relative;
    top: 0px;
    left: 0px;
}
.ad_img > img:nth-child(n+2){
    display:none;
}

.ad_detail{
    word-wrap: break-word;
    width:90%;
    margin:3px;
    padding:3px;
}

.ad_table{
    clear: both;
    margin:5px;
    padding:5px;
    width:90%;
}
ul.nav{
    padding: 20px;
    font-size: 0;
}
ul.nav li{
    display: inline-block;
    border: none;
    padding: 10px;
    width: 100px;
    text-align: center;
    font-size: 1rem;
    width:45%;
    white-space:nowrap;
}
ul.nav li:nth-child(1)
{
    background: blue;
}
ul.nav li:nth-child(2)
{
    background: red;
}
ul.nav li a{
   color: white;
   text-decoration: none;
   display:block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
ul.nav li  img{
   display:none;
}
.ad_box:after {
}
@media (max-width:375px) {
    .ad_box{
        width:300px;
    }
    ul.nav li{
    width:90%;
    }
}

でこれを使って表示するとこんな感じ。


「ロリポップ!」レンタルサーバー

ロリポップ!は、独自技術によってWordPressを安定・高速化できる環境を作り上げました。アクセス数の多い大規模なWebサイトでも快適に運用することが可能です。また、「簡単インストール機能」を使うと、ファイルのアップロードやデータベースの設定の手間をかけることなく、すぐにWordPressを始めることができます。


月額費用初期費用ディスクスペースMySQL5
2,000円(税抜)3,000円(税抜)400GB100個
独自ドメインメールアカウント共用SSL独自SSL
無制限無制限

いまいち「CSS」の挙動で納得いってない部分もあるのでもう少し調査要ですが、ネタがないのでとりあえず勇み足で公開。
スマホで左右にガタガタ揺れるのはなんとかせねば。

使い方は・・・もう少しかっこよくなったら書きます。
(面倒くさいんじゃないぞ!!出来栄えに納得してないからだぞ!!)

ご利用は責任でお願いします。