- ブログネタ:
- 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版なんだよねえ。)
コメント
コメント一覧 (3)
デザインテンプレートを変えちゃった。
しかも、Fedoraらしく青木デザインをチョイス。
2011年 8月 15日 月曜日 11:15:24 JST 現在、
リンクの色だけ白色だったものを黄色に変更。
青色に黄色の文字はよく似合う。
a{
font-size:medium;
text-decoration:underline;
color: #ffa500;
}
a visited{
font-size:large;
text-decoration:underline;
color: #ffa500;
}
a hover{
font-size:medium;
text-decoration:underline;
color: #ffa500;
}
今回のソースはオレンジだけどアニメーションがない部分でCSSのマウス操作で何とか見分けることが可能ということがわかりました。
それでは、また。
>むしろ、私より正解www
font-sizeを買えないところは何も指定していなかったので、
色んなブラウザに対応するのは必要かも。
a{
font-size:medium;
text-decoration:underline;
color: #ffa500;
}
>a visited{
> font-size:large;
> text-decoration:underline;
> color: #ffa500;
>}
visitedはlargeじゃ、ないよ。
逆にsmall指定して、見たリンクは小さくってはありかもね。
>a hover{
> font-size:medium;
> text-decoration:underline;
> color: #ffa500;
>}
ここに、largeやね。フォントは、実は、italicもしていしてたりwww
>今回のソースはオレンジだけどアニメーションがない部分でCSSのマウス操作で何とか見
>分けることが可能ということがわかりました。
javascriptなしでのこのアニメーションはおもしろいやろ?
今回指定したデザインは表面上のデザインは綺麗なんだけど、
リンク先は、underlineはないわ、全部白い文字やらで
割と苦労したwww
>それでは、また。
あい。コメントでの回答ありがとう。