うつ病けんけんのFedora/FreeBSD/Linux/UNIXのまとめ日記 : 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)
クチコミを見る

そして、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版なんだよねえ。）

タグ：: HTML; CSS; webデザイン; Webデザイナー; 2段組; リキッドレイアウト; 2カラム

<!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>

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

うつ病けんけんのFedora/FreeBSD/Linux/UNIXのまとめ日記

2段組

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