taninote

明るい未来に生きたい 引きこもりのブログ

ブログテーマ「UnderShirt」に大変更!使えるカスタマイズ総まとめ【トップ画面編】

はてなブログUndershirtのカスタマイズ

こんにちは。たに(@taninote)です。

2週間くらい前「新しいデザインに変更しよう」と急に思い立ち、それから少しずつ色んなブログテーマ・カスタマイズを試していました。数か月に1度、ブログデザインを大変更したい欲に駆られるんです...

まだ適当な部分もあるのですが←今回行ったカスタマイズはこの記事にまとめておきます。 よければ参考にしてください!

 

テーマ変更前のデザインまとめ

ブログテーマを変更する前の状態を簡単にまとめておきます。

使用テーマは「Innocent」

今回のテーマ変更前に使っていたのは「Innocent」です。

はてなブロガーの間では、かなり人気の高いデザインです。

テーマ作成者・半月さんのブログには「Innocent」カスタマイズに関する記事もあるので、用意してくださっているコードをコピペするだけで、展開式のナビゲーションバーを設置することが可能です。ありがたい。

「Innocent」作成者・半月さん(id:waitingmoon)のブログはこちらです。

テーマ変更前の当ブログデザイン

「Innocent」にお世話になっていたころの当ブログは、こんな感じでした。

PC版

テーマ変更前の当ブログデザイン

変更前のTOP画面

「Innocent」のナビゲーションバーをカスタマイズしているくらいで、他はほとんど触っていません。

スマホ版

テーマ変更前の当ブログスマホデザイン

変更前のスマホ画面

スマホはこんな感じ。「Innocent」はレスポンシブ対応デザインなので、スマホも綺麗にまとまってくれます。

テーマ変更後のデザインまとめ

続いてテーマ変更後のデザインを簡単にまとめておきます。

テーマ変更後の当ブログデザイン

今回から使用しているテーマは「UnderShirt」です。

PC版

テーマ変更後の当ブログデザイン

変更後のTOP画面

「UnderShirt」はカード型のデザインです。かなりシンプルなTOP画面になってしまいました。笑

スマホ版

テーマ変更後の当ブログスマホデザイン

変更後のスマホ画面

スマホはこんな感じ。グローバルメニューは画面右上に格納されるものを実装しています。

使用テーマは「UnderShirt」

今回から新しく使用させていただいているテーマは「UnderShirt」です。

はてなブログのカード型テーマと言えば「ZENO-TEAL」がお馴染みだと思うのですが、「UnderShirt」の方が元から施されているCSSが少ないように感じます。なので、自分好みにカスタマイズしたい人は「UnderShirt」の方が使いやすいかもしれません。

「UnderShirt」作成者・ろくぜうどん(id:rokuzeudon)さんのブログはこちら。

「UnderShirt」の解説記事を書いてくださったり、コメント欄でカスタマイズの質問に答えてくださったり、とっても素敵な作成者さんです。こういう方のおかげで初心者でもカスタマイズできるので、大感謝です...

 

テーマ「UnderShirt」カスタマイズを紹介

それでは今回取り入れたカスタマイズをまとめて紹介していきます!

「UnderShirt」カスタマイズ前のデザイン

カスタマイズ前のTOP画面

もともとの「UnderShirt」はこんな感じです。まずはTOP画面に取り入れたカスタマイズから紹介します。

カスタマイズ後のTOP画面

カスタマイズ後のTOP画面

画像に振ってある番号と見出しの番号を合わせているので、よければ参考にしてください。

その前に注意事項

今からコピペで使えるHTMLやCSSも紹介させていただくのですが、いきなり本ブログのCSSを編集するのではなく、テストブログを作ることをおすすめします!またはCSSのバックアップを取ってからカスタマイズしてくださいね。

テストブログの作り方は下記事でも紹介中です。

①ブログ全体のフォント変更

始めにブログ全体のフォントを変更します。

このコードの中に、自分の使いたいフォント名を挿入し「デザインCSS」に貼り付けるだけです。

私は自分が好きなWEBサイトのフォントを参考にしました。過去記事で紹介しましたがChromeの「検証ツール」を使えば、WEBサイトに使われているフォントを一発で調べることができます

今回初心者ながらカスタマイズができたのも「検証ツール」のおかげです。最初は取っつきにくいかもしれませんが、これだけは勉強することを超おすすめします。詳しくは下記記事にて。

参考までに当サイトのフォントはこちらです。游ゴシックが好きな人は使ってみてください。

②ブログ全体の背景色を変更

もともとの「UnderShirt」では、背景色がグレーになっていますが、白に変更しました。

ブログ全体の背景色を変更する

背景色の変更

「デザイン設定>カスタマイズ>背景色」で変更できます。

はてなブログが用意しているパレットの中に、自分好みの色がない人、こだわりの背景色に変更したい人は、下記CSSでも変更できます。

「#ffffff」の部分を好きなカラーコードに書き換えてください。

③はてなブログのヘッダー色を変更

「PRO」に加入しているなら、はてなブログのグローバルヘッダーは表示しないように設定できますが、はてなブロガーとしては、このヘッダーがないと不便じゃないですか?私は表示させておきたい派です。

はてなブログのグローバルヘッダー色の変更

もともとの色合いだと目立ってしまうので、文字色と背景色を変更しました。

「#454545」の部分は、好きなカラーコードに変更してください。背景色は「rgba(0,0,0,0)」を使うと透過させることができます。もちろん「rgba(0,0,0,0)」の代わりに「#ffffff」のようなカラーコードを挿入することも可能です。好きな色を試してみてください。

④ブログタイトルを中央寄せ

ブログタイトルとブログの説明文を、左寄せから中央寄せに変更します。

ブログタイトルに中央寄せる

タイトルを中央寄せ

これをコピペするだけです。ちなみに「center」を「right」に書き換えると右寄せになります。

⑤グローバルメニューの設置

スマホになると横からスッと出てくる素敵なグローバルメニューは、id:minimalgreenさんの記事を、とことん参考にさせていただきました。はてなブログでも、こんなことができるんですね。本当にありがたい...

PC画面では横並びです。階層をつけることもできます。

PC版のグローバルメニュー

PC版グローバルメニュー

スマホ画面になると右上にトグルボタンが現れます。メニューは横から出てくる仕組み。

スマホ版のグローバルメニュー

スマホ版グローバルメニュー

編集しなければいけない項目はちょっと多いですが、id:minimalgreenさんの記事で詳しく説明してくださっているので、ぜひ挑戦してみてください。

⑥カード型レイアウトのカスタマイズ 

カード型レイアウトに対して行ったカスタマイズを紹介します。

スマホで2列表示にする

もともとの設定では、スマホは1列表示になっています。これを2列に変更しました。でも実は1列にするか2列にするか、今でも悩んでいます。どっちがいいですか?笑

2列表示と1列表示の例

左が2列・右が1列表示

こうやって見比べると1列表示の方が見やすいですね。やっぱり1列に戻そうかな。笑

このカスタマイズは「UnderShirt」作成者・ろくぜうどん(id:rokuzeudon)さんのブログに公開されているコードをコピペするだけです。いつでも一瞬で1列から2列に変更できます。

この記事に載っている「余白を狭くする」CSSも、私は使っています。

記事の説明文・はてなスターを消去

トップ画面に表示される「記事の説明文」と「はてなスター」は消去しました。

説明文・はてなスター消去前のTOP画面

説明文・はてなスター消去前

消去しないとこんな感じ。個人的にTOP画面にはタイトルとカテゴリーがあれば充分かなと思いました。

私のように消去したい人は、このCSSを貼り付けてください。

 アイキャッチ画像を綺麗に表示

はてなブログTOP画面のアイキャッチは、正方形にトリミングされる仕様なんです。だから何もしないと画像が見切れてしまいます

見切れるアイキャッチ画像と綺麗に表示されるアイキャッチ画像

見切れるアイキャッチ画像を綺麗に表示する

上段のアイキャッチ画像は見切れていますね。でもあるコードをコピペするだけで、下段のように綺麗にアイキャッチ画像を表示させることができます。

こちらの記事が神レベルなので、記事内に載っているコードをそのままコピペしてください。ausnichtsさん(id:ausnichts)ありがとうございます...

ただ表示速度は遅くなると思います。正方形にトリミングされても綺麗に見えるアイキャッチ画像を作るか、諦めるのも1つの手です。笑

⑦上に戻るの設置

画面を少しスクロールするとスッと出てくる「上に戻るボタン」は、こちらの記事を参考にしました。

好きなボタンデザインのHTMLとjQueryを「デザイン>カスタマイズ>フッタ」に。CSSを「デザイン>カスタマイズ>デザインCSS」に貼り付けるだけでOKです。

ただし、これまでに「Font Awesome」と「jQuery」を使ったことのない人は、これに加えてもう2つ設定が必要です。ご注意を。下に書いてある設定まで行ってください。

まず下記の「Font Awesome」を使うために必要なコードを「設定>詳細設定>headに要素を追加」の中に貼り付けてください。

「Font Awesome」というのは、Twitterの鳥さんマークなど色んなアイコンをWEBページで使える便利なサービスのことです。

次に「jQuery」を使うために必要なコードも、先ほどと同じ「設定>詳細設定>headに要素を追加」の中に貼り付けてください。

「jQuery」を使えばアニメーションが付けれます。

⑧フッターのカスタマイズ

フッターは超シンプルなものを設置しました。とっても簡素なものですが、参考になりそうなHTMLとCSSを貼っておきます。

フッターのカスタマイズ

フッターのサンプル

今から載せるHTMLとCSSをそのままコピペすると、上記画像のフッターが出来上がります。よければ試してみてください。

まずHTMLは、URL2か所とコピーライト部分を書き換えて「デザイン>カスタマイズ>フッタ」に貼り付けてください。

そしてCSSは「デザイン>カスタマイズ>デザインCSS」に貼り付けます。初心者が見よう見まねで作ったものなので、もしも上手くいかなければメッセージをください...

背景色や文字色は好みのものに変えてください。

⑨サイドバーのカスタマイズ

最後にサイドバーのカスタマイズを紹介します。と言っても、私は線の色味と太さを変えただけです。

このCSSで線の調整ができます。「1px」となっていますが、この数字を大きくするほど線が太くなるので、好きに調整してみてください。「#ddd」も好きなカラーコードに変えてください。

それから実は、コメント欄の上側にも同じ横ラインが出るようになっています。サイドバーの横ラインと同じデザインに統一したい方は、このCSSも追加してください。

サイドバーをボックス風にする

おまけですが、よくWordPressで見るような?ボックス風デザインに変えることもできます。

サイドバーのBOXデザイン例

サイドバーのデザインを変える

画像右側のようにしたい方は、下記のCSSを貼り付けてみてください。

背景色や文字色は好きに変えてくださいね。

まとめ

本当は記事内のカスタマイズも一気に紹介しようと思っていたのですが、かなりボリュームのある記事になってしまいそうなので、今回はここで一旦締めます。疲れましたね。笑

でもカスタマイズって本当に楽しいもので余裕で1日潰れます。HTMLやCSSって少し勉強するだけで意味が分かるようになるんですよ。英単語を覚えたら英文を理解できるようになったときの感動に似てるなあと思っています。

私も「CSSって何?」レベルの初心者だったので、自分でカスタマイズしたい方は、ぜひ勉強してみてください。

それでは、次回に続く。