自分なりに生きた証を残すブログ

世界一周・生き方・英語・国内車中泊についての記録です

ブログテーマをUnderShirtに変更し、デザインなどカスタマイズしました【はてなブログ】

f:id:terra-hina:20190307035728j:plain

こんにちは。ブログのテンプレートや各種パーツは、

10ヶ月前、FC2ブログからはてなブログへ移行した時から変えていませんでしたが、

Pro化に伴い変更してみました。この今にも死にそうなヘッダー画像ともお別れです;

 

f:id:terra-hina:20190307004413p:plain

HTMLなどに詳しいわけでもないので、すべて先人の方々の恩恵にあずかっています。

なので、この記事は、参考にさせていただいた方々の記事の紹介となります;

この場を借りて、深くお礼申し上げますm(_ _)m

 

全体のデザイン変更

テンプレートの変更

テンプレートは「UnderShirt」を使用させていただきました。

レスポンシブルデザイン対応で、シンプルで見やすいです。

一覧で複数の写真が見れるという部分は、旅ブログにマッチしていると思います

blog.hatena.ne.jp

記事一覧画像の角を丸くし、本文とスターを消す

Under Shirtの画像の角を丸くし、少し柔らかい印象にしました。

また、記事一覧の本文プレビュとスターを消し、

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

diy-mp.com

スマホで記事を2列表示・背景の余白を無くす

スマホの記事一覧画面も2列表示にしています。

また、画面がごちゃごちゃしているので背景の余白を無くし、スッキリさせました

この方法については、開発者様が情報を公開されていました。

ありがとうございますm(_ _)m

blog.rokuzeudon.com

グローバルナビゲーションバーの設置

手間取りましたが、細めの固定ナビゲーションバーを設置しました。

バーの太さ、カラー、文字カラーを調整し、公式ヘッダを消して使用しています。

スマホは画面が崩れたので消しています;

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

www.bambi.pro

フッターの設置・フッターリンクを設置

フッターを作成し、お問い合わせとプライバシーポリシーのリンクを貼りました。

ヘッダーと同じ色にして統一感を出しています。

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

www.okuni.me

 

記事のデザイン変更

見出しデザインの変更

見出しがシンプルすぎた気がしたので、h3~h5を変更しました

それっぽくなっているんじゃないかと思います。

有名なこちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

saruwakakun.com

斜体ボタンの機能変更

これまでは強調表示の際、赤い太字のみを使用していましたが、

マーカー付きの文字が使いたかったので、カスタマイズしました。

f:id:terra-hina:20190307023030p:plain

この斜体のアイコンを押すことでマーカー付きの太文字になるように変更しました。

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

www.thoughts-make-things.com

行間の調整

記事で改行した時に、やたら行間が空いていたので調整しました。

行間0では狭かったので0.5に設定しています

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

yumasty.hatenablog.com

 

ブログパーツの変更

プロフィールの画像を変更

遺影のような画像を使っていましたが、殺風景で暗めのブログを、

少しだけ柔らかくしたかったので、ゆるいアイコンのイラストに変更しました。

※『ココナラ』で依頼しました。

f:id:terra-hina:20190306222742j:plain

クオリティの高すぎるイラストに戸惑いを隠せません

佐伯さん素敵なイラストありがとうございますm(_ _)m 

ゆるいアイコン描きます あなただけのオリジナル描きます!

プロフィール画像の角を丸くする

細かいですが、さらに柔らかい印象にしたかったので角を取っています

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

50%だと丸になるのですが、今回は20%に設定しています。

www.foxism.jp

上に戻るボタンの設置

f:id:terra-hina:20190307034147p:plain

過去記事を見返していると、無駄に長いものもあり、

上に戻るボタンの必要性を感じたので設置しました。

こちらの記事を参考にさせていただきました。ありがとうございますm(_ _)m

toretama.jp

ツイッターリンクの埋め込み

ツイッターを開設したのでタイムラインを埋め込みました

こちらのサイトにツイッターのマイページのURLを入力するとコードを作成できます。

管理画面で、デザイン⇒カスタマイズ(スパナマーク)⇒サイドバー⇒モジュール追加でHTMLを選択し入力すればOKです。

publish.twitter.com

ツイッターが不必要と感じたときは削除します

 

さいごに

他にも気になる部分はありましたが力尽きました・・。

ここまでで丸3日はかかってます。

調べたけれどうまくいかず設置していないものも結構あります;

難しいですね;

m(_ _)m

 

^