CSS初心者が「Brooklyn」をカスタマイズしてみた

CSS

Webデザイン

いざブログを始めて記事を載せてみると、「こういうデザインにしてみたい！…でも、どうすれば？」という疑問がいくつも浮かんできました。

そこでこの記事では、わたしが実際にやってみた簡単なカスタマイズを、そのままコピペできるコードも含めてご紹介します。

 

 

使ったデザインテーマは？

はてなブログのテーマストアで人気第2位になっている「 Brooklyn 」です。

 

最初は公式テーマの中で好きなデザインを選んで使っていたのですが、実際に記事を投稿してみると、初期設定時には思い至らなかったところが気になってきました。

「せっかく他のテーマに変えることを検討するなら、これまで見たことがなかったテーマストアとやらも覗いてみよう！」ということで、気に入ったデザインがこのBrooklynでした。

 

 

トップページで記事を一覧表示するには？

はてなブログProであれば記事を一覧表示する設定は簡単に出来るそうですが、わたしが使っている無料版では出来ないので、こちらの記事で紹介されていたCSSをそのままコピペさせてもらいました。

 

こちらの記事は、テーマストアで人気のデザイン「 Innocent 」の作者さんが書かれているということで、紹介されているコードもInnocentでの使用を前提に調整されているかと思います。

ですので、トップページでの記事一覧表示風カスタマイズにおいては、BrooklynよりもInnocentのデザインテーマを使った方が整って見えるかもしれません。

 

上の記事で紹介されている方法は、「トップページそのもののデザインをカスタマイズし、記事が一覧表示されているように見せる」というものですが、

他にも「トップページへのアクセスを全て自動的に“記事一覧ページ”へ転送してしまう」という方法もあるそうです。

そちらの方法も試してみたところ、見た目はとても綺麗にまとまったのですが、SEOの観点でGoogleからの評価を下げてしまう可能性があるとのことだったので、わたしは前者の方法を選びました。

 

CSSを使って擬似一覧表示するためには、全ての記事において毎回

  • 画像のところにclass名を設定しなければならない
  • 「続きを読む」を設置しなければ全文表示されてしまう

という手間が少しかかります。

それでも、スッキリ見えるトップページを無料版でも作れるという面での手軽さは、はてなブログを始めたばかりのわたしのようなユーザーにとって非常に有り難いものです。

 

 

記事のタイトルを吹き出しで囲むには？

Brooklynのデザインで記事を一覧表示風にしてみると、今度は「記事のタイトルが見にくいかな？」と感じました。（Pro版で正当に一覧表示すれば、こんな風にとても見やすいページになるのですが）

 

そこで、デフォルトのデザインを生かしつつ各記事のタイトルをより強調表示できるように、シンプルな吹き出し枠を作ってみました。

 

下記コードをそのまま「デザインCSS」の欄にコピペすると、この記事のタイトルを囲んでいるものと全く同じ吹き出しを表示できます。

.entry-title {
    font-weight: bold;
    font-size: 20px;
    position: relative;
    border: 2px solid #333;
    padding: 15px;
}
.entry-title::before {
    content: "";
    position: absolute;
    left: 2%;
    top: 100%;
    border: 11px solid transparent;
    border-top: 11px solid #333;
}
.entry-title::after {
    content: "";
    position: absolute;
    left: 2%;
    top: 96%;
    border: 11px solid transparent;
    border-top: 11px solid #fff;
}

 

上記コードはこちらの記事を参考にさせてもらったので、「そのままコピペしたのに、わたしのブログではちゃんと表示されないな…」といった不具合があった場合は、元の記事で詳しい説明を見て微調整していただれば幸いです。

 

 

ブログタイトルのフォントを変更するには？

さて、トップページの表示も変えて、記事タイトルのデザインも変えてみると、今度はブログタイトルのフォントデザインが気になってきました…

 

Brooklynの作者さん自身が色々なカスタマイズを紹介して下さっている記事では、「open sans」というアルファベット用のフォントが挙げられているのですが、わたしのブログタイトルは日本語なので、ひらがな・カタカナ用のフォントが必要です。

 

こちらの記事で紹介されている9種類の日本語フォントの中で、このブログのタイトルには「Kokoro」を選びました。

9種類それぞれのフォントを適用するための詳細なコードは上の記事に網羅されているので、ここでは当ブログタイトルと全く同じように表示できるコードだけをご紹介します。

 

  1. はてなブログ管理画面で「デザイン」→「カスタマイズ」→「ヘッダ」と移動した先の「タイトル下」の欄に下記コードをコピペします。 
     
    <link href="https://fonts.googleapis.com/earlyaccess/kokoro.css" rel="stylesheet" />
     
  2. 「ヘッダ」タブを閉じて「デザインCSS」タブを開き、下記コードをコピペしま す。
    #title {
    font-family: "Kokoro";
    font-size: 100%;
    letter-spacing: 8px;
}

 

 

「読者になる」ボタンをカスタマイズするには？

こちらはBrooklynの作者さんが紹介されている方法そのままで、とっても簡単です。

 

わたしはレッドの方を使わせてもらいました。

トップページの記事一覧表示風のところには設置されず、それぞれの記事ページにのみ設置されます。

 

 

最後に

「コピペだけで表示できるものより、もっと自分好みにカスタマイズしてみたい！」という方は、このような本で勉強してみるのが良いかと思います。

     

    わたしもコーディングを勉強し始めたばかりの初心者ですが、ステップを一つ一つ積み重ねていく方が後から躓かず、自分の好きにできる範囲を確実に広げていけそうだと感じるので、基礎をしっかり押さえておくのはオススメです。

     

    今後もシェアボタンや色々なデザインを変えてみたいなと考えているので、またカスタマイズを増やした際にはご紹介したいと思います。