こんにちは、なすみです。
ブログをはじめて約半年たちました。
この度、ブログのテーマを「Haruni」から「UnderShirt」に変えました。
Haruniは柔らかくてかわいい雰囲気が好きでした。
また、レスポンシブに対応していてよかったです。
今回、トップページが2列のカード型になっていてレスポンシブにも対応しているUnderShirtに変更しました。
そして新たに加えたデザインがあるのでその記録を残しておきます。
まだ手が回っていないところもあります。
ただ、きりがないので今できているところまでになります。
私がわからなくて困ったこと、きっと他にも同じようにわからない人がいるはずって思って書きました。
テーマを変更したらデザインも自分の好きなように変えたくなりました。
しかし、そういった知識はゼロ･･･
でも、検索だけでなんとかなるだろうと思い本も買わずにスタートしました。
甘かった。
わからないことだらけでした。
コードは他のかたのブログに載っているものをコピペさせてもらいました。
ド素人がちょっとかじったことをドヤ顔で披露する内容なので海より広い心で見てください。
そしてCSSにコピペする単語や数字の部分をなんと呼ぶのかよくわからず･･･その辺もお許しください。
私は【はてなブログpro】を利用しています。
ここで紹介するブログのデザインは2021年1月時点のものです。
それ以降、デザインは変更する場合があります。
そして、やらかしたことのある私から一言、CSSをいじるときには
こまめにバックアップをとっておきましょう！！
Undershirtにしてカスタマイズしたところ
トップページのカスタマイズ
- はてなのヘッダーの色を変える
- ブログタイトル画像を作成してのせる
- グローバルナビゲーションの設置
- ヘッダ下におすすめ記事をのせる
- 背景の色を変更
- ブログの色を変える
- 「前へ」ボタンの設置
- フッタに「お問い合わせ」「プライバシーポリシー」をのせる
- フッタに「コピーライト」を書く
- 上に戻るボタンの設置
カードについて
- 角を丸くする
- 本文を消す
- タグを消す
- 日づけの位置を右下にする
- 日づけの前に時計マークを入れる
- 左上にカテゴリを一つのせる
- 左上にのせるカテゴリは一つ
- 左上にのせたカテゴリの角を丸くする
- ふわっとさせる（ホバーアクション）
- 枠に影をつける
- ブログのタイトルと日付けの幅の調整（タイトルが長くなると日づけとの距離が短くなるので、一定の幅をもたせる）
- 左上のカテゴリを少し透けさせる
サイドバーについて
- 見出しを変える
- 背景の色を変える
- プロフィールのアイコンを大きくする
- プロフィールにSNSのフォローボタンを表示
- サイドバーの枠に影をつける（記事の枠の周りにもつける）
- カテゴリを階層化（親-子カテゴリ）する
- カテゴリを階層化したとき、カテゴリの字にかかってしまう矢印を消す
- タイトルの色を変える
- 最新記事のカスタマイズ（途中）
- 楽天ルームのボタンをのせる
- はてなブックマークのボタンを自作する
記事ページのカスタマイズ
- 目次
- 見出し
- 囲み枠
- 囲み枠の吹き出し（文字の長さに枠を合わせる）
- アイコン付き会話風吹き出し
- 蛍光ペンをひく
- 記事ページの下にシェアボタンを設置
今回カスタマイズしていて知った便利な機能「定型文貼り付け」
その他
- 画像のリサイズと圧縮
- リンクは文章で貼る
- 文章のこと
Haruniのときからしていること
- はてなスターの非表示
- 記事のURLはアルファベットで記述
- はてなブログのグループに参加
- ブログランキング
- アイキャッチ作成
これから考えること
- ブログ名の変更
- プロフィールのアイコンを変更
- サイドバーの最新記事のデザインのカスタマイズ
- 行間
- ツイッターとインスタグラム
ブログのために利用しているサイト
- ブログランキング（日本ブログ村、人気ブログランキング）
- Canva：アイキャッチを作成するため
- ACイラスト：Canvaで見つからなかったイラストを探すため
- Bulk Resize Photos：画像のサイズ変更
- TinyPNG：画像の圧縮
- Iconpon（イケてる似顔絵メーカー）：記事内の吹き出しの顔に使用
- Web色見本：色を変えたいとき
- CSSデザインジェネレーター：透けている色の番号を知りたいとき（同じサイト内で吹き出し付き囲み枠とボタンをつくれる）
- PageSpeed Insights：ブログの読み込み時間を確認するため
- アクセスSEO対策ツールズ（パワーランクチェックツール）：ドメインパワーを計測するため
- Googleアナリティクス
- Googleサーチコンソール
- Googleアドセンス
- 楽天ルーム
- 楽天アフィリエイト
- もしもアフィリエイト
- アマゾンアソシエイト
- はてなブックマーク
ブログデザイン等、参考にさせてもらったサイトをブックマークしています。
いまいちブックマークの使い方がよくわからないのだけど、あっているのかしら。
最後に
お別れすることになったHaruniを使っていたときのトップページの画像を貼っておきます。
ありがとう、Haruni！！