なまら春友流

ラーメン屋店主兼ブロガーの春友がラーメン、ガジェット、日常について書くブログ

ど素人のCSSのみで行うブログデザイン構築編 ① 〜 Live CSS Editor を使おう!〜 

Sponsored Links


F0126826 9251411

CSSど素人の春友です、こんにちは。
先日こんな記事を書きました。

ブログテーマをWordPressフレームワーク「Thematic」に変更しました | なまら春友流

このテーマにしてからCSSにものすごく興味を持ち始めています。
ってことで自分の備忘録としてデザインを変更してゆく様をブログに書いていこうと思いました。
あくまでも自分で実践してみたことを記載してゆくつもりです。
ど素人なので間違っていたり、美しくないCSSの書き方をしていることも多々あると思いますので、その際はご指導ご指摘いただけると幸いです。
自分ルールとしてphpファイルを直接弄ることはせず、CSSのみでのサイトデザイン変更を目的としています。
理由は上の記事でも述べていますが、子テーマのCSSを編集することでシンプルなブログ管理をするためです。
今回はこの不定期連載の第1回目、どのような方法でCSSを弄っていくか、ということについて述べたいと思います。

Sponsored Links


WordPressフレームワークThematic

まず私が使用しているテーマはWordPressフレームワークテーマの「Thematic」というものです。
ということでこの「Thematic」を用いたブログデザイン構築となりますことをご了承ください。
さて、このthematicというテーマですが、フレームワーク化されているテーマということでそれぞれのphpファイルは全てサーバー内のwp-content / themes / thematic / library /内のファイルから読み出すようになっています。
例えばlibraryファイル内のlayoutというフォルダには2カラムや3カラムのレイアウトデザインが記載されています。
右にサイドバーのある2カラムタイプ(当ブログも採用)だと以下のように記載されていて枠組みが決められています。

/*
LAYOUT: One-Column (Right) Fixed
DESCRIPTION: Two-column 950px fixed layout with one sidebar right of content
*/

body {
min-width:960px;
}
#header {
position:relative;
}
#branding {
width:940px;
margin:0 auto;
}
#access {
position:relative;
overflow:hidden;
}
.menu {
width:940px;
margin:0 auto;
}
#main {
width:960px;
margin:0 auto;
overflow:hidden;
position:relative;
}
#container {
width:620px;
float:left;
}
#content {
margin:0 0 0 10px;
width:540px;
overflow:hidden;
}
.main-aside {
width:300px;
float:right;
position:relative;
right:10px;
}
#secondary {
clear:right;
}
#footer {
clear:both;
}
#subsidiary {
width:940px;
margin:0 auto;
overflow:hidden;
}
#subsidiary .aside {
width:300px;
float:left;
margin:0 20px 0 0;
}
#subsidiary #third {
margin:0;
}
#siteinfo {
clear:both;
width:940px;
margin:0 auto;
}

/* =Page Templates
————————————————————– */

/*
Full Width Template
*/

.page-template-template-page-fullwidth-php #container {
margin:0;
width:940px;
}

.page-template-template-page-fullwidth-php #content {
margin: 0 0 0 10px;
width:940px;
}

.page-template-template-page-fullwidth-php #comments {
width:540px;
}


Chrome拡張「Live CSS Editor」を使う

上述したファイル内のコードをそのまま「 Live CSS Editor」にコピペします。
この拡張機能に関してはこちらの記事でご紹介していますのでご参考に。

なまら春友流 1

上記のスクショのようにもともと設定されているスタイルを「 Live CSS Editor」にコピペしてそれぞれの値を適当に変更してみればどのように表示されるかがよくわかります。
私みたいな初心者にはこういうやり方が一番わかりやすいですね。
もともと設定されているレイアウトをそのままコピペして、そこに記載されている数値を変更することで記載されている内容がどのようにブログデザインに関与しているか、ということまで理解できます。
しかも実際のCSSは変更されているわけではないのでどんどん変更して試せるのがポイントです。
ほんと「 Live CSS Editor」は神拡張機能ですね。

そして子テーマのstyle.phpにはこのように記入するようにしています。

テーマの編集  なまら春友流  WordPress

この「Thematic」というテーマはCSS.style(しかも子テーマの)しか弄らないので、変更した部分をメモ書きしたうえで記載していくと整理されていてわかりやすいと思います。

ってことでこれからちょこちょこ「Thematic」に絞り、CSSのみでのデザイン変更を行ってゆきたいなと思っています。
変更したことは随時書いていこうかな、と。

たぶん何事も Plactice makes Perfect! 、習うより慣れろ!ってことじゃないかなぁ、と思ってますのでいろいろやっていこうと思ってます。
今後のことは全くもってノープランですが、不定期連載で書いていこうと思ってますのでどうぞよろしくお願いいたします。

Sponsored Links


LEAVE A REPLY

*
*
* (公開されません)

Return Top