うつ病双極性感情障害を抱えたけんけんFedoraFreeBSD勉強日記。
Linux/Unixデスクトップ用途として使う秘訣お教えします。
 since 2006年2月16日(木)

Webデザイン

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

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

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

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

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

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

最初は、HTML/CSSをblogでいじるとわけがわからなくなるので、 世間に非公開でもいいので、
詳解HTML & CSS & JavaScript辞典
詳解HTML & CSS & JavaScript辞典
クチコミを見る
をみて自分でHTML/CSSをひたすら試す。 でしょうか。

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

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

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


持っている書籍紹介

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

ということです。

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

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

HTML/CSSって難しい…

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

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

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

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

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


Web_creatos_layout

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

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

ブログネタ
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)
配色イメージ見本帳 (MdN design basics)
クチコミを見る

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

後述、感想

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

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

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

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

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

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

DVC00001

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

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

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

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

Livedoor BlogをPRO化したので、FTPで画像をアップロードしてみた。


Livedoor blogをPRO化したので、テストも兼ねてFTPでアップロードした、画像を表示させてみてます。
私が手描きで描いてものです♪

もうだいぶ前の漫画、いちご100%の東城綾ちゃんを描いてみました♡

ちょっと耳が小さいですねぇ。他にもっと可愛く見える箇所はどこかな?


ご指摘、ご感想お待ちしております(*´ω`*)  


Linuxから、FTPクライアントを使ってアップロードする方法は、また後日にでも特集したいと思います。
それでは(^.^)/~~~


telnet&ftpがわかるとネットワーク通信に強くなる Windows版―メール送受信・UNIXシェルの活用からFTPサーバ構築まで
telnet&ftpがわかるとネットワーク通信に強くなる Windows版―メール送受信・UNIXシェルの活用からFTPサーバ構築まで
クチコミを見る

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

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ファイルの内容。
0 Beta 11


CSS適用後。

0 Beta 11-2段組-青


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;
}

ブログ内の検索
Google

WWW を検索
このblog内を検索
最新コメント
コンピューター オススメ
Linuxオススメ本
コマンド本
アクセスカウンター

    はてブリスト - 現在
    • ライブドアブログ