読者です 読者をやめる 読者になる 読者になる

凡人CLUB

凡人であっても楽しく充実した毎日は過ごしていける。あがきながらも少しだけHAPPYになれるブログを目指して

ブログカスタマイズ超初心者の私がかっこいいデザインに挑戦してみました

ブログカスタマイズ ブログカスタマイズ-デザイン
f:id:sumahobonzin:20170303130956j:plain

f:id:sumahobonzin:20160617115704j:plain

ロゴ作成の時もお世話になったJOEさんのブログを見ていたら、何やらかっこいいブログデザインのテーマを作られていてただただ凄いな、と遠い目で見ていました。

だって、そんなCSSとか言われても超初心者の私にはサッパリでしてw

と思っていたのですけど一瞬でテーマのインストールがどんどんと増えていってまして、あれ?これはもしかして私みたいな初心者でも簡単にカスタマイズできちゃうのかな?という気分になってきたのです。

あまり自慢出来るような記事は書いていませんが、見に来てくれる人が少しでも楽しくなってくれたら嬉しいのでブログのデザインもかっこいいほうがいいですよね♪

そんなわけで実際に初心者の私でも簡単にデザインテーマの変更ができるのか試して感じたことなどを書いていきたいと思います。

 

まずはテーマをインストール

 

テーマストアからJOEさんの「CONTENTS」をインストールします。

 

CONTENTS - テーマ ストア

ここは何ひとつ難しいことはありません。

ただ右にある「プレビューしてインストール」をぽちって押すだけです。

サイトイメージをかえるとデザインが変更されるとかの案内が出てくるのですが、私はそもそもいじっているところがないのでそのまま実行します。

 

終わり。

 

え!笑

CSSのコピペとかなんか文章打ちかえとかするんだと思って意気込んでいたのにw

たったこれだけで…

 

f:id:sumahobonzin:20160616131249j:plain

 

私のブログにもかっこいいデザインが実装されました☆

ただこれだけで終わってしまうとあまりにも短いので、せっかくですからデザインカラーの変更もやってみましょう。

 

デザインカラーの変更もコピペ一発!

 

この「CONTENTS」テーマの細かい変更については、JOEさん自ら丁寧な解説をしてくれていますのでそれに従ってコピペするだけ。

 

http://www.dreamark.tokyo/#色を変えて使いたいな

 

ちょっとブログ内のイメージをお借りします。

f:id:sumahobonzin:20160616131741j:plain

こんなキレイな色にコピペ一発で変えることが出来ます。

私のブログはどんなイメージかなぁ?

まとまりがないけどたまに料理のことを書いたりしているので、今回は利休茶を使わせていただきましょうかね♪

使用する色それぞれのコードを書いてくれていて、好みに応じたコードをコピペするだけで簡単にかわりました☆

 

f:id:sumahobonzin:20160616132753j:plain

どうですか!

ちょっとかっこよくないですか?

なんだか出来る人のブログみたいになってきました。

ボタン押してコピペしただけなんですけどねw

昨日までの標準装備が嘘のようにブログがかっこよくなったので、重い腰をあげてカテゴリーわけもして話題のパンくずリストも実装しましたよ♪

カテゴリといってもほとんど「雑記」でまとめてしまってあまり意味がありませんでしたけどねw

 

肝心のコンテンツ=私の記事は時間をかけてこれから成長していくとして、いざブログデザインを変更してみると他にも色々とやりたいことが出てきたのでこれからやっていきたいブログカスタマイズについて書いておきたいと思います。

 

※追記

スマホのデザイン変更が完璧ではなかったようです…。

本当に素人すぎてスミマセン。

ここから、

はてなブログ独自のスマホページにもCSSを対応させるコードを紹介。 - DREAMARK

コピペ一発でスマホもPC版と同じような見た目にかわります♪

簡単にメニューバーも出来ちゃった…笑

まだまだカスタマイズできそうなのですが、今回はここまでで。

追記ここまで※

 

 

ブログカスタマイズのこれからやってみたいこと

 

まずはメニューバーですね。

せっかくカテゴリ分けが終わったので、どうせならメニューバーを記事上に設置してスマホからでも簡単にメニューが開けるようにしたいです。

これはちょっと挑んでみたのですが、私の凡人脳ではまだ理解が難しくスマホで横表示のメニューバーができません。

なので色々勉強して少しずつやっていきますので、もしもメニューバーが出来ていたらやっと学んだんだなwと察してください。

 

次にやりたいのは読み込みのスピードアップ。

実はもうひとつブログを書いていて画像も全て解像度を落としているにもかかわらず、記事が表示されるスピードが遅いのです。

しょうがない部分もあるとは思いますが、読んでくれる方が不快にならないようになるべく軽量化していきたいですね☆

 

他にもヘッダー画像の変更とかやりたいことはいっぱいありますが、ブログを書いていくことが一番やるべきことだと思いますのでカスタマイズはこれくらいにしておきたいと思います。

 

最後に

まだブログを始めたばかりで私のように何もわからないという方でも簡単にかっこいいデザインが出来ますので「CONTENTS」はオススメです。

それとスマホからの見た目もすごくキレイになり、スマホユーザーにむけた凝ったデザイン変更のコードも随時更新してくれているのでありがたいです☆

私はまだ使いこなせませんが…笑

 

よし。

デザインに見合うブログに育てていくようにガンバろっとw

 

www.dreamark.tokyo

私なんかが紹介して良かったのかな…。

いいよね、怒られたら消しちゃえばw