アシスタントの江連です。

まだ時々寒いですが、個人的にはもう春だと思っています。

みなさまいかがお過ごしでしょうか。

簡単にサイトが作れるTumblr。

今回からいよいよ応用編です。

TumblrのCSSを変更してみよう

応用編と言いましても、単にCSSのカスタマイズをするだけです。

使用するテーマはこれ！

改めてご紹介させていただきますと、レスポンシブ対応の無料テーマSquareです。

こちら、デフォルトのフォントが游ゴシック…という、なんとも嬉しい仕様になっています。

自分はサイトを少しカラフルにしたいと思ったので、カスタマイズといっても今回は主に色を付けただけですが、CSSが編集できますというところでご参考になれば幸いです。

タイトルを変えてみる

まずサイトのタイトル部分を変えてみたいと思います。

#blog-title>h1>a{
    letter-spacing:6px;
    border-top:solid 2px;
    border-bottom:solid 2px;
    padding:15px 10px;
}

CSSファイルの場所ですが、テーマのカスタマイズ画面の中の詳細設定のなかにカスタムCSSを追加という項目がありますので、そちらに書き込むことができます。

面倒なファイル管理などがないのでお手軽ですね。

今回は、指定のIDとclassにボーダー、字間、パディングなどを加えて調整してみました。

各記事の見出し部分をカスタマイズしてみる

このように、記事の見出しでリンクになっている部分をカスタマイズしてみました。
フォント、背景色、字間などの簡単な調整ですが、印象も変化したかと思います。

h1.post-title a{
    font-family: 'Karla', sans-serif;
    background-color:#D1FFB7;
    letter-spacing:2px;
}

引用部分のカスタマイズ

blockquote{
    background-color: #F7F7F7;
    border-left: solid 3px #FFCCDF;
    margin:5%;
}

左側の調整や、バーの色などを変更してかわいらしくしてみました。

このように、簡単な調整ではありますが、お手軽にカスタマイズができるのは嬉しいですね。

SNSリンクやグーグルアナリティクスなどの設定もできますので、本格的な運用もできます。

自分でサーバーを借りるほどではないが、サイトを自分好みにしたいという方はぜひtumblrにチャレンジしてみてください。