Kakimono

創作系まとめサイト

このブログのテンプレートとカスタマイズについて(ver. 2020/04/21)

このブログはテーマ ストアのSmoothを利用させて頂いています。

デザインCSSによるカスタマイズは下記の通りです。

/* <system section="theme" selected="8599973812333959601"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812333959601.css");
/* </system> */

#blog-title {
    margin: 0px 0px 1em;
    max-width: initial;
    padding: 0.4em 1em;
    text-align: left;
    box-shadow: 0px 2px 4px  #999;
}

.page-archive .archive-entry {
    border: 1px solid #DDD;
    box-shadow: 2px 2px 4px #999;
}

html, body {
    background-color: #fff;
}

.hatena-module-title {
    margin: 0;
    padding: 0.2em 0 1em;
    color: #707070;
    border-top: none;
    font-size: 0.9rem;
}

#title a {
    color: #455a64;
}

#footer {
    font-size:0.8em;
}

#footer a{
    color:#EEE;
}

#footer h4{
    color:#EEE;
}

.entry {
    border: 1px solid #DDD;
    box-shadow: 2px 2px 4px #999;
}

.footer-information{
    background-color: #607d8b;color:#EEE;
}
        
.footer-row{
    display: flex;display: -webkit-flex;
}

.footer-column{
    padding:4px;width:50%;
}

.footer-copyright{
    background-color: #37474f;color:white;padding:2px;
}

.entry-content pre.code {
    background: #eee;
}

#blog-description {
    margin: 0;
}

フッタのカスタマイズは下記の通りです。

<footer id="footer">
    <div class="footer-information">
        <div class="footer-row">
            <div class="footer-column">
                <h4>カキモノ</h4>
                <p>創作系まとめサイト</p>
            </div>
            <div class="footer-column">
                <h4>Links</h4>
                <ul>
                    <li><a href="https://articles.kakimono.net/archive">Archive</a></li>
                    <li><a href="https://articles.kakimono.net/feed">Rss</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright">
        © 2020 Torikuro.
    </div>
</footer>

カラーパレットの選択はこのサイトを使いました。