Ha:phazardly

プログラミングとか同人活動しながら2億くらい稼ごうとガンバr

はてなでカスタムリンクバー作ってみたゾ

右の「外部リンクとか」の部分。

f:id:tanakeiq:20171220190634p:plain

スマホ対応してないです。どうせ見ないだろうし。(誰かやったらコード教えてクレメンス)

<div class="custom-link">
    <style type="text/css">
    .custom-link li {
        border-bottom: .5px dashed #e2e2e2;
        border-top: none;
        padding-bottom: 0px;
        height: 100px;
    }

    .custom-link li img {
        width: 30%;
        float: left;
    }

    .custom-link .text-first {
        display: inline-block;
        width: 65%;
        float: right;
    }

    .custom-link .text-first span#link-title {
        font-size: 1.25em;
        display: block;
        margin-left: 10px;
    }

    .custom-link .text-first span#link-desc {
        font-size: .8em;
        display: block;
        margin-left: 10px;
        color: lightgray;
    }

    .custom-link .text-last {
        display: inline-block;
        width: 65%;
        float: right;
        margin-top: 1em;
    }

    .custom-link .text-last span#link-memo {
        font-size: .8em;
        display: block;
        margin-left: 10px;
    }

    <!-- SP対応 -->
    @media screen and (max-width: 960px) {
        .custom-link li img {
            width: auto;
            max-height: 90px;
        }
    }
    </style>
    <ul class="hatena-urllist">
        <li>
            <a href="https://twitter.com/tanakeiQ">
            <img alt="Twitter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/t/tanakeiq/20171220/20171220184427.png">
            <div class="text-first">
                <span id="link-title">Twitter</span>
                <span id="link-desc">Social Networking</span>
            </div>

            <div class="text-last">
                <span id="link-memo">7割エロ画像RTしてるだけ</span>
            </div></a>
        </li>
    </ul>
</div>

2017/12/22: SP対応CSS追加しました