ブログデザインをリニューアルしました!カスタマイズまとめ。子育て雑記ホームブログはてなブログカスタマイズブログデザインをリニューアルしました!カスタマイズまとめ。2019-09-04こんにちは。マリ(@damarino_oheya)です!このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました)ブログデザインのカスタマイズをはじめたのは8ヶ月ほど前からです。マリ少しずつCSSやHTMLが分かるようになってきました!今回は4回目のリニューアルです。この記事では、今回のブログデザインのリニューアルで新しくカスタマイズしてみたことを中心にまとめています。▼ブログproに移行した感想はてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。▼追記の追記*2019年2月にワードプレスに移転しましたSANGOのスマホ版デザインでカスタマイズしたことこれまでのカスタマイズ【はてなブログ無料版】初めてカスタマイズしたこと(初心者向け)【はてなブログ無料版】2度目のカスタマイズ。初心者がCSSに慣れてきた時にカスタマイズしたこと。Shirtに変更しました。Shirtは、トップページの記事が2列タイプのカード型で、とてもシンプルでカスタマイズしやすいデザインです。はてなブログpro(有料会員)になり、広告が無くなったので使うことにしました!(無料版でも広告を気にしなければ使えます!)はてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。カスタマイズしたところ今回、カスタマイズしたところはこちら。記事ページトップページフッターサイドバーまあ、ほとんど全部、ですね。かかった時間は2週間ほどで、育児の合間や深夜にちまちまと作業していたのでめちゃめちゃ疲れました。記事ページのカスタマイズ記事ページの中でカスタマイズしたのはこちらです。日付の位置シェアボタンもくじ見出しリスト囲み枠の整理カエレバリンク行間など前ページ、次ページボタンこれまでのカスタマイズでも変えてきたところですが、今回新しくカスタマイズしたところは、囲み枠(ボックスデザイン)の整理と、前ページ次ページボタンの2つです。囲み枠(ボックスデザイン)を整理これまで無計画に作っていた囲み枠をリセットし、新たに5つを作り直しました。囲み枠を使うのはリストを使う時が多いのでリストに対応できるようにしています。これで記事が書きやすくなってほしいです。囲み枠のデザインはサルワカさんを参考にしています。【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30前ページ、次ページのボタンこちらは真っ白な背景でしたが、ほんのりグレーの色をつけています。トップページのカスタマイズトップページでカスタマイズしたのはこちらです。カードグローバルナビ設置パソコンでは1列に6つのメニュー、スマホでは2列に2つのメニューが3列になるグローバルナビです。いうのを探していて、もちろん自力ではできないのでググりました〜。sign*注意点として、メニュー数を偶数にしないと成り立たないナビゲーションメニューです。マリメニュー数が多すぎるとスマホで見たときに画面いっぱいになってしまうので数は増やせませんが、デザイン的にすごく良いメニューでお気に入りです。背景色ブログ全体の背景色を淡いグリーンに、メニューに触れたら色が変わるようにしました。Huntで探し、細かいところはウェブ配色ツールで確認しながら選んでいます。Palettesカード型の見た目なんか色々やっているのでCSSを載せておきます。記事とはてなスターにdisplay:none;で非表示にします。absolute;にtopとrightで位置を決めています。日付も同じ方法で右下へ。アイキャッチの下に線を引く結構どうでもいいことかもしれませんが。アイキャッチの背景が白い時にカード内でタイトルとの境界線が無くなり違和感があるので、アイキャッチの下のみ線が引かれるようにしました。背景が白いと境界線が分からないので・・・。角を丸くする時に使った.entry-thumb(アイキャッチ)に下線のコードを付け加えただけです。背景色フォローボタンプライバシーポリシーコピーライトはてなブログのフッターはとても殺風景な作りなので、少し手を加えるとだいぶ変わりますね。フッターは前回カスタマイズと同じ方法で作っています。今回は、前回のカスタマイズではできなかったフォローボタンを設置しました。フォローボタン参考にさせていただいた記事はこちらです。www.ituore.comアイコンを白、アイコンの背景をヘッダーと同じにし、アイコンの白い部分のみが表示されています。枠を丸くする記事のカード型と同じ見た目にするために、サイドバーの枠も丸くしています。サイドバーを丸くタイトルの上を丸くプロフィールのピンク範囲の下を丸くマリすごく面倒なんですが、ここまで来たらやるしかなかったですね...。プロフィールサイドバーは、「プロフィール」ではなく「html」で作っています。フォローボタンはフッターと同じくアイコンを白にしました。profile-box・白いところprofile-img・丸い画像profile-inbox・ピンク部分この3つをCSSに作ってHTMLを表示させています。プロフィールや画像ができたと思ったらフォローボタンも作らないといけないし、頭がくらくらしました。終わりはどこにあるのかと。カテゴリーの整理デザイン→サイドバー→カテゴリー編集画面で、カテゴリの並びを整理しました。この赤丸で囲んだ部分で編集できます。この機能、初めて知りました!自分好みにカテゴリーの並び順を変更できていいですね。スマホ版のカスタマイズパソコンよりもスマホからのアクセスの方が多いので、スマホ版の見た目も気になるところです。﻿blog.rokuzeudon.com1列でも良いですし、私のようにアイキャッチに自信がないので2列の記事にしたい!という人にもおすすめのテーマです。そのほかのカスタマイズスマホ版を2列にするときに公開されているコードで、このコードが出てきました。この中に入れたコードはスマホ版のみで表示されるようになるみたいですね。▼スマホ版の詳しいカスタマイズについてはこちらにまとめています。【カスタマイズ】はてなブログのスマホ版ブログデザインでカスタマイズしたことおわりにめんどくさい!終わりがない!頭がくらくら!と言いながらも、やっぱりカスタマイズは楽しいです。Airを入れるのに購入しましたはてなブログで独自ドメインにして4ヶ月のPV数を公開!PVアップのためにしてきたこと。コメントをキャンセルメールアドレスが公開されることはありません。=前の記事ブログ名を変更しました。変更後にしたことなど。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。