ミニマリスト日和

ミニマリスト日和

夫婦でミニマリスト。スッキリだけど落ち着く部屋を目指して。

ブログのテーマをNakedに。初心者が自力でどこまで「やりたいデザイン」を実現できるかな?試してみた。

\2017年12月13日、新刊出ます/

ブログのテーマをNakedに変えました。

www.yukihy.com

 

ゆきひーさん (id:ftmaccho)が作られたもの。

シュッとしたデザインがかっこいいなと思って。

 

CSSやらHTMLやら疎い初心者の自分が、

「こんなデザインにしたいなー」を、自力で調べながらどれくらい実現できるものだろう?と思って試してみました。

作成のコンセプトは、
  1. シンプルで使い易いこと
  2. 初期状態でも十分使えるほどおしゃれなこと
  3. 簡単に他の人と被らないようにカスタムできること
  4. 深くまでカスタマイズしたい人はどんどん改造できること
3・4の部分を実現するにはどうしたら良いかを考え、その方のカスタマイズの意欲によってどこまでも改造できるようにしたいなと思い、作成しました。

オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース! - Yukihy Life

「その方のカスタマイズの意欲によってどこまでも改造できるようにしたい」という部分に惹かれました。

 

今回自分がやりたいなと思ったこととしては、

・トップの画像を左右画面いっぱいに表示する

・イラストブログらしく、スマホのサムネイル画像を大きくしたい

・シュッとした印象にしたい。フォントを読みやすくてシンプルでかっこいいものにしたい。

・instagramの画像を活用したい。

・コピーライトというものを表示したいな。

というようなこと。

 

グローバルメニュー

theme-naked.hatenablog.jp

 

グローバルメニューにアイコンをつけました。

家みたいな立方体のマークをつけました。お気に入り。

www.mukaikaze.net

 

フォントを游ゴシックに 

レスポンシブなテーマなのですが、思うところありPCとスマホで表示を変えたい部分があるので、レスポンシブを選択していません。

スマホのフォントを游ゴシックにしました。

ezolab-blog.net

 

ボタン風リンクでメールフォーム設置 

スマホ記事下のメールフォームのリンクをボタン風にしました。

digitalkoukisin.seesaa.net

 

サムネイル画像を大きくした 

スマホのトップページのサムネイル画像のサイズを大きくしました。

tsukuruiroiro.hatenablog.com

 

文字の行間を変えました

www.ituore.com

 

instagramを表示させました 

PCサイドバーとスマホ記事下にinstagramを表示させました。

↓これね。

f:id:mount-hayashi:20161109192323j:plain

 

www.mukaikaze.net

 

関連記事を表示

記事下に関連記事を表示させました。

corp.shisuh.com

 

フッターにコピーライトを表示

theme-naked.hatenablog.jp

 

==ブログカスタマイズの参考になるブログテーマ3選== 

ブログカスタマイズ

Webサイト、ホームページ 

Web開発、Web制作、Webデザイン