はてなブログのデザインはUnderShirtを利用しています。
参考にさせて頂いたサイトと自分の設定を紹介します。
※現在WordPressを利用しています。
はてなブログ初心者の頃、検索してGoogleの１ページ目全てのサイトを見てもわからないことがよくあったので、いろいろなサイトを見ながら少しずつ進めたデザイン設定。
出来るまで何回も参照したサイトをまとめます。
一度に全部と欲張らず、出来るところから少しずつカスタマイズをして、慣れてきたら理解出来る範囲が広がってることもありました。
デザインテーマ
UnderShirt
はてなブログ開設直後、このテーマがかっこよくて使いたかったけど自分には無理でした。
初心者の方やあまりカスタマイズに慣れていない人は
「インストールしてる人が多いものの方が解決策を調べやすい。」
は事実でした。
すぐに諦めて従い、UnderShirtにしました。
背景画像
背景画像は背景色かどちらかしか選べないので背景色を使っていました。
背景色で気に入った色がなければ、ここで画像をアップロードすればいいと思います。
背景色
掲載色を見たまま直感的に選べる。
アイキャッチを記事ごとにデザイン変えていたので単純なカラーで。
モノトーンは苦手。
ヘッダ
タイトル画像
Canvaで作ったタイトル画像です。
はてなで検索すればちょうどいいサンプルが出てきますよ。
画像とテキストを表示か画像だけ表示か選べます。
タイトル下
Googleのアドセンスが表示される様にしていました。
記事
ソーシャルパーツ
全てチェックを外していました。
はてな公式のソーシャルパーツは重いというのを何件か見たのでカスタムしました。
わからないうちは公式のものを使うと簡単なのでいいと思います。
記事下のみに表示できるソーシャルパーツ
はてなスター
記事更新の励みになるので表示させています。
はてなブックマークコメント
チェックは外していました。
Zenback
とりあえずわからないからチェック外していました。
関連記事
「関連記事を記事下に表示する」にしていると他の記事も読んでくれることもあるのでチェック。
記事上下のカスタマイズ
記事上
シェアボタンのHTMLをここにいれて表示させています。
記事下
Googleのアドセンスが表示される様にしていました。
パンくずリスト
記事ページに「パンくずリストを表示する」にチェック。
サイドバー
- プロフィール
- 検索
- 関連記事
- 新着記事
- カテゴリー
- ピックアップ
- アーカイブ
- リンク
- Googleアドセンス広告
で設定していました。
フッタ
コピーライト
こちらの記事がわかりやすかったです。
ボトムメニュー
これが出来るまで半年位かかりました。
デザインcss
スマホでも記事を２列で表示（Proのみ）
スワイプする回数を減らしたかったので。
カードの本文とスター消す
このサイトの配色が好き。
記事のフォントサイズ変更
目が悪いので文字が大きい方が見やすいんです。
前へ次へボタン背景色
めちゃくちゃ参考にさせてもらったサイトです。
サイドバータイトル
こちらもかなり参考にさせていただきました。
目次のデザイン変更
WordPressに引越しなさったけどスッキリしていて見やすい記事です。
シェアボタン
この記事は本当に初心者の方でもわかりやすくて、自分でシェアボタンが表示された時すごく嬉しかったです。
見出し
今もよく参考にしております。
はてなブログを始めた当初はhtmlやcssの知識がほぼなかったので設定できるまで時間がかかりました。
以上です。
うまく表示されなければ、『１回寝て翌日以降すると意外にうまくいく』は、嘘だと思ってましたが結構よくありました。
では、デザイン沼に気をつけて！
コメント
コメント一覧 （1件）
[…] あわせて読みたい初心者でもわかるはてなブログUnderShirtデザイン設定と参… […]