CSSカスタマイズ

TumblrブログのCSSをカスタマイズする

日本ではあまりメジャーではありませんが「Tumblr」というSNSがあります。Tumblrにはブログ機能があり、自分の投稿だけをまとめてブログのように表示させることができます。Tumblrにはブログテーマを差し替えて簡単に見た目を変える機能もありますが、テーマの大半は有料で、無料テーマの方はやや古い印象を受ける人がいるかもしれません。本記事では無料のTumblrテーマである「Tumblr Official」の見た目をカスタムCSSで変更します。

Tumblrとは

Wikipediaによれば「Tumblr（タンブラー）は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。」とのことです。欲張りすぎて何をするサービスなのかあいまいな印象がありますが「Tumblr＝ブログ」と考えて差し支えありません。Tumblrはブログです。「blogger」「note」「amebaownd」と同じです。

Tumblrの利点

ブログサービスとしてのTumblrにはいくつかの他社サービスにない利点があります。

利点

  • 無料、無広告
  • 商用利用可能(アフィリエイトリンク設置可能)
  • 独自ドメイン利用可能
  • 入室パスワード付ブログを開設可能
  • マークダウン記法対応

特にマークダウン記法対応は、マークダウン記法に慣れた方には魅力的な利点です。このブログ記事はAmeba Ownd上で書かれていますがAmeba Owndはマークダウン記法に対応していません。

Tumblrの使い方

ブログサービスとしてのTumblrの使い方は以下の通りです。

  1. 会員登録する
  2. 新しいブログを作る
  3. ブログの見た目をカスタマイズする(必要に応じて)
  4. ダッシュボードから記事を投稿する(記事はSNSとブログの両方に掲載される)
  5. Twitter等でブログのURLを周知する(Tumblr会員以外にも周知するため)

Tumblrの欠点は他のSNSに比べて日本人の利用者が少ないことです。TumblrはSNSであるのでTumblr会員に対して自分の記事をアピールすることは容易ですが、Tumblr会員以外にもアピールするためにはTwitter等の補助手段が必要でしょう。

「Tumblr Official」テーマのCSSカスタマイズ

本記事では無料のTumblrテーマである「Tumblr Official」の見た目をカスタムCSSで変更します。

準備

Tumblrブログの新規作成が完了したら、ブログのカスタマイズ画面を開き、まず＜テーマ＝Tumblr Official＞と設定し、次に＜レイアウト＝Grid＞と設定します。

カスタマイズ画面右側にはプレビューが表示されますが、この時点ではまだ記事は投稿されていないでしょう。そこで、詳細設定をクリックし、＜Preview＝サンプル投稿＞と設定します。これでサンプル投稿がカスタマイズ画面右側に表示されるようになります。

さて、サンプル投稿を見ますと、記事一覧画面における各記事は、高さが揃っていないことがわかります。これでは記事が横一列に美しく並びません。ここからCSSカスタマイズによって横一列に美しく並ぶように変えていきます。

カスタマイズ画面の詳細設定の下に、カスタムCSS記入欄のあることを確認してください。

文字色を変える

Tumblr Officialでは、基本文字色として濃い灰色が指定されています。これをCSSカスタマイズで黒に変えます。

カスタムCSS

  1. body{color: #000000;}

文字の太さを変える

Tumblr Officialでは、記事タイトルおよび本文中の見出しが太字になっていません。これをCSSカスタマイズで太字に変えます。

カスタムCSS

  1. .post-content h2.title, 
  2. .post-content .body-text h2, 
  3. .post-content .body-text h3, 
  4. .post-content .body-text h4{font-weight:bold;}


行間隔を変える

Tumblr Officialでは、本文中の見出しと段落との間に空ける隙間が狭いようです。これを調節します。

カスタムCSS

  1. .post-content .body-text h2{margin-top:2.75em;} 
  2. .post-content .body-text h3{margin-top:1.00em;} 
  3. .post-content .body-text h4{margin-top:0.75em;}

margin-topプロパティは、ある要素とその上にある要素との間に空ける隙間の寸法を指定するプロパティです。＜margin-top:1em;＞と指定した場合、要素の上部分に空ける隙間が文字1文字分になります。

クリック可能であることを強調する

Tumblr Officialの記事一覧画面では、各記事の記事タイトルをクリックすると全文読めるようになっていますが、記事タイトルがクリック可能であることが強調されていません。ここではCSSカスタマイズでマウスポインタを重ねた時だけ記事タイトルにアンダーラインが引かれるようにします。

カスタムCSS

  1. .post-content h2.title a:hover{text-decoration:underline;}

:hover疑似クラスは、ハイパーリンク<a>〜</a>の上にマウスポインタが重なった場合、という限定的な状況を意味するクラスです。大体の場合は文字修飾プロパティtext-decorationと併用します。＜text-decoration:underline;＞と指定した場合、文字にアンダーラインが引かれます。

description欄の幅を変更する

Tumblr Officialでは、ブログタイトルのすぐ下にdescription(ウェブサイト概要)が書かれていますが、横幅が広すぎるようです。これをCSSカスタマイズで調節します。

カスタムCSS

  1. .description{
  2.     max-width:500px; 
  3.     margin-left:auto; 
  4.     margin-right:auto;
  5. }

max-widthプロパティは、ブラウザウインドウの幅に合わせて要素の幅が可変するような場合に要素の最大寸法を指定するプロパティです。＜max-width:500px;＞と指定した場合、500px以上の大きさにはなりません。

margin-leftプロパティ(margin-rightプロパティ)は、ある要素とその左(その右)にある要素との間に空ける隙間の寸法を指定するプロパティです。＜margin-left:auto; margin-right:auto;＞と指定した場合で且つその左右にブラウザウインドウ以外の隣接要素がない場合、結果としてその要素は画面中央に配置されます。

記事一覧画面における記事タイトルの寸法を揃える

Tumblr Officialの記事一覧画面では、各記事のタイトルは省略なしに全て表示され、タイトル欄の寸法は文字数に合わせて変化します。しかしこれでは美しくないため、CSSカスタマイズでタイトル欄の寸法を固定します。

CSS

  1. .index-page.grid h2.title{
  2.     font-size: 20px; 
  3.     height: 75px; 
  4.     overflow-y:hidden;
  5. }

まずfont-sizeプロパティで記事一覧画面における各記事の記事タイトルの文字サイズを20pxに固定した上で、heightプロパティで記事タイトル欄の高さを75pxに固定します。これで3行表示できます。記事タイトル文字数が長すぎる場合に備え、高さ75pxをはみ出した部分はoverflow-yプロパティで隠す(hidden)ものとします。

記事一覧画面におけるサムネイルの寸法を揃える

Tumblr Officialの記事一覧画面では、各記事内の挿絵がそのままサムネイルとして使われます。サムネイルの縦横比を揃える機能はありません。これをCSSカスタマイズで同じ高さに統一します。

CSS

  1. .index-page.grid .body-text img{
  2.     height: 180px; 
  3.     object-fit: cover;
  4. }

object-fitプロパティは、img要素の縦横比とその中に貼る画像の縦横比とが異なる時に使うプロパティです。＜object-fit: cover＞と指定した場合、画像の縦横比を保ったままimg要素を完全に覆うようにサイズ調整されます。幅と高さの短い方がimg要素にフィットし、長い方はimg要素の外にはみ出て見えなくなります。

記事一覧画面における各記事ブロックの高さを揃える

ここでは簡易的な方法をとります。

カスタムCSS

  1. @media screen and (min-width: 720px){
  2.     .index-page.grid article .post-wrapper{
  3.         height:700px; 
  4.         overflow-y:hidden;
  5.     }
  6. }

上のCSSでは、heightプロパティを使って各記事ブロックの高さを700pxに固定しています。また各記事ブロックの中身の文章量が多すぎる場合に備え、高さ700pxをはみ出した部分はoverflow-yプロパティで隠す(hidden)ものとします。

@media screen and...の部分はメディアクエリと呼ばれます。ブラウザウインドウの幅が指定した寸法を上回った場合(または下回った場合)、という限定的な状況を意味します。Tumblr Officialの記事一覧画面ではブラウザウインドウサイズが720px未満になると記事ブロックが縦一列に並ぶため、記事ブロックの高さを揃える必要がありません。メディアクエリを使うことで、ブラウザウインドウサイズが720px以上の場合のみ各記事ブロックの高さを揃えるCSSが機能するよう指定することができます。

まとめ

ここまで説明したカスタムCSSを１つにまとめました。下記すべてをTumblr OfficialテーマのカスタムCSS記入欄に貼り付けてください。

カスタムCSS

  1. body{color:#000000;} 

  3. .post-content h2.title, 
  4. .post-content .body-text h2, 
  5. .post-content .body-text h3, 
  6. .post-content .body-text h4{font-weight:bold;} 

  8. .post-content .body-text h2{margin-top:2.75em;} 
  9. .post-content .body-text h3{margin-top:1.00em;} 
  10. .post-content .body-text h4{margin-top:0.75em;}  

  12. .post-content .title a:hover{text-decoration:underline;} 

  14. .description{max-width:500px; margin-left:auto; margin-right:auto;} 

  16. .index-page.grid h2.title{height: 75px; font-size: 20px; overflow-y:hidden;} 

  18. .index-page.grid .body-text img{height: 180px; object-fit: cover;} 

  20. @media screen and (min-width: 720px){ 
  21.     .index-page.grid article .post-wrapper{height:700px; overflow-y:hidden;} 
  22. }

無料で且つ商用利用可能なブログサービスとしては日本にはAmeba Owndがあり、アフィリエイトでなく有料記事を販売したいならnoteがあるので、日本でTumblrを使う人は少ないかもしれません。しかしTumblrにはアート系に適したデザインテーマが多いため、ブログのコンセプトによってはTumblrを選んだ方が良い場合もあります。ブログ開設をご検討の方はぜひ一度Tumblrを確認してみてください。

UX Yokohama

UXデザインをテーマにした横浜のIT勉強会サークルです。

この著者の記事一覧へ

前後の記事

関連記事

0コメント

  • 1000 / 1000