ブログテーマをUnderShirtに変更し、デザインなどカスタマイズしました【はてなブログ】
こんにちは。ブログのテンプレートや各種パーツは、
10ヶ月前、FC2ブログからはてなブログへ移行した時から変えていませんでしたが、
Pro化に伴い変更してみました。この今にも死にそうなヘッダー画像ともお別れです；
HTMLなどに詳しいわけでもないので、すべて先人の方々の恩恵にあずかっています。
なので、この記事は、参考にさせていただいた方々の記事の紹介となります；
この場を借りて、深くお礼申し上げますm(_ _)m
全体のデザイン変更
テンプレートの変更
テンプレートは「UnderShirt」を使用させていただきました。
レスポンシブルデザイン対応で、シンプルで見やすいです。
一覧で複数の写真が見れるという部分は、旅ブログにマッチしていると思います
記事一覧画像の角を丸くし、本文とスターを消す
Under Shirtの画像の角を丸くし、少し柔らかい印象にしました。
また、記事一覧の本文プレビュとスターを消し、
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
スマホで記事を2列表示・背景の余白を無くす
スマホの記事一覧画面も2列表示にしています。
また、画面がごちゃごちゃしているので背景の余白を無くし、スッキリさせました。
この方法については、開発者様が情報を公開されていました。
ありがとうございますm(_ _)m
グローバルナビゲーションバーの設置
手間取りましたが、細めの固定ナビゲーションバーを設置しました。
バーの太さ、カラー、文字カラーを調整し、公式ヘッダを消して使用しています。
スマホは画面が崩れたので消しています；
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
フッターの設置・フッターリンクを設置
フッターを作成し、お問い合わせとプライバシーポリシーのリンクを貼りました。
ヘッダーと同じ色にして統一感を出しています。
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
記事のデザイン変更
見出しデザインの変更
見出しがシンプルすぎた気がしたので、h3～h5を変更しました。
それっぽくなっているんじゃないかと思います。
有名なこちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
斜体ボタンの機能変更
これまでは強調表示の際、赤い太字のみを使用していましたが、
マーカー付きの文字が使いたかったので、カスタマイズしました。
この斜体のアイコンを押すことでマーカー付きの太文字になるように変更しました。
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
行間の調整
記事で改行した時に、やたら行間が空いていたので調整しました。
行間0では狭かったので0.5に設定しています
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
ブログパーツの変更
プロフィールの画像を変更
遺影のような画像を使っていましたが、殺風景で暗めのブログを、
少しだけ柔らかくしたかったので、ゆるいアイコンのイラストに変更しました。
※『ココナラ』で依頼しました。
クオリティの高すぎるイラストに戸惑いを隠せません
佐伯さん素敵なイラストありがとうございますm(_ _)m
プロフィール画像の角を丸くする
細かいですが、さらに柔らかい印象にしたかったので角を取っています。
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
50%だと丸になるのですが、今回は20%に設定しています。
上に戻るボタンの設置
過去記事を見返していると、無駄に長いものもあり、
上に戻るボタンの必要性を感じたので設置しました。
こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m
ツイッターリンクの埋め込み
ツイッターを開設したのでタイムラインを埋め込みました。
こちらのサイトにツイッターのマイページのURLを入力するとコードを作成できます。
管理画面で、デザイン⇒カスタマイズ(スパナマーク)⇒サイドバー⇒モジュール追加でHTMLを選択し入力すればOKです。
ツイッターが不必要と感じたときは削除します
さいごに
他にも気になる部分はありましたが力尽きました・・。
ここまでで丸３日はかかってます。
調べたけれどうまくいかず設置していないものも結構あります；
難しいですね；
m(_ _)m
