アシノスキマ A monologue of giraffe.LA (jimdo) web top

独自レイアウトをいじってみたよ#02 ソースはこれ!【追記】

前も書いたのですがjimdo free で独自レイアウトをさわってみました。(現在進行形)

なんとなく用意されているレイアウトきりかえて使っていただけなので

まーやってみるかーと。

 

さわってみるととってもかんたんです。

(まぁ、現状の見た目あててるだけなので、そりゃ簡単だろうと。自分に渇・・・・)

 

もっといれこんでもみたいですが、とりあへず、ここまでの、メモ。

 

とりあへず、現状です。

現状のgiraffela
現状のgiraffela

こんなjかんじです。

 

きわめて普通の見た目。

 

現状のhtml

では、ソースです。

「レイアウト」の「独自レイアウト」のなか、「html」部分に入っている現状(デフォルトから今のデザインにいれかえた)のソース。

 

<div id="container">
    <div id="header">
        <h1>
            <a href="http://giraffela.jimdo.com/" title="アシノスキマ A monologue of giraffe.LA (jimdo) web top"><img src="title.png" alt="giraffeLA" width="140" height="37" /></a><span>アシノスキマ A monologue
            of giraffe.LA (jimdo) web top</span>
        </h1>
    </div>

    <p id="top_img">
        <img src="ashi.png" alt="アシノスキマ A monologue of giraffe.LA (jimdo) web top" width="250" height="267" />
    </p>

    <div id="content_outline">
        <div id="navigation">
            <var>navigation[1|2|3]</var>
        </div>

        <div id="content_area">
            <div id="content">
                <var>content</var>
            </div>

            <div id="sidebar">
                <var>sidebar</var>
            </div>
        </div>

        <p class="page_jump">
            <a href="#container">jump_top</a>
        </p>
    </div>
</div>

<div id="footer">
    <div class="gutter">
        <var>footer</var>
    </div>
</div>

 

 

たった、これだけ。

もちろん、最初からこれをはったわけじゃなくて、

デザインを確認しながらxhtmlを普通にくんだので、そっちのソースものせようとおもいます。 

 

続く。(多分。)

続き。

 

htmlで作っておいたソースはこれ。

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="keywords" content="" />
<meta name="Description" content="" />
<title>giraffe.LA</title>
<meta name="author" content="administrator of giraffe.LA" />
<link rel="index" href="index.html" />
<!-- css -->
<link href="common.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>
<body>


<div id="container">
    <div id="header">
        <h1>
            <a href="http://giraffela.jimdo.com/" title="アシノスキマ A monologue of giraffe.LA (jimdo) web top"><img src="title.png" alt="giraffeLA" width="140" height="37" /></a><span>アシノスキマ A monologue
            of giraffe.LA (jimdo) web top</span>
        </h1>
    </div>

    <p id="top_img">
        <img src="ashi.png" alt="アシノスキマ A monologue of giraffe.LA (jimdo) web top" width="250" height="267" />
    </p>

    <div id="content_outline">
        <div id="navigation">
            <var>navigation[1|2|3]</var>
        </div>

        <div id="content_area">
            <div id="content">
                <var>content</var>
            </div>

            <div id="sidebar">
                <var>sidebar</var>
            </div>
        </div>

        <p class="page_jump">
            <a href="#container">jump_top</a>
        </p>
    </div>
</div>

<div id="footer">
    <div>
        <var>footer</var>
    </div>
</div>


</body>
</html>

多分。

20100707追記-----

<html>からのファイルまでかかなくても、

デフォルトで載ってるタグにcssだけ読み込ませてつくってもいいかも。

------------------------

20100709 追記

 

jimdoで不必要がカットされたhtml

(独自レイアウトのhtml入力部分にかかれているソース)だけを、

.htmlで保存して、

ソースの一番上に、

<link href="ファイル名.css" rel="stylesheet" type="text/css" media="screen,print" />
を入れて保存しておくと、

<html></html>やヘッダはなくても、

DWやブラウザではレンダリングできるので、そのまま編集して、

ローカルで編集したものを、jimdoの編集パネルにはりつける。

これが管理上無難で楽だと思います。

 

jimdo上だけでかいてると、

消してしまったときとか、戻せなくなるので。。。。

-----------------------------------------------------------------

 

 

中身はあまり作りこまず、あくまでおおわくだけ。

中身に関しては、ブロックで構成されていて、

classがついていて、それをデザイン切り替えで切り替えてるかんじだとおもうので、テンプレート用にコンテンツソースはってつくりこんでも、あとで逆に困惑するかもです。

 

あとからパーツは部分部分でつくりこめばいいかなぁ、と。

 

ということで、

大枠をつくったhtmlを、jimdo編集パネルの「独自レイアウト」のhtmlとかかれている部分にコピペし、

右上のxhtmlとかいてあるところをクリックします。

 

そうすると、自動的に不要なタグとかが削除されたりして、

もし、最低限必要なパーツがなければ、ここでアラーとがでます。

 

 

最低限・・・

なものは、

このソースのなかで、

<var>navigation[1|2|3]</var>

など、

<var></var>

でかこまれたパーツ。

ほかにこれとか。

<var>content</var>

<var>sidebar</var>

<var>footer</var>

 

この部分が、ウェブ上で自動的に対応する内容のものに書き換わって表示されているんだとおもいます。

 

だいたいが、classセレクタで制御されてるっぽいので、

varを囲む部分にidをふって、

cssで個別にスタイルづけをしてあげればいいかんじ。

 

class="gutter"というのがとくくっつくみたいなので、こういうのを、

#footer .gutter{}とかで管理。

 

<var>navigation[1|2|3]</var>

については、

メインのナビゲーションがulの入れ子で入る様子。

 

大分類のul

 中分類のul

  小分類のul

 

sorezorenoulに、「.mainNavX」というセレクタがついています。

※Xは変数

jimdoはファイル階層が3階層までしかつくれない(はず)なので、

 

つまり、

ul.mainNav1

ul.mainNav2

ul.mainNav3

というかんじ?

※ul.mainNav3に関しては、そもそも現状3階層までつくってないので確認はしていません。

 

<ul class="mainNav1">

  <li>aaa

    <ul class="mainNavi2">

      <li>aaabbb</li>

    </ul>

  </li>

  <li>ccc</li>

</ul>

 

多分こんなかんじになるので、

カスケーディングをわかっていればcssも問題なしなはずです。

 

 

画像は、最初「images」ディレクトリとか作成してわけていたのですが、

jimdoでつかう画像をjimdoからアップロードした後、

テンプレートからは、同じ階層でパスうっとくほうがいいみたいなので、ローカルでもそろえました。

 

かといって、jimdo.com/username/name.img

に、画像がおかれえるわけではないようなので、

cssからパスはるときはちょっときをつけましょう。

 

 

jump_top