YESかNOか半分か

元ニートが、再びニートになったりならなかったり。

YESかNOか半分か

初心者の私がブログカスタマイズする際に役立ったツール/サイト一覧

前回の記事でお披露目した、私のブリブリなブログデザイン。
f:id:lunasaurus:20131118152239j:plain
このデザインを作成するまでに利用した便利なツール、サイト様をざざざっと書いていこうと思います。
ちなみに、私の作業環境はWindows 7でございます。

CSSソースの素

初心者がカスタマイズをしようとしても、どこから手をつけたらいいのか分かりません。
とりあえず、ベースとなるCSSデザインがあればラクちんですよねー。
ってことで私は、id:hatenablogさんのサンプルテーマ「Boilerplate」をベースにデザインを改造しました。
f:id:lunasaurus:20131119155918j:plain



はてなブログの構造を知る

id:hatenablogさんの「Boilerplate」を開いても、
f:id:lunasaurus:20131119160811g:plain
…何の事だかチンプンカンプン…。
そんな時は、id:kyabanaさんのブログを参考にしましょう。

f:id:lunasaurus:20131119161755g:plain
上記の記事を何度開いて確認したことか…。はてなブログの構造が分かりやすく書いてあるのでとても参考になります。


あとは、はてなブログのヘルプページにあるはてなブログテーマ制作の手引き にも、ブログデザインをカスタマイズする際の手順やCSSチェックリストもあるので参考にしました。




HTMLエディタ

はてなブログの編集スペースが小さいので、目の悪い私にとって個人的に必須アイテムだったのがHTMLエディタ。
f:id:lunasaurus:20131119150219g:plain
おまけに何故か私のIEだとスクロークバーが作動しなくて、長ーいCSSタグを追っているとイライラするのでHTMLエディタを使ってみることにした。


色々とネットで検索して、私が最終的にDLしたのは、Crescent Eve
f:id:lunasaurus:20131119143616g:plain

動作環境 Windows 2000, XP, Vista, 7

これがねー作業が捗る捗る。無料で使えるフリーソフトなのに、ここまで使えちゃっていいのー!?ってくらいに便利機能が多数。
f:id:lunasaurus:20131119143944g:plain
初心者に嬉しい機能としては、「入力支援」が非常に便利。

このソフト無くして、今回のデザインカスタマイズは完終しなかっただろうというくらいに大活躍したソフトです。


しかし、残念ながらMACには対応していないそうです。
Macユーザーさんは、こちらのサイトにフリーのエディタがじゃんじゃん紹介されているので参考にしてみてください。




Dropbox

先程紹介した、HTMLエディタでCSSを編集したものをアップロードする場所として最適なのが、Dropbox
f:id:lunasaurus:20131119150605j:plain
インターネット上にあるサーバーにファイルを置けるので、CSSの呼び出しをするのには必要不可欠。
Dropboxの詳細はこちらをご覧ください。

PCにあるDropboxの「Public」フォルダにCSSファイルや画像ファイルを保存すれば、瞬時にサーバーにアップされて、CSSを呼び出しているブログにデザインが反映されます。
f:id:lunasaurus:20131119151938g:plain

ちなみに、今現在はDropboxをDLしても「Public」フォルダはデフォルトで表示されないようになっています。

折角、CSSファイルをサーバに上げても「Public」フォルダにCSSファイルが無いとデザインは反映されません。
…どーするの?


大丈夫です。ちゃんと「Public」フォルダを作成する方法はあります。

上記のリンクをクリックして、
f:id:lunasaurus:20131119153159g:plain
左側の「Enable Public Folder」をクリックして、確認メールの登録が完了すれば、「Public」フォルダが作成されます!


Dropboxがあれば、はてなブログCSS編集欄にいちいちタグをコピペしなくても、
f:id:lunasaurus:20131119150219g:plain
HTMLエディタに上書き保存するだけでラクにデザインの変更ができちゃう環境が整うわけです。


f:id:lunasaurus:20131119154429g:plain
おまけに、「Public」フォルダ内に入れたファイルを右クリックすると「後悔リンクをコピー」という欄があります。
ここをクリックすると、ネット上にアップロードされているファイルのURLをお手軽にコピー出来ちゃうのです。
いちいちDropboxのサイトを開かなくてもいいので、背景画像のURLを入手したい時とかに便利です。


ちなみに、先程紹介したid:kyabanaさんのこちらのエントリーに、Dropboxを利用したCSSデザインの読み込み方が詳しく紹介されているので、初心者の方は必見です。



カラーチャート

デザインをする上で、「色」というのは重要です。
f:id:lunasaurus:20131119173339j:plain
Adobe社のKulerというツールは見た目もお洒落ですが、初心者でも使いやすいデザインだと思います。
RGBとHEXの両方で色合いが表示されるので、フリーソフトで画像を作成する時も、デザインの色合いを合わせる事ができ便利です。



真似したいサイトを見つける。

ただ漠然と「デザインを変えたい!」と思っても、良いアイデアがふっと湧いてこない時があります。
そんな時は、自分の好みのサイトのデザインを見てまわるに限ります。

私の好きなブログのデザインは、id:Mamipekoさんのはぁはぁブログ
f:id:lunasaurus:20131119171755g:plain
シンプルなデザインの中に可愛い要素がふんだんに盛り込まれていて、とても好きなデザインです。


id:banchi178さん//鼻毛パラダイムシフト

f:id:lunasaurus:20131119172639g:plain
こちらのエントリーでは、素敵なデザインのはてなブログさんやカスタマイズエントリーがまとめてあるのでオススメです!

この記事もお勉強になりました。



構造なんかが分かってくると、面白いブログカスタマイズ。
ブログを自分色に染め上げる一つの手段として、楽しんでみてはいかがでしょうかー?


「はてな」ではじめるブログ生活―はてな公式ハンドブック

「はてな」ではじめるブログ生活―はてな公式ハンドブック

はてなダイアリー 実践デザインカスタマイズガイド

はてなダイアリー 実践デザインカスタマイズガイド