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

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

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

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

目次

デザインテーマ

UnderShirt

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

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

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

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

背景画像

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

背景色

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

ヘッダ

タイトル画像

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

タイトル下

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

記事

ソーシャルパーツ

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

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

はてなスター

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

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

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

Zenback

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

関連記事

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

記事上下のカスタマイズ

記事上

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

記事下

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

パンくずリスト

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

サイドバー

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

で設定していました。

フッタ

コピーライト

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

https://www.marondiary.com/entry/customize7footer

ボトムメニュー

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

https://www.bambi.pro/entry/navigation-bottom-smartphone

デザインcss

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

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

https://rokuzeudon.hatenablog.jp/entry/theme-undershirt-sp

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

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

https://www.oheya-migaru.com/entry-2018-05-21-115804

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

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

https://brooklyn-custom.hatenablog.com/entry/_letter-size

前へ次へボタン背景色

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

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

サイドバータイトル

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

https://www.myfirstclasstrip.com/entry/INNOCENT-sidebar

目次のデザイン変更

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

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

シェアボタン

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

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

見出し

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

https://saruwakakun.com/html-css/reference/h-design

 

以上です。

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

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

 

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

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

コメント

コメントする

目次
閉じる