新作ブログテーマ【DUDE】が素晴らしすぎて濡れた

【DUDE】LITERALLYの新しいブログテーマ最高だーhttps://t.co/tVeTk34P9c

— Virginia (@Virginia_twi) 2016, 1月 21

みなさん大好きなWebTipsサイト LITERALLY のcatnoseさんが超クールなテーマを作ってくれました。さっそく試してみることに。「DUDE」はここからダウンロードできます。DUDE – テーマ ストア – はてなブログ

私は以下のカスタマイズを早速サブブログで試してみました。

• タイトルバーの下に”画像＆紹介文”を表示
• おすすめ記事の枠の高さを変える方法
• 背景画像を変える方法

とってもわかりやすい解説の通りにコードをコピペしてみるとこんなかんじに。

おーかっこいい。コピペを数回するだけでこんな風にできるなんてcatnoseさん凄すぎます.. 特にこのテーマがオススメな点は・はじめからおしゃれなフォントに設定されている・見出しもとてもシンプルで使いやすい・インパクトのあるブログになる・catnoseさんの解説が素晴らしい　といったところでしょうか。個人的にもう少しいじりたいところがあったので、調べたものを備忘録として記しておきます。

背景画像の表示範囲を広げる 

DUDEは元々背景画像の表示が大きめなんですが、個人的にはもっと大きく表示してブログっぽさを減らしたかったんですよね。Tipsのコードを以下のように変更しました。

.headimg { background-image: url("画像のURL") }

を

.headimg { background-image: url("画像のURL");
color:#FFF;
-moz-background-size:cover;
background-size:cover;
height:450px;
}

に変更。表示サイズを変更するには450px;の値を変えればOKです。

大見出しの位置を下にずらす

背景画像のサイズを変更したため画面中央に表示される見出しの位置をずらしました。

.headimg h4 {margin: 2em 0 0.5em 0;}

をデザインcssに追記。

タイトル説明文の文字色とサイズを変更

タイトル説明文の文字色が青色だったので白に変更。

#blog-description {color:#ffffff;font-size:60%;}

をデザインcssに追記。

ブログタイトルの背景色を変更

ブログタイトルの背景色も濃い黒に変更しました。

#blog-title {background: #1c1c1c;}

 をデザインcssに追記。

最終的にこんな感じになりました。

ちょっと分かりづらいですがTOP画がかなりどデカく表示されています。思ってた通りな仕上がりになって大満足です。そのうちこのブログに移植します。→いろいろ考えてやっぱりやめました。

catnoseさん、クールなテーマと分かりやすい説明

本当にありがとうございます！！

注：私はCSSの知識等あまりないので上のコードに間違いがある可能性があります。ブログデザインに反映させる場合は自己責任で、必ず変更前のコードをバックアップしてから行ってください。

Pocket

Tweet