にんじんの塔

ずっと UNDER CONSTRUCTION

私のブログカスタマイズと、Webデザイン独学方法まとめ(初心者向け)

/^o^\ヤッホォ!みんなー!久しぶりに普通の文体が続いてびっくりしたかー!?
普通の文体で書くと、むしろ「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね」って言葉を思い出しちゃう私だよ!やれやれ。(風の歌を聴け☆)

さて、今日は個人的まとめなので雑で~す(∩^o^)⊃━☆゚.*・。゚
そして初心者向けだよー。本当はライブドアブログ人参より茄子が好き)で書こうと思ったのですが、はてなブログはリンク機能がすんばらしいので、はてなブログで書きますね。暑いのでトマトを食べながら阿波踊りしています。


◆ブログカスタマイズ
テキストサイトや、MovableTypeWordpressでブログをやっていた頃は凝っていたけれども、通常のブログサービスを使う場合、いろいろデザインするのダルいので、提供されているものの中から使います。
ヘッダ画像のインパクトが強いと他のブログと印象がかぶっちゃう気がするので、シンプルなデザインが好き。重いページ嫌いだし。
今はid:kimixさんのデザインを使わせていただいてます☆彡
murmur - babypink - テーマ ストア - はてなブログ

少しだけCSSでフォントや背景色をいじりました。
背景がピュアホワイト(#ffffff)だと長文読みにくいかな?とか、文字は真っ黒(#000000)より少し明るめ(#333333)にしたり。コントラスト弱めて目に優しく調整しているつもりですが、いかがでしょうか?ブルーライト!ヨコハマ。

font-familyは前使ってたデザインのが好みだったので以下に設定~!

* {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS PGothic', sans-serif;
}


あと壁紙がスクロールするの苦手なので、もしそういうデザインを使いたい場合は背景固定のコレな。

body {
background-attachment: fixed;
}

 

サイドバーもなるべくごちゃごちゃさせたくない。コンテンツを見て!出来れば私を見て!!そして抱いて!(?)
「プロフィール」「最新記事」「アーカイブ」「検索フォーム」これだけは必ずつけるようにしてる。なんとなく。サイドバーの位置は右が便利かなあと思っている。なんとなく。
トップページの記事数は1~3記事くらい。1記事あたりの文量に合わせるかな。「続きを読む」機能は慣れていないのであまり使わない。


◆HTML/CSS
私がHTMLを独学したのは2000年頃。まだCSSじゃなくテーブルデザインやフレームが主流でした(見本:阿部寛のホームページ)。 HTML5は今もよく分かってません。
参考にしたのは王道の2サイト!(HTML/CSSやプログラミングは「10日で覚える○○」みたいな本を読むより手を動かして覚えた方が良いって、じっちゃんが言うとった!Office系ソフトもその都度ググって覚えてきたぼよ。)

とほほのWWW入門
HTMLクイックリファレンス

あとは、デザインの気に入ったサイトのソースコードを解読して覚えました。CSSも上記のサイトで勉強したのかなあ…?「そろそろCSSデザインやってみよう!」系の記事が乱立していた時期にちょこちょこ覚えたのだと思います。

Web関係ないけどこの本は読みました。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

 


テキストエディタ
HTML/CSSの編集だけでなく、ブログ本文を下書きするのにも使用。初めて触れたPCのOSがWin95だったので、どうもブラウザ上で文章書くのが不安なの…。仕事でもcsv、tsvファイルを扱う時などに使います。「サクラエディタ」と「EmEditor」が好き。

Sakura Editor - A Japanese text editor
Unicode、巨大ファイルにも対応する Windows用定番テキストエディター! - EmEditor (テキストエディタ)

はてなブログの惜しい点、リンク貼る時に「別ウィンドウで開く」設定が出来ないので、たまに自分で設定します。

<a href="URL" target="_blank">リンクテキスト</a>


◆編集、デバッグ
FirefoxアドオンのFirebugな。
Firebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト

最近はがっつりデザインしないので、たまにしか使わないけど。


◆カラー
個人的には眺めているだけでも楽しくなる色見本サイト♡
WEB色見本 原色大辞典 - HTML Color Names
色見本と配色サイト - color-sample.com

ColorSelector : 富士通
配布終了してしまいましたが富士通「Color Selector」は神ソフトだったなあ。色覚異常の方でも見やすいか判定してくれるので。今のPCにDLしそびれたので、つら…。

RGBと16進数カラーコードの相互変換ツール - PEKO STEP
Office系ソフトで資料を作る時などにも、RBG値へ変換して好きな色にしています。


◆フォント
テキストサイトやブログカスタマイズに凝っていた時に集めたフォントがあるので今はあまり分からない…。好みもありますからね!(ggrks)

dafont.com
漢字が使える日本語フォント 無料ダウンロード 46種類 : 4GALAXYのメモ

私は王道のモリサワ「新ゴ」が好きですねー。あとは「ヒラギノ」「メイリオ」かなあー(思考停止)。


◆画像編集
以前はAdobe Photoshopを使っていたのですが、PCを変えてまして、リサイズやトリミング、色調補正は「ペイント」「Picture Manager」で済ませています。
Photoshop使う前はフリーソフトの「GIMP」を使っていました。私は使ったことがないけど「paint.net」も良いらしい。

GIMP - 窓の杜ライブラリ
paint.net - 窓の杜ライブラリ


◆フリー素材
その時の気分で検索かけてフリー素材サイトを探しているので、特におすすめはなく。好みもありますからね!(ggrks)

素材・アイコン | 株式会社LIG


◆写真加工
ブログにはアイキャッチ画像をつけろ!みたいなのをどっかで読んだんだけど、フリー画像探すのダルい。だもんで、音楽や書籍を絡めた記事の場合はAmazonのやつをアイキャッチにしておる。

それ以外は自分で撮った写真を載せていまーす!でもコンデジだし、マクロON/OFFくらいしかやってないので下手っぴ☆載せたら写真上達するかなーって思ってたけど関係なかった><

なのでコンデジの画像を加工することにしたのであーる。スマホの写真加工アプリは沢山あるけど、PCでもサクッとフィルターかけたいなーと探したのがこちら。

Photo editor | PhotoCat: Free Online photo Editing
Photo editor online - Pixlr.com edit image

↓こちらはオリンパスのサイトで登録が必要だけど加工した写真を投稿するブログも作れる。写真の楽しみ方ハウツーコンテンツもあるので見てるだけで楽しい~!
おしゃれ写真加工・共有サイト Fotopus SWEET PHOTO(スウィートフォト)

本当はトイカメラが好きでトイデジも持ってるんだけども、いかんせん、友だちが一眼レフなのにトイカメラ使うの恥ずかしいの…///
久しぶりに検索したら欲しくなってきた…。
Vivitar ViviCam Classic トイカメラ、トイデジ、Vivitar、GIZMON、HOLGA / ギズモショップ


RSSフィード
RSSフィードのアイコン貼ろうと思ったのですが、ダルいのでやめました。

無料配布のFacebookやTwitterのソーシャルロゴアイコン素材まとめ24選 | 株式会社LIG

以前は、はてなアンテナLivedoorリーダーを使っていたのですが、最近はさっぱり。
しかしFeedlyで久しぶりにRSSリーダーの利用復活!というわけでFeedlyアイコンを設置してみたよ!
http://www.feedly.com/factory.html


Twitterフォローおねだり系
拡散対策(?)はTwitterでしかやってないのでね。

Twitterボタン | About
はてなブログの場合はこれ使わず設置出来て楽でしたね。いやー、すんばらしい。

https://twitter.com/settings/widgets
Twitterタイムラインウィジェット。小窓のやーつ!

Twitter "Follow" Badge for your site / blog
ブラウザの端でアピるやーつ!


◆関連記事ウィジェット
私の場合は、サイト内回遊率を上げるためというより、1記事だけ読んで「羊水」「売れ残りBBA」「学歴自慢」「プリントアウト」等々、都議会だったら2週間はワイドショーネタになるようなコメントをブチかまされるので、他の記事も読め^^と言う意味で貼ってみたョ!あ、他の記事も読んだ上ですか?どうもwww

Zenbackであなたのブログに全てのフィードバックを。
なんだか最近重いよおお。゚(゚∩´﹏`∩゚)゚。

LinkWithin - Related Posts with Thumbnails
シンプルなのでこちらにしてみますた(U ‘ᴗ’ U)

私のブログ運営のKPIはココロ社id:kokorosha)さんの本が売れて、かつココロ社さんに印税が入ることなのでPVはどうでもいいの☆


◆まとめ
基本的には、自分のブログを一番見ているのは自分だと思うので、読者様も意識しつつ、自分が見やすいようにしています。「ページ重すぎない」「長文でも目に優しい」これですね。読みにくかったら教えてくださいね。反映するかは分かりませんが。

せばね~!