初心者でもわかるはてなブログUnderShirtデザイン設定と参考サイトまとめ

はてなブログのデザインはUnderShirtを利用しています。
参考にさせて頂いたサイトと自分の設定を紹介します。
※現在WordPressを利用しています。

はてなブログ初心者の頃、検索してGoogleの1ページ目全てのサイトを見てもわからないことがよくあったので、いろいろなサイトを見ながら少しずつ進めたデザイン設定。
出来るまで何回も参照したサイトをまとめます。

一度に全部と欲張らず、出来るところから少しずつカスタマイズをして、慣れてきたら理解出来る範囲が広がってることもありました。

目次

デザインテーマ

UnderShirt

https://blog.hatena.ne.jp/-/store/theme/6435922169449487976

はてなブログ開設直後、このテーマがかっこよくて使いたかったけど自分には無理でした。
初心者の方やあまりカスタマイズに慣れていない人は

「インストールしてる人が多いものの方が解決策を調べやすい。」

は事実でした。
すぐに諦めて従い、UnderShirtにしました。

背景画像

背景画像は背景色かどちらかしか選べないので背景色を使っていました。
背景色で気に入った色がなければ、ここで画像をアップロードすればいいと思います。

背景色

掲載色を見たまま直感的に選べる。
アイキャッチを記事ごとにデザイン変えていたので単純なカラーで。
モノトーンは苦手。

ヘッダ

タイトル画像

Canvaで作ったタイトル画像です。
はてなで検索すればちょうどいいサンプルが出てきますよ。
画像とテキストを表示か画像だけ表示か選べます。

タイトル下

Googleのアドセンスが表示される様にしていました。

記事

ソーシャルパーツ

全てチェックを外していました。
はてな公式のソーシャルパーツは重いというのを何件か見たのでカスタムしました。
わからないうちは公式のものを使うと簡単なのでいいと思います。

記事下のみに表示できるソーシャルパーツ

はてなスター

記事更新の励みになるので表示させています。

はてなブックマークコメント

チェックは外していました。

Zenback

とりあえずわからないからチェック外していました。

関連記事

「関連記事を記事下に表示する」にしていると他の記事も読んでくれることもあるのでチェック。

記事上下のカスタマイズ

記事上

シェアボタンのHTMLをここにいれて表示させています。

記事下

Googleのアドセンスが表示される様にしていました。

パンくずリスト

記事ページに「パンくずリストを表示する」にチェック。

サイドバー

  • プロフィール
  • 検索
  • 関連記事
  • 新着記事
  • カテゴリー
  • ピックアップ
  • アーカイブ
  • リンク
  • Googleアドセンス広告

で設定していました。

フッタ

コピーライト

こちらの記事がわかりやすかったです。

マロニズム
【初心者向け】はてなブログ デザインテーマカスタマイズ その7《フッター編》
【初心者向け】はてなブログ デザインテーマカスタマイズ その7《フッター編》はてなブログを9ヶ月経験したマロニーです。 (現在はワードプレスで運営しています)   Webデザイ…

ボトムメニュー

これが出来るまで半年位かかりました。

Bambi's BLOG
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP! - Bambi's BLOG
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP! - Bambi's BLOG 今日はスマホ用の「固定フッターメニュー」の表示方法を紹介します。「レスポンシブ」の方法は、PCの時は表示しない↓↓をご覧ください♪♪ ボトムに張り付く固定メニューバー...

デザインcss

スマホでも記事を2列で表示(Proのみ)

スワイプする回数を減らしたかったので。

LOGzeudon with はてなブログ
はてなブログテーマ「 UnderShirt 」をスマホでも2列表示にするカスタマイズ - LOGzeudon with はてなブロ...
はてなブログテーマ「 UnderShirt 」をスマホでも2列表示にするカスタマイズ - LOGzeudon with はてなブロ...はてなブログテーマ「 UnderShirt 」をスマホでも2列表示にするカスタマイズ - LOGzeudon with はてなブログ

カードの本文とスター消す

このサイトの配色が好き。

Migaru-Days
ブログデザインをリニューアルしました!カスタマイズまとめ。
ブログデザインをリニューアルしました!カスタマイズまとめ。こんにちは。マリ(@damarino_oheya)です! このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました) ブログデザインのカスタマイズを...

記事のフォントサイズ変更

目が悪いので文字が大きい方が見やすいんです。

Brooklyn-カスタマイズ
【はてなブログ】文字のサイズを変更してみる - Brooklyn-カスタマイズ
【はてなブログ】文字のサイズを変更してみる - Brooklyn-カスタマイズ今回はブログ記事のあらゆる文字の大きさの変更についてまとめてみます!本文や見出しなどなど、、ご自分のブログでサイズを変更したい箇所があれば自分好みにカスタマイズ...

前へ次へボタン背景色

めちゃくちゃ参考にさせてもらったサイトです。

https://www.kurasitotonoe.com/entry/undershirt-top/

サイドバータイトル

こちらもかなり参考にさせていただきました。

My Frist Class Trip
【はてなブログ】サイドバーのタイトルをコピペでオシャレにカスタマイズしよう - My Frist Class Trip
【はてなブログ】サイドバーのタイトルをコピペでオシャレにカスタマイズしよう - My Frist Class Trip// 全国のはてなブロガーの皆さんこんにちは、パクチーです。 本日の記事では、あなたのブログサイドバーのタイトルを自分好みにちょっとオシャレにするためのカスタマイズ...

目次のデザイン変更

WordPressに引越しなさったけどスッキリしていて見やすい記事です。

https://www.papico405.com/entry/2019/02/15/205027

シェアボタン

この記事は本当に初心者の方でもわかりやすくて、自分でシェアボタンが表示された時すごく嬉しかったです。

https://www.notitle-weblog.com/hatena-share-button

見出し

今もよく参考にしております。
はてなブログを始めた当初はhtmlやcssの知識がほぼなかったので設定できるまで時間がかかりました。

サルワカ | サルでも分かる図解説明マガジン
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

以上です。

うまく表示されなければ、『1回寝て翌日以降すると意外にうまくいく』は、嘘だと思ってましたが結構よくありました。

では、デザイン沼に気をつけて!

タイトル

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!

コメント

コメント一覧 (1件)

コメントする

目次
閉じる