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

BLOG

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

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

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

デザインテーマ

UnderShirt

Messages - テーマ ストア

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

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

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

背景画像

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

背景色

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

ヘッダ

タイトル画像

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

タイトル下

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

記事

ソーシャルパーツ

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

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

はてなスター

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

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

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

Zenback

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

関連記事

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

記事上下のカスタマイズ

記事上

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

記事下

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

パンくずリスト

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

サイドバー

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

で設定していました。

フッタ

コピーライト

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

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

ボトムメニュー

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

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

デザインcss

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

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

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

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

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

ブログデザインをリニューアルしました!カスタマイズまとめ。
こんにちは。マリ(@damarino_oheya)です! このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました) ブログデザインのカスタマイズをはじめたのは8ヶ月ほど前からです。 今回は ...

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

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

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

前へ次へボタン背景色

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

はてなブログUnderShirtのカスタマイズまとめ | くうかんしんぷるライフ
はてなブログのテーマ『UnderShirt』で行ったカスタマイズです。この記事ではトップページと記事内に関するカスタマイズをまとめてあります。

サイドバータイトル

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

【はてなブログ】サイドバーのタイトルをコピペでオシャレにカスタマイズしよう - My Frist Class Trip
// 全国のはてなブロガーの皆さんこんにちは、パクチーです。 本日の記事では、あなたのブログサイドバーのタイトルを自分好みにちょっとオシャレにするためのカスタマイズを、図解ありでわかりやすく紹介します。 ブログデザインを変えたいと思っている人も、そうじゃない人も、参考にしてくださったら幸いです。 ちなみに前回のブログカ...

目次のデザイン変更

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

はてなブログ「目次」の見た目をCSSで変える(コピペOK) | papico's note
はてなブログで「目次」を作ったときのデザインを変えるCSSを紹介しています。 見出しごとに細かく変える方法もあります。コピペでそのまま使えるので簡単。

シェアボタン

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

コピペで簡単!はてなブログのSNSシェアボタンをカスタマイズ
今回はシェアボタンを作ってみました。シェアボタンのカスタマイズ記事はすでにたくさんの人が書いてるので、供給過多ぎみですが… もし気に入ったデザインがあったら使ってみてください。全部で10種類作りました。作りすぎ?? シェ…

見出し

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

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

 

以上です。

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

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

 

タイトルとURLをコピーしました