日々と旅の雑記帳

旅と写真と日々の雑記

【はてなブログ】はてなブログのテーマ「UnderShirt」を6ヶ所カスタマイズした部分を紹介します


f:id:castlepeak37:20200523230935p:plain

このブログのテーマは「UnderShirt」を使用しています。トップページがカード型でありながらシンプルな感じなテーマです。一度カード型のテーマを使ってみたいと思っていたので、早速インストールしてみました。(トップページをカード型にするには、はてなブログProに加入する必要があります)

blog.hatena.ne.jp

このテーマ、デフォルトでも良かったのですが、使っていく中でちょっと気になった点があったので、様々なカスタマイズをして現在の表示されている内容にしました。
そこで今回は備忘録も兼ねてカスタマイズした内容を紹介しようと思います。
尚、これはあくまでも私の環境下(MacとChrome)での話ですので、他の環境での動作は確認しておりません。この点はどうかご理解いただければと思います。また、CSSについては各サイト様で紹介されたものを使用しています。この場を借りてお礼申し上げます。

ヘッダーの画像サイズについて

今回、ヘッダー用の画像を自作してアップしました。作ったサイズは横幅1000px、縦200pxです。いわゆるはてなブログ推奨サイズです。しかし、これをこのままアップすると横幅が長くなり、コンテンツ領域を超えてしまいました(テーマ側で拡大処理がされているそうですが)。そこでこの様なcssを用いコンテンツ領域に揃えてみました。

#blog-title-inner {

height: 200px;

background-size: 93%;

background-position: 50% 50%;

}

ここのbackground-sizeを93%にして今の様な幅にする事が出来ました。

また、このテーマはレスポンシブデザインなのでスマホでもPC同様に表示できますが、スマホでのヘッダーの画像表示については、真ん中のみ表示されません。そこでこれを回避するのに次のcssを加えました。

@media (max-width: 480px) {

  .header-image-only #blog-title #blog-title-inner {

    background-size: cover;

    height: 60px;

  }

}

ここのheightを60pxにして画像全体が表示できる様になりましたが、まだ見栄えが宜しくないです。もう少し高さが稼げれば良いのですが。

カード部分のタイトルのフォントの大きさを変えました

このトップページに表示されている記事タイトルの大きさですが、デフォルトだとちょっと小さいと思ったので、少し大きくしようと思いました。次の様なcssを使用しました。

.archive-entry-header h1{

    line-height:1.3!important;

}

.archive-entry-header h1 a{

    font-size:21px;

    font-family: “Rounded Mplus 1c“;

     letter-spacing:-0.03em;   

    font-weight: bold;

    color:#333 !important;

 

}

.archive-entry-header h1 a:hover{

    color:#375A7F !important;

}

ここのfont-sizeの値を調整しました。また、文字の間隔も少し開き気味になったので、letter-spacingの値をマイナスにして今みたいな形に調整しました。

カード部分に表示される本文抜粋とスターマークを消しました

デフォルトではカード部分には記事タイトルに加えて本文の抜粋とはてなスターが表示されていますが、ちょっとしつこく感じたので、本文抜粋とはてなスターの表示を消しました。次のcssを加えました。

.page-archive .entry-description,

.archive-entry-body .social-buttons{

     display: none;

}

 また、日付も右下に移動させました。

.page-archive .archive-entry .date{

position: absolute;

bottom: 0px;

right: 0px;

}

目次もカスタマイズしようと思ったのですが

目次も以下のcssを使ってカスタマイズしました。

entry-content .table-of-contents:before {

display:block;

content: “今日の目次”;

font-size: 19px;

color:#333;

font-weight: bold; 

text-align:center;

border-bottom: 2px dashed #333;

}

なのですが、どうしてもcontentの内容が反映されず、常に「目次」としか表示されません。他のcssを利用しても同様です。なぜにこの部分が反映されないのか疑問です。

本文をGoogle Fontsにしました

ブログ全体のフォントをGoogle Fontsにしました。いわゆるwebフォントです。フォント自体をwebから呼び出すので、若干表示が遅くなるというデメリットもありますが、様々な環境から見ても常に同じ文字で表示できるというメリットを優先して使ってみる事にしました。

メインはGoogle Fontsの「M PLUS Rounded 1c」というのを使用しています。ちょっと丸みがあって柔らかい感じがしています。視認性もなかなか良い感じがします。

導入は以下の様に行いました。

まずこのコードをヘッダのタイトル下に入れました。

<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">

設定画面にある詳細設定→headに要素を追加の項目に入れる方法もありましたが、私の場合はこの方法だと反映されませんでした。理由はわかりませんが。また、css用のコードを取得してそれをデザインcssに貼り付けるという方法もありますが、こちらも上手くできませんでした。

それからcssでフォントを設定しました。

body {

    font-size: 16px;

    font-family: "M PLUS Rounded 1c";

}

これで見出しも含む全てのフォントがM Plus Rounded 1cで表示される様になりました。また、font-sizeで本文の文字の大きさも調整できます。

ただ、全てを同じフォントにするとちょっとアクセントに欠けるので、h2の見出しのみフォントや体裁を変更しました。こういうcssを使いました。

h2 {

  padding: 0.25em 0.5em;

  font-family: "Noto Sans JP"!important;

  color: #494949;

  background: transparent;

  border-left: solid 6px #1f2f54;

}

まず、フォントを同じGoogle FontsのNoto Sans JPに変更しました。以下のコードをヘッダのタイトル下に入れました。

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">

あとはこの部分のcssに!importantを加えて強制的に変更する事にしました。(この点については別な方法があるかもしれませんが)あとはそれぞれお好みの世界になると思います。 ちなみにborder-leftの色はネイビーにしました。オリックスバファローズのチームカラーです(笑)

Google Fontsの詳細はこちらです。

googlefonts.github.io

カテゴリーを見直しました

カテゴリーも見直しました。 
行った事は
・カテゴリー名の分類と名前の見直し→意識的にちょっと長めの名前にしました
・カテゴリーの階層化を行いました→サイドバーのカテゴリー表示も階層化対応しました
・カテゴリーに説明文を追加しました→カテゴリーから表示した際にその概略も表示できる様になりました

階層化については以下のサイト様の記事を参考にさせていただきました。

www.it-the-best.com

実はこのカテゴリーについては過去記事の変更がまだ終わっておらず、進行形の状態ですが、この変更を行ったところ、Google Search Consoleで得られる情報にちょっと変化が出てきた感じがしました。

こちらに少しまとめて見ました。

5月22日、3つの見た事と感じた事(ブログのカテゴリーを見直したところ、他) - 日々と旅の雑記帳

ここまで書いた事が皆さんのお役に立てば嬉しいです。
最後までお読みいただきありがとうございました。
---------
■はてなブログユーザーの方は読者登録できます
↓のボタンをクリックしていただけると嬉しいです!

■twitterで更新情報などつぶやいています