けいぶろぐ

2016年10月に念願のマイホームが完成。これまでの家づくり奮闘記と、それにまつわる家具や生活雑貨の話題。DIY関連の発信など、トータルに楽しんでいく為のぶろぐ

KEI BLOG

well come to my site

はてなブログを初心者でもかんたんオシャレにカスタマイズまとめ~テーマDUDE~

f:id:keisuke9140:20160428123955j:plain

はてなブログに『DUDE デュード』テーマを導入しました!!

めちゃくちゃ簡単にかっこよくカスタマイズが可能です。

DUDE - テーマ ストア - はてなブログ

『テーマストア』にて絶大な人気を獲得しており、現在テーマランキング2位!!

私が導入した4月末時点の3カ月で3633件のインストールです。

初心者でも簡単に導入出来る所が最大の魅力かなと思います。

 

更に『DUDEデュード』を自分好みにカスタマイズする上で、色んな記事を参考に

させていただきました。参考にさせていただいた記事主の方に感謝しながら、

自身の備忘録として参考記事をまとめております。

 

『はてなぶろぐ テーマストア』にて、

デモページも用意されているので確認してみてくださいね。

 

かっこよくする為のカスタマイズ方法

『DUDEデュード』を作られたデザイナーさんが実際の方法紹介しています。

かなり分り易く書かれていますので、参考にしてください。

tsukuruiroiro.hatenablog.com

記事中での変更内容は・・・

  • タイトルバーの変更
  • タイトル画像やサイズ、フォントサイズの変更
  • サイドバーの変更方法
  • ソーシャルボタンのカスタマイズ

 

ヘッダー下「大見出し」「中見出し」のみの場合は下記コードです。

※フォント変更は後半に記述しております。

 

スマホデザインはこちら

『Literally』さんのページ

tsukuruiroiro.hatenablog.com

 

作者のCatNoseさんも書かれていますが、

フォントサイズや行間の変え方など、DUDEの細かいカスタマイズ方法を書き出せばきりがないので、この記事でここまでにしておく。しかし、Webデザインを勉強したことのない人が、細かな調整を諦めてしまうのはもったいない。できるだけDUDEを自分好みにアレンジし、世界にひとつしかないデザインのブログを運営してほしいと思う。

 

 サイドバーのタイトルフォントサイズを変更

タイトルサイズを変更したい場合はこちらの記事が参考になります。

『UNDERGROUND FLAVOR』さんのページ

blog.kaerucloud.com

変更したい部分のコードを「デザインCSS」へコピペして数値変更です。

f:id:keisuke9140:20160501214924j:plain

サイドバーのタイトルフォントはデフォルトだと大きい場合があります。

 

当ブログでは下記のコードを貼り付けてます。

このコードではサイドバータイトルモジュール全ての文字サイズが変わります。

デフォルトは20ptくらいですので、値を小さくしたり大きくしたりで

調整してください。当サイトの感覚では10ptが良い感じです。

 

また、内部文字サイズの変更や記事本文やタイトルの変更方法も上記事内に

ありますので、全体のサイズ感を調整いただければと思います。

 

 Googleフォントを活用してタイトルフォントなどをカスタマイズ

『DUDEデュード』タイトルや見出しのフォント変更について、

こちらの記事を参考にさせていただきました。

『F Lab.』さんのページ

lahtnas.hateblo.jp

同じ記事内にも参考になる導入方法があります。

『F Lab.』さんのページ

lahtnas.hateblo.jp

LITERALLYさんの記事でもGoogle Web Fontsについて紹介されています。

tsukuruiroiro.hatenablog.com

 

見出しのカスタマイズ 

CSSは書き足していく事で、内容は上書きされていきます。

テーマのデフォルトより更に好みにカスタマイズしていく事も可能です。

その一つである見出しのカスタマイズで参考にした記事です。

『NO TITLE』さんのページ

shiromatakumi.hatenablog.com

 

色コードも合わせて確認しておくと便利です。

www.color-sample.com

 

AmazonやiTunesの商品紹介レイアウト崩れの修正

テーマ『DUDE』を使用すると、商品紹介のレイアウトが崩れます。

f:id:keisuke9140:20160506172626j:plain

こんな感じに・・・(汗)

自分もずっと気になっていたので検索すると記事がありました。

 

『modest violet』さんのページ

shin21.hatenablog.com

コピペで簡潔するので、是非導入しておきましょう。

 

 

色々な素材を組み合わせあながら自分好みのブログ作りを楽しみましょう。

 

他にもたくさんのブログカスタマイズ記事があります

ブログランキング・にほんブログ村へ
にほんブログ村