うつ病けんけんのFedora/Linux日記 : webデザイン

webデザイン

2011年09月27日09:27

またまたblogデザインを替えました。~ 倉木麻衣ちゃんのDiamond Waveにインスピレーションを得て

カテゴリ: Webデザイン; 画像処理

またまた、blogデザインを替えました。
とってもシンプルなデザインをもとに、 CSSプロパティをいじったり、 Livedoor用というかMT用の特殊タグを弄って。

ブログトップ絵

ブログトップ絵を抜本的に差し替えました。
カラフルというか虹色ですね。全色というか。
The Best of L’Arc~en~Ciel 1998-2000 (通常盤)
クチコミを見る
好きなんで。 L'arc~en~Ciel=フランス語で虹という意味だそうで。

で、なんで菱形かというと、倉木麻衣ちゃんの
DIAMOND WAVE(初回限定盤)(DVD付)
クチコミを見る
好きなんで。
ブリリアントカットじゃないですけどね(´・ω・｀)

あ、今度ブリリアントカットを
Inkscapeマスターテクニック【無料グラフィックソフト「インクスケープ」を極める】 (100%ムックシリーズ)
クチコミを見る
を使ってデザインしてみますか。

デザインカラー

皆さんお気づきのように、背景色はブラックです。
もとのテンプレートは背景色は白色で、文字色は黒だったので、文字が見えなくなりながら地道に変更して行きました。

苦労した(*´∀｀*)
デザインカラーは、

Web creators (ウェブクリエイターズ) 2009年 12月号 [雑誌]
クチコミを見る
を参考にして、黒とマジェンダを組み合わせてガーリーな配色。

2段組、左メニュー、リキッドレイアウト

レイアウトが一番こだわった箇所。
ワザと、メッセージボードとプラグインカラムの高さをずらしてダイナミックさを表現。

そして、ブラウザのサイズや解像度のサイズによって、幅が伸び縮みするリキッドレイアウトというのを採用しています。
そして、右側にプラグインがあったのですが、CSSを弄って左側に移動させています。

blogデザインを変更するためのコツ

最初は、HTML/CSSをblogでいじるとわけがわからなくなるので、世間に非公開でもいいので、

詳解HTML & CSS & JavaScript辞典
 クチコミを見る
をみて自分でHTML/CSSをひたすら試す。でしょうか。

blogデザインを変更する際に参考にした書籍の写真

ここで紹介した雑誌は本当にこのとおり買ったものだったり。全部説明して載せたいけど内容が濃すぎて書く元気ありましぇん。申し訳ないですが、上記リンクからご購入を(*´∀｀*)

本当に買ってることを証明するために写真をペタン

持っている書籍紹介

タグ：: webデザイン

2011年08月24日20:04

弄りにくいので、blogデザイン戻しちゃった…

カテゴリ: Webデザイン

ということです。

デザインは綺麗なもの多いのですが、レイアウトが崩れるものが多い…

特に、メッセージボードを強引に挿入すると崩れる…
というわけなんで、このデザインをちまちまと弄って、俺得にしますかね。

HTML/CSSって難しい…

一応、個別記事の時にもメッセージボードが出ていて、検索結果に対応する記事の前にずるずらと、メッセージボードが表示されるとじゃまかな？と思って消しました。

このLivedoor固有のタグを理解するのに時間が…

Livedoor blogは、MT(Move Type) blogシステムの拡張みたいですね。 Webデザインは、奥が深い…

Web デザインのレイアウトは、

写真のように、一生懸命、内容を吟味したんですけどねえ。
まあ、この雑誌のidのつけ方、 content,container,main,sub,extraという業界標準？のつけ方も書いてあって非常に参考にはなりましたけども。

Web creators (ウェブクリエイターズ) 2007年 10月号 [雑誌]
クチコミを見る
を読みた押して、自信持ってたのですが、
使い倒すにはまだまだ修行が入りますなあ。

XHTML+CSS プロが教える“本当の使い方”
クチコミを見る

タグ：: webデザイン

2011年08月09日11:33

ブログデザインを変えてみた。~リキッドレイアウトな2カラム（２段組）を使って。

カテゴリ: Webデザイン; 画像処理

ブログネタ：: Linuxに関する運用に参加中！

blogデザイン変更！！

タイトル通りブログデザインをちょこちょこ弄っとりますです。
独学LinuxさんやLinuxをはじめようさんもデザインを変更されましたが、
実はその前からずっと、色々弄ってたり。

しかも、ブログのテンプレートは変更せず、コツコツと変えてます。

注意点

私の試した環境はLivedoor Blogですが、おそらく他のblogサイトにはてハマることなので書いておくと、デザインを変更しても反映されない場合があります。
もちろん、CSSセレクタが複雑なせいで反映されないということもありますが、
プレビューでは設定を変えても見えないという仕様になっている模様。
ですので、デザインを保存してから実際のblogで確認したほうがいいと思う。

レイアウトの調整

主に配色よりもレイアウトにこだわってみました。

2カラムであることは変更していませんが、
リキッドレイアウトという、ブラウザのズーム、フォントの大きさの拡大縮小機能を使ってもカラム落ちしないようにつくってます。
それどころか、おそらく画面の解像度を変えたり、ウィンドウサイズを変えてもカラム落ちしないはず。

これが結構難しい。（by クレヨンしんちゃん。）
今の所、ブラウザのズーム機能で縮小すると、プラグイン部分の拡大縮小はレイアウト崩れというか、内部の内容というか文字がはみ出てしまうので、px指定にしてサイズを固定。
そのせいで、コンテンツ内の右側に隙間が出来ちゃう…
まあしょうがないです。

ブログタイトル

ブログタイトルも他の方みたいにもうちっとかっこよさげなものにしたいけど、
今の画像のほうが、あ、このサイトは、FedoraやLinux、FreeBSDなどのUNIXなblogなんだなとわかってもらうためにあえて変えていません。

リンクにアニメーション効果♪

気づかれている方もいると思いますが、
私のblog内のリンクにマウスを持って行くと、フォントがイタリック体になり、文字の大きさも一段階大きくなります。

しかも、javascriptどころか、HTML5/CSS3も使ってなく、CSS2の範囲内。
さて、どうやって実現してるでしょうか？
分かった方はコメントにもで(^O^)／

blogデザイン変更におけるこれからの課題

あとは、ブログ全体の配色を調整したいところ。
現段階では、紫を基調にエレガントな配色をめざしてます。
何故、紫かって？　RedHatな赤と、Fedoraな青の混色なので。（本当は赤紫色になる）

参考:

配色イメージ見本帳 (MdN design basics)
クチコミを見る

そして、blogデザインの元のテンプレートでのプラグインのタイトルの背景画像が画像で作ってあるため、
タイトルが二段になってしまうと、なんだかタイトルバーの表示がおかしい…
まあ、ぼちぼちまた変えて行きます。

後述、感想

それにしても、配色を一生懸命拘っても、ディスプレイの輝度、コントラストで全然印象が違う…
レイアウトもすぐ崩れるし。

Web デザイナー、Web Creatorsさんの大変さが見に染みました。

リキッドレイアウトを説明するのは大変なので、以下の本がオススメだけど、在庫あるかなあ。

Web creators (ウェブクリエイターズ) 2007年 10月号 [雑誌]
クチコミを見る

このWeb Creatorsは、Webデザイナーのプロの方には有名な雑誌らしいです。

下の写真のように、このWeb Creatorsな雑誌と、後述するHTML/CSSのリファレンス本の日でわシステムさん本をアホほど買ってたりしますです。

色彩心理学入門―ニュートンとゲーテの流れを追って (中公新書) - クチコミを見るから、徹底図解色のしくみ―初期の光学理論から色彩心理学・民族の色彩まで (カラー版徹底図解) - クチコミを見る
なんて本も買ってたり(´・ω・｀)
黄色本と、黒本がムックとして一番まとまってるんだけど、Amazonでは売り切れで、インプレスダイレクトで買えるけど…
（本屋であるか聞いてみると、意外と取り寄せてくれたりする。なので、本屋は本屋で存在する意義がある。）

ただし、Web Creators本は、HTML/CSSタグをキッチリ勉強してからじゃないと難しかったり(´・ω・｀)するので、

詳解 HTML&CSS&JavaScript辞典
 クチコミを見る

を読まないとしんどいかな。（第5版が出てるのか。私第4版なんだよねえ。）

タグ：: webデザイン

2011年02月21日17:22

Webデザイナーを目指して - リキッドレイアウトな2段組に挑戦

カテゴリ: Webデザイン

Webデザイナーを目指してリキッドレイアウトな2段組に挑戦してみました。

ポイントは、divタグをid付きでで括り、サイドバーにしたい箇所をCSSでfloat: left;とすること。
そして、次のdiv要素をmargin-left: 20%;とマージンをしていすることです。
参考：Webデザイン表現&技法の新・スタンダード (インプレスムックエムディエヌ・ムック)

HTML。
（文中のmailアドレスは、@以下がないので要注意！！）



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">

	<head>

		<meta name="author" content="kenken" >

		<meta name="keyword" content="HTML,CSS,javascript">

		<meta name="description" content="HTML,CSS,javascriptの実験場">

		<meta name="generator" content="Bluefish 2.0.2" >

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<meta http-equiv="content-style-type" content="text/css" lang="utf-8" xml:lang="utf-8" />

		<link rel="stylesheet" type="text/css" href="top.css">

		<title>HTML,CSS,javascriptの実験場 title</title>

	</head>

	<body>

		<div id="all">

		<div id="header">

			<h1>HTML,CSS,javascriptの実験場</h1>

			<div id="abstract">

				<p>HTML,CSS,javascriptの実験場です。<span class="red">Web Creators</span>に載っていた事を色々試していきます。</p>

			</div>

		</div>

		<hr><!--非推奨タグ-->

		<div id="first">

		<center>中央揃えcenter</center><!--非推奨タグ-->

			<p>HTMLでは右端に行かない限りエディタで改行しても改行されません。改行br<br>改行後</p>

		</div>

		<div id="contents">

			<div id="nav">

				<h2 class="title">ナビゲーション</h2>

				<ul>

					<li><a href="html/index">HTML</a></li>

					<li><a href="css/index">CSS</a></li>

					<li><a href="">javascript</a></li>

					<li><a href="">Fedora/Linux</a></li>

				</ul>

			</div>

			<div id="article">

			<h2 class="title">記事内容</h2>

			<h1>見出しレベル1 h1</h1>

			<h2>見出しレベル2 h2</h2>

			<h3>見出しレベル3 h3</h3>

			<h4>見出しレベル4 h4</h4>

			<h5>見出しレベル5 h5</h5>

			<h6>見出しレベル6 h6</h6>

			<h2 class="title">テキスト</h2>

			<p>強調表示、<strong>strong</strong>と<em>em</em></p>

			<p>用語を定義する。<dfn>dfn</dfn></p>

			<p><del>del削除した内容</del><br><ins>ins追加した内容</ins>

			<blockquote>blockquote引用</blockquote><q>q短い引用</q><br>CDの規格：<cite>ISO9660</cite>

			<pre>

<code>

	code

	g="こんにちは"

	document.write(g);

</code>

</pre>

			変数<var>var</var>に値を代入します。<br>

			プログラムの出力サンプル<samp>samp</samp><br>

			<abbr title="Hyper Text Markup Language">HTML abbr</abbr>と<acronym title="Small Office Home Office">SOHO acronym</acronym>

			</p>



			</div>

		</div>

		<hr>

		<div id="footer">

			<address>

				お問い合わせ<br />

				けんけん<br />

				E-mail:<a href="mailto:fedorakenken">メールアドレス</a>

			</address>

		</div>

		</div>

	</body>

</html>

HTMLファイルの内容。

CSS適用後。

CSSコード。



body

{

	background-color: gray;

}

div#all

{

	width: 85%;

/*	background-color: red; */

	background-color: white; 

	margin: 0 7.5%;

}



div#contents

{

/*	background-color: cyan; */

}



div#header 

{

	background-color: blue;

	color: white;

	margin: 10px;

}



div#nav

{

/*	background-color: yellow; */

	float: left;

	height:100%;

}



div#article

{

	margin-left: 20%;

/*	background-color: magenta; */

}



div#footer

{

/*	background-color: pink; */

	text-align: center;

}



.title

{

	background-color: blue; 

	color: white;

}

タグ：: webデザイン

2009年09月28日13:25

Webデザイナーを目指して。

カテゴリ: マルチメディア

うつ病（僕の場合は、躁鬱病も兼ねている双極性感情障害）ですが、
大分本が読めるようになったので、
いっぱい本を買っちゃいました。

将来の目標がWebデザイナーかな。と思っています。
その端っこでLinuxを勉強したり、プログラムを勉強したりで、
自分の強みを増やせていければいいなあと思ってます。

なので、Webデザイナー関係の本を買い漁ってみました。
お金はかかりましたが、自分への投資。
本を読めば勉強したことになり、
技術が着くので職に着く事もできるでしょう。

みなさんもWebデザイナーやってみませんか？
"HTML"をキーワードに検索してみれば、
Web作成方法がタダで手に入りますよ。
このブログでも取り扱ってみたいと思います!!

タグ：: webデザイン

ブログ内の検索