編集者 近藤佑子の活動と思考の軌跡

【はてなブログ】UnderShirtテーマのカスタマイズで行ったことすべて

f:id:kondoyuko:20210809224541p:plain

ブログのリニューアルに際し、見た目もリニューアルしました! 当初、はてなブログはテーマのカスタマイズ性はそこまで高くないイメージがありましたが、調べてみると、ダッシュボードからかなりいじることができ、自分の理想としていた見た目に近づいて満足しています。

カスタマイズにあたっては、非公開のブログを新規に立ち上げて、設定をいじったあと、そこからメインのブログに反映させていきました。この記事では、テーマ「UnderShirt」をベースに、はてなブログProでまっさらなブログを立ち上げてから、見た目に関してどのような設定を行ったのかをメモしていきたいと思います。

シンプルきれいな見た目にしたい

そろそろ独自ドメインのブログを運営したいなぁと考えていて、メインで使っているブログを、はてなブログにするかWordPressにするかずっと悩んでいたんですよね……。はてなのほうがずっと使ってきて愛着があるし、できればはてなブログにしたい。

しかし、WordPressで試しに作ってみたブログが、なかなかデザインが良くできて、はてなブログのテーマを見てもいまいちピンとくるものがなかったんですよね。

f:id:kondoyuko:20210809141658p:plain
WordPressで作ったブログ

私が作りたいのは、自分のポートフォリオサイトを兼ねつつ、文章を書いたり読んだりするのが嬉しくなるような、なるべくミニマルなブログ。若干noteを意識しているところもあります。はてなブログで、そのようなイメージが出せたらと、カスタマイズに取り組んでみました。

まずはテーマ選び

テーマに求める私の要件は以下の通りです。

  • サムネイルが並ぶカード型のレイアウトであること
  • 装飾性の低いシンプルなものであること

この観点と、ある程度の利用実績があり、カスタマイズの情報が得られやすいという点から、rokuzeudonさんによる「UnderShirt」一択でした。

blog.hatena.ne.jp

rokuzeudonさんによる「UnderShirt」の紹介ブログ(今ははてなではなくSTUDIO上でブログを公開されているそうです)。

rokujuudo.com

UnderShirtをベースに、オリジナリティ性のあるブログの制作事例もあり「ここまでできるのか」とモチベーションが上がりました。

rokujuudo.com

それにしても「ここまでのカスタマイズ、ちまちまとダッシュボードからHTMLやCSSを入力して作ったのだろうか?」とも思ったのですが、テーマストアに非公開でテーマをアップロードする方法もあるみたいで、きっとそのようにして作ったのかなぁと想像しました。

utataneclub.hatenablog.com

テーマのインストール

「UnderShift」のテーマをインストールして、「デザイン」>「スマートフォン」>「詳細設定」の「レスポンシブデザイン」にチェックを入れておきます。

ブログ表示の設定

ブログの見た目に関わる設定項目に関して、「詳細設定」>「ブログ表示」の項目を以下のように変更しました。

  • トップページの表示形式(PC版)を「一覧形式」
  • トップページの記事数(PC版)を「10記事(など任意の偶数本数に)」
  • 「 記事本文にはてなブログ タグのリンクを付与しない」のチェックをオン
  • 「広告を非表示」のチェックをオン
  • 「ヘッダとフッタ(PC版)」については、ヘッダもフッタも両方表示しない(チェックをオン)

ここまでの状態はこちらです。

f:id:kondoyuko:20210809160808p:plain
テーマを設定したデフォルトの状態

カスタマイズを進めるにあたって知っておくといいこと

テーマのカスタマイズは、作者さんや利用者さんのカスタマイズ事例を参考に、コピーアンドペーストして修正する場合が多いのではないかと思います。

しかしその際、実際にはてなブログがどのようなHTML/CSSで記述されているのか、カスタマイズをどのように行っているのかを知ることで、より自分のやりたいカスタマイズができるのではと思います。

はてなブログのHTML構造を理解する

はてなブログはどのようなHTMLになっているのかを知ることで、例えば「とある要素を非表示にする」といった簡単な修正は自分でできてしまいます。

はてなブログのHTML構造は、以下のエントリが分かりやすかったです。

www.chankome.com

もしくは次の方法で、実際にソースコードを見てみましょう。

Google Chromeのデベロッパーツールを活用する

Google Chromeで、右上の「」>「その他ツール」>「デベロッパーツール」、もしくは「F12」や「Ctrl+Shift+i(Windowsの場合)」を押すと「デベロッパーツール(開発者ツール)」が表示されます。

おすすめの使い方として、修正を加えたい要素(タイトルとか画像とか)にマウスオーバーした上で、右クリックし「検証」とすると、デベロッパーツールが開いた上で、ソースコード上のその要素をハイライトしてくれます。

f:id:kondoyuko:20210809165018p:plain
デベロッパーツールでブログタイトルの要素を調べたところ

さらに、デベロッパーツールの下半分(レイアウトによって変動あり)は、サイトに関するさまざまな状態を調べられるのですが、デフォルトでは「Style」タブとなっているはずで、そこでは、選択した要素に当たっているCSSが確認できます。

このデベロッパーツール上でCSSを修正して、文字色やサイズ、要素間の間隔などをブラウザ上で確認することができます。もちろんそれだけでは実際のサイトには反映されません。

f:id:kondoyuko:20210809165354p:plain
タイトルの色を変えるのも、デベロッパーツール上でできる

さらに、以下画像の赤枠で囲っているボタンを押すと、モバイルやタブレットなどでどのように表示されるか確認することができます。

f:id:kondoyuko:20210809170325p:plain
デベロッパーツールならモバイルの確認も簡単

カスタマイズと、実際の動作やデベロッパーツールでの確認を行ったり来たりしながら進めていくのがいいと思います。

背景カラーとフォントの種類を変更

ここから実際に「デザイン」>「カスタマイズ」のところをゴリゴリ修正していきます。

背景カラーは、ダッシュボード上だとプリセットから選ぶしかないのですが、「デザインCSS」に以下のように追記することで任意のものに変更できます。また、フォントも任意のものに指定可能です。

/* 背景色とフォントの変更 */
body{
    background:#f8fbf8;
    font-family: Avenir, "Segoe UI", YuGothic, "Yu Gothic Medium", sans-serif;
}

背景カラーとフォントを変更するだけで、かなり好きな方向性になりました。

f:id:kondoyuko:20210809160940p:plain
背景カラーとフォントを変更

こちらを参考にさせていただきました。

www.wankorokun.com

カード型の中の余計な表示を消す

ミニマルさを求めてカード型にしたにも関わらず、ひとつのカードに余計な表示が多いのが気になります。

f:id:kondoyuko:20210809161342p:plain
ひとつのカードに要素が多い

具体的に以下の要素を消せばだいぶすっきりしそうです。

  • 記事の概要
  • はてなブログ タグ
  • はてなスター

一つひとつ見ていきましょう。

記事の概要を消す

ページアーカイブ(ブログ記事一覧)のclassは.page-archive、記事概要のclassは.entry-descriptionで指定されているので、「CSSカスタマイズ」に以下を記載すると記事の概要をまるごと削除できます。ちなみにdisplay: none;とは「要素を非表示にする」という意味です。

/* 記事一覧ページで記事の概要の消去 */
.page-archive .entry-description {
    display: none;
}

記事の概要を一行だけ残すことができないか、とも少し考えたのですが、「一覧形式」を選んだときにこの文字数だけ記事の概要を表示する、とシステム的に決まっているような感じがあったので、大変そうなので諦めることにしました。

はてなブログ タグを消す

2020年にリリースされた「はてなブログ タグ」。他のブロガーさんとテーマでつながれる面白い機能なのですが、記事一覧ページに表示されると幅を取るので、削除したいと思います。はてなブログ タグは.archive-entry-tags-wrapperというclassで囲われているようなので、非表示にします。

/* 記事一覧ページではてなブログ タグの消去 */
.page-archive .archive-entry-tags-wrapper{
    display: none;
}

はてなスターの削除

はてなスターを非表示にしたい場合、「デザイン」>「カスタマイズ」>「記事」から「はてなスター」のチェックをオフにすることで非表示ができます。ただ、記事一覧はすっきりさせたいから非表示で、記事ページは残したい、という場合、CSSのカスタマイズが必要です。

.social-buttonsというclassにはてなスターが格納されているようなので、これも非表示にします。

/* 記事一覧ページではてなスターの消去 */
.page-archive .social-buttons{
    display: none;
}

「ソーシャルボタン」というだけあって、はてなスターのほか、SNSシェア数なども格納していくイメージだったのでしょうか。もしそういう構造のHTMLだった場合、必要なものまで非表示にしていないか、classを見直して見てください。

いろいろ非表示にした結果、だいぶスッキリしましたね!

f:id:kondoyuko:20210809172422p:plain
スッキリした

任意の幅のヘッダ画像を適用し、縦幅を詰める

はてなブログにはヘッダ画像を貼ることができますが、そのサイズは横1000px、縦200pxのものが推奨されています。悪くないのですが、ちょっと間延びした印象に見えます。

f:id:kondoyuko:20210809175127p:plain
1000px * 200pxのヘッダー画像の適用。上部の黒い領域はブラウザのウィンドウ

デベロッパーツールで見ると、ヘッダ画像は、縦幅200pxと指定され、さらに余白もあるので、これらを調整します。

f:id:kondoyuko:20210809180113p:plain
ヘッダ画像は縦幅200px指定、さらに余白もある

そこでCSSカスタマイズに以下を追記し、縦幅100pxの画像をアップします。

/*ヘッダー画像の縦幅を詰める*/
.header-image-only #blog-title #blog-title-inner {
height: 100px;
}

/*余白を詰める*/
#blog-title {
padding: 0px;
}

ヘッダの領域がコンパクトになりました。

f:id:kondoyuko:20210809180645p:plain
縦幅100pxのヘッダ画像がちょうどよく収まり、ヘッダの領域がコンパクトになった

実際のブログのデザインではさらに改造を加えていますが、ひとまずは好きな幅の画像を指定できることがおわかりいただけたかと思います!

記事ページに更新日の追加

最近のブログでよくあるアレです。読者視点を考えると、同じ情報が得られる記事なら最新の物を読みたいでしょうし、SEO観点でも良いと聞きます。はてなブログではデフォルトでその機能はないので、ちょっとやってみます。

以下のエントリを参考に設定しました。

www.tomomore.com

その際、更新日のほうは「いかにも更新しました」的なアイコンがあるのに、その左のほうは何も表示がないので「なんの日付だろう」という感じになってしまいます。

f:id:kondoyuko:20210808135131p:plain
更新日の方にしかアイコンがない

そこで、参考のコードから、さらに以下のCSSを追記しました。

.entry-date a::before {
margin-right: 5px;
padding-left: 3px;
font-family: "Font Awesome 5 Free";
content: '\f073';
}

すると、記事公開日の前にカレンダー型のアイコンが表示されます。

f:id:kondoyuko:20210808144102p:plain
公開日の前にもアイコンが表示された

もっと分かりやすくするためには、アイコンより「公開日」「更新日」のほうがいいような気もしますが、とりあえずこれで。

レスポンシブなグローバルメニューを設置する

今回一番手こずったカスタマイズです……。実現したい要件としては以下の通り。

  • PCで見ているときにはヘッダ画像下にシンプルにメニューが横並びになっている
  • タブレットやスマホで見たときにはトグルボタンでメニューを開閉できる

やりかたをいろいろと模索した結果、以下のエントリで紹介している内容を使わせていただきました。

www.hiroseyonaka.com

メニューの見た目や、ヘッダ画像のサイズ感など、いろいろと細かい調整を行っています。

f:id:kondoyuko:20210809220101p:plain
PCでの表示

f:id:kondoyuko:20210809220452p:plain
モバイルでの表示。右上のトグルボタンを押すとメニューが展開される

1点、上記エントリ内のCSSで@media screen and (max-width:768px){以降の行は768px以下のタブレットやスマートフォンでの表示について記述しているのですが、これは「メディアクエリ」と言って、「横幅が768px以下の場合のみ以下のCSSを適用する」といった感じで場合分けをしているということになります。執筆時点では、上記エントリのCSSで最後の}が抜けているので、追記が必要です。でないと、以降の書いたCSSが「横幅768px以下の場合のみ」適用されてしまいます。

カテゴリの階層表示

ここまで来たらあと少し。以降はそこまで難しいことはしていません。

はてなブログにはカテゴリを階層化する機能はないのですが、有志の方がブログパーツとして公開しています。作者の方のエントリを参考に、特につまづくことなく設定できると思います。

blog.wackwack.net

スマートフォンでの2列表示

モバイルで見たときに「もうすこし記事がみっちり見えてもいいな~」と思ったので、「UnderShirt」の作者であるrokuzeudonさんが紹介している方法で、2列表示することにしました。「余白を小さくする」コードを追記しています。

rokuzeudon.hatenablog.jp

コピーライトの設置

フッタを非表示にすると何も表示されなくなってしまうので、コピーライトやフッタに置いておきたい情報を載せます。

「カスタマイズ」>「フッタ」のところに以下のHTMLと、

<div id="copyright"><p><a href="url">お問い合わせとこのブログについて</a> <a href="url">プライバシーポリシー</a></p><p>©2011 kondoyuko All rights reserved.</p></div>

CSSを記載しました。

/*コピーライト*/
#copyright {
padding: 30px;
text-align: center;
font-size: 12px;
color:#454545;/*文字の色*/
}

ソーシャルボタンの変更

デフォルトのソーシャルボタンだとページの読み込みが遅いという情報を目にしました。インターネットで検索するといろいろなサンプルがあるので、お好きなものを適用してみてください。

「カスタマイズ」>「記事」の「ソーシャルパーツ」のチェックをオフにし、「記事上」and/or「記事下」と、「デザインCSS」に追記していきます。

私は以下のエントリを参考にしました。

tech.moyashidaisuke.com

Font Awesomeのバージョン違いによる読み込みエラーと、ボタンが一列にならないというエラーがありました。前者は読み込んでいるFont Awesomeに合ったアイコンの指定、後者はボタンの幅の調整で回避しています。

プロフィールの修正

「サイドバー」からプロフィールを指定できますが、デフォルトのプロフィールだと表示内容に制約があるので、自由度を高めたいならば「モジュールを追加」から「HTML」を追加してそこにゴリッと書いていく形になります。

以下のエントリを参考にさせていただき、大きさなどを微調整しました。

www.rablifes.com

はてなブログは慣れればかなりカスタマイズできる

f:id:kondoyuko:20210809223803p:plain

そんな感じで無事、満足のいくデザインへとカスタマイズすることができました。

最初は「はてなブログはWordPressと比べてカスタマイズ性があまりないのでは……」と思っていたのですが、カスタマイズを通じてはてなブログの構造を理解することができ、HTMLやCSSを使いこなせば結構いろいろなことができると実感しました。

かなり好きな見た目になったところで、ブログの更新をしっかり頑張っていこうと思います!