【はてなブログ】実際にやったデザインのカスタマイズを紹介する

はてなProにもなってスマートフォンのカスタマイズができるなった

 

そこで色々デザインいじってみたから

実際に試してみてこのサイトで使っているものを紹介していくよ!

f:id:chibogaku:20161128224605j:plain

最初にこのブログでは初期テーマとしては「innocent」を使用してます

moonnote.hateblo.jp

ではさっそく使ってるデザインを紹介していくよ!

ヘッダー

まずぼくのホームページのヘッダーはこれ。

f:id:chibogaku:20161128225416p:plain

ヘッダー画像

ヘッダー画像はペイントツールSaiで文字を入れて作っただけの超単純なもの。

けどヘッダーが大きくなりすぎちゃったからCSSをいじってヘッダーの高さを小さくした

参考にさせてもらったサイトはこれ

matoyomi.hatenablog.com

またヘッダー画像を作った時の記事はこちら

www.chibogaku.com

メニュー

メニューではカテゴリの中の「小カテゴリ」も使いたかったため、ドロップダウンメニューを採用した。

メニューは何回も作り直したが、ここのサイトが一番わかりやすかった。

www.yukihy.com

記事

見出し・背景

下の画像のように大見出しは左端がオレンジ色のもの、

小見出しはラインのものを使った。

f:id:chibogaku:20161128225803p:plain

 

 

www.yukihy.com

 

 

また、文字の背景に色をつけるCSSも導入した。

上の写真では背景が青の部分がそれ。

他にも点線のものや、 赤色のものなど

色々な種類がある。

使わせてもらったサイトはこれ。

www.yukihy.com

 シェアボタン 

ブックマークやフェイスブックでのシェアは閲覧をあげるためには超大事!

そこでこのブログでは記事の上下にシェアボタンをつけた

f:id:chibogaku:20161128230716p:plain

はてなブログ標準のものと比べると目立ち方が全然違うよね

 

このブログで紹介されているデザインが僕は気に入った

www.ituore.com

 

アマゾンリンクのデザイン

意外と商品を紹介する上で使うことになるのがアマゾンリンク。

しかし元のデザインはアフィリエイト感が強くでてしまうし、デザインも好きではなかった。

そこで、CSSによる編集でアマゾンリンクを可愛く変化させることができた。

f:id:chibogaku:20161128231030p:plain

 

このサイトを使いました

www.yukihy.com

記事下に関連記事の表示

こんな感じで記事下のシェアボタンの下に関連記事を表示することにしました。

f:id:chibogaku:20161128231941p:plain

 

これもコピー&ペーストで一瞬でできました。

www.aritai.net

 

PCで変更したことはこれくらいです!

次はスマホに行きましょう!

スマホ

基本はPC画面で使用したHTMLとCSSをスマホ画面でも同様に採用しました。

しかしデザインなどは違う部分がでてきてしまうので、ここのサイトを参考にさせてもらいました。

 

またスマホの画面の下の画面につけた4つのボタン、これお気に入りです。

f:id:chibogaku:20161128233126p:plain

tsukuruiroiro.hatenablog.com

これはここのサイトからコピペしました。

www.yukihy.com

 

いやースマホでもPC画面と同じ表現方法ができるようになったの超嬉しいですね。

これからはスマホでも快適にブログを読んでもらえるはず!

 

はてなブログのカスタマイズ初心者の僕でもここまではできたので、みなさんもぜひ試してみては??

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です