▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

  当Blogはプロモーションが含まれています

はてなブログのデザインを DUDE から CONTENTS へ変更したよ!

  本ページはプロモーションが含まれています

 

 

 

f:id:bless-you:20161103033206j:plain

 

 

思い立ったが吉日で、「DUDE」から「CONTENTS」へと

ブログのデザインを変更しましたん。

チマチマと施してきたカスタマイズ達が、ボタン一つで崩れる衝撃。

手直し作業開始だよ・・・っていうお話しデスん。

 

 

 

 

DUDE から CONTENTS へデザイン変更

 

さて。

 

DUDE - テーマ ストア

2週間ほど前に心機一転!

ブログのデザインを「DUDE」へ変更した▼・ェ・▼。

 

 

f:id:bless-you:20161103030222j:plain

 

 

f:id:bless-you:20161103030458j:plain

 

 

試行錯誤しながら、チマチマとカスタマイズを施して参りました。

 

 

ブログのデザインまたまた変更することにしたよ!

この日記をきっかけに勢いに任せて、

またまたデザイン変更ボタンをぽちこしました!

 

 

CONTENTS - テーマ ストア

今度のデザインは「CONTENTS」

 

インストールボタンをぽちこして、変わり果てた My ブログの姿。

 

 

f:id:bless-you:20161103032104j:plain

 

f:id:bless-you:20161103032644j:plain

 

f:id:bless-you:20161103033206j:plain

 

 

目にした瞬間、気が遠くなりそうだった。( ꒪⌓꒪) シロメ

 

 

初期設定に戻ってるところ。

かと思えば、DUDEの名残やら、

自分でHTMLを追加したところや変更した設定がいくつか残ってたり。

 

 

il||li(つд-。)il||li

 

 

でも、自分で決めたんだもんね!

気持ちを切り替えた途端、沸々と湧きあがってきた闘志を感じて

『根っからのドMだなwww』って自分で笑えた!(๑→ܫ←๑)

 

 

グローバルメニューの再設定

 

f:id:bless-you:20161103035849j:plain

 

 

まずは一番目に付くところからやっつけるよ!d(ŐдŐ๑)☆ビシッ

 

ヘッダ部分に以前書き加えたHTMLを削除。

 

 

多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表 - DREAMARK

 

 

CONTENTS のサイトから、グローバルメニューのHTMLをコピペ。

リンクの再設定。

 

 

ここで気付いた。

このデザイン、メニューがドロップダウンしないヤツだった! (。>_<。)

 

 

f:id:bless-you:20161103043159j:plain

 

 

ちょっとだけ悩んだけど。

今んとこ、ToSやる時間ないからArcheAgeだけ表示しとけばいっか!

▼・ェ・▼ね、切り替え早いよ?

「どーしよっかなぁ・・・ (。・ˇ_ˇ・。)ムゥン‥」とか、あんま悩まない。

いっつもね、「ん~・・・、どーしよっかなぁ・・・ (。・ε・。)」って

言い終わる頃には決まっちゃうことが多いね!

 

 

f:id:bless-you:20161103045021j:plain

 

よし! できた!!(๑•̀ㅂ•́)و✧

 

 

フォントの再設定

 

コピペでOK!ブログのフォントをカスタマイズする方法【はてなブログカスタマイズ】 - North-Geek

 

 

CONTENTS で設定されてるフォントも、丸々っちくて可愛いけど。

やっぱり、North-Geek 先生のとこのフォントがいいな!

 

 

f:id:bless-you:20161103051613j:plain

 

 

仮名文字は変わんなかったわ!

でも、数字とアルファベットが優しくて可愛い感じでしょ??

▼・ェ・▼、そうゆうところこだわるよ!

 

 

行間を再設定

 

 

全体的にシンプルなデザインにし、コンテンツをメインに考えています。整えられた余白はブログを美しく見せてくれます。そして、ゆとりのある文字間隔は文章を読みやすくしてくれます。

CONTENTS - テーマ ストア

 

 

先生が良かれと思ってこだわってくれたのにね。

ごめんなさい。(。>_<。)

 

 

▼・ェ・▼、広すぎる行間ってどーもこぉ、

落ち着かないっていうかなんていうかモニョモニョ・・・

ってことで、前回と同じく行間幅狭くしちゃいますん!

 

 

はてなBlog の行間が広過ぎるからなんとかしたい!

・行間幅の調整

・文字サイズの変更

上の二つについて書いてますん。

参考にしてくらっし。

 

 

ちなみに、DUDEの時は文字サイズを16▶15へ変更したけど、

CONTENTSの場合はデフォルトで15だったみたい。 

ほんと、作る人の感性によって色々違うよね。

 

 

f:id:bless-you:20161103054419j:plain

 

 

ふぅ、落ち着いた!(๑•̀ㅂ•́)و✧

 

 

トップへ戻るボタンを再設置

 

f:id:bless-you:20161103060153j:plain

 

 

CONTENTSの場合ね、記事欄外の左隅にあるっちゃあるんだけどさ。

記事を最後まで読ませる仕組みなんだとは思う。

 

 

でも、▼・ェ・▼が読む側だったら

途中からトップへ戻るボタンが出てきてくれる方が嬉しい!

つか、ぶっちゃけ日記書くときもプレビューで確認する時に、

自分でも使ってたんだよね。(๑→ܫ←๑)

これはもぉ慣れちゃったら手放せない逸品デス!d(ŐдŐ๑)☆ビシッ

 

 

はてなブログにページトップへ戻るボタンをつけよう! - No Hack No Life

フッターのHTMLとデザインCSS、それぞれにコピペでOK!

 

 

▼・ェ・▼はね、

font-family: "Avenir Next", "century gothic", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;

っていうのを付け足して、フォントを変更したよ。

あと、ボタン自体の色も変更した!

 

 

WEB色見本 原色大辞典 - HTMLカラーコード

f:id:bless-you:20161103062848j:plain

 

 

 ▼・ェ・▼の一押しは『和色大辞典』

淡くて渋い色が、これでもかっ!!!ってほどあるよ!

大好き♡

 

 

今回設定した色ダヨ。

 

フェードイン時。

色名:胡桃染(くるみぞめ)

コード:#a58f86

f:id:bless-you:20161103063934j:plain

 

カーソルを合わせた時。

色名:銀煤竹(ぎんすすだけ)

コード:#856859

f:id:bless-you:20161103064308j:plain

 

 

やっぱり自分の好きな色に変えられるのは喜び♡✽ (pq*´v`)*♪.:*ೄ·

 

 

 

 

とりあえず、今回の修正はココまで!

おつかれさまでした!

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

Thank you.

I love you.