サイト制作

サイトのロゴをテキストとcssで作る!

このサイトのロゴデザインをstyleで作ったのでコード載せておきます。

<div class="site-title">
    <a href="<?php echo home_url(); ?>">
        <span class="site-title-main">
            <?php bloginfo( 'name' ); ?>
        </span>
        <span class="site-title-description">
            To fun Word Press</span>
    </a>
</div>

.site-title {
text-align: left;
font-size: 2.4em;
margin: 0;
padding: 10px 5px 0;
width: 250px;
}

.site-title a {
font-family: ‘Vidaloka’, serif;
display: block;
text-decoration: none;
color: #000;
}

.site-title-main {
display:block;
font-size: 1.2em;
line-height: 0.8em;
letter-spacing:-3px;
}

.site-title-description {
display:block;
font-size: 0.4em;
line-height: 0.8em;
letter-spacing:-0.8px;
}

参考にされたい方はぜひどうぞ!