ホーム > テーマ > Total Eclipse

Total Eclipse

評価:
starhalf starempty starempty starempty star
カテゴリー:
B.自然.宇宙
閲覧:
19743回

前回、作成した「Over the Rainbow」を元に違ったイメージのテーマ
を作成しようと言うことで、空繋がりで「皆既日食」をモチーフに
テーマを作成してみました。

・レイアウト
このテーマの構成は2カラム用になっています。左右のカラムはどちらも
右カラムに表示されます。順番は上から左カラム、右カラムの順に表示します。

・画面上部右のナビゲーション部分について
ナビゲーションに表示されている文字とリンクはtheme.htmlの36行目から40行目に
あたる箇所に記述されています。
サイトに合せて適宜、表示する文字、モジュール名、リンク先を修正、または追加、
削除してお使いください。

・左カラムについて
ブロックのタイトルで末尾にnoneという文字を入力しておくと、
ブロックタイトルが非表示になります。

・右カラムについて
ブロックのタイトルで末尾にnoneという文字を入力しておくと、
ブロックタイトルが非表示になります。
また、blackと入力しておくと黒のブロックタイトルを表示になります。
同様にgrayと指定すると灰色に指定する事ができます。

・画像
「extras」フォルダ内のフォトショップ形式の画像ファイルlogo.psdは
テーマの左上部のロゴ部分になります。
またfavicon作成用のfavicon.psdも用意してあります
このプロジェクトに関してコメントをお寄せください
6件中1〜6件目を表示

テーマを修正しました

投稿者: ryus_aoi 投稿日時: 2010/9/9 17:17
ryus_aoi

style.cssとrest.cssの文字コートをSHIFT-JISからUTF-8に変更しました。

>domifaraさん
履き違えておりまして申し訳ありませんでした。
重ね重ねありがとうございます。

日本語フォント依存コードについて

投稿者: domifara 投稿日時: 2010/8/22 3:17
domifara

theme.htmlではなくて、style.cssの
line 6

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ',Meiryo, 'MS Pゴシック', sans-serif;

です。日本語フォントがshift-jisで書かれています。
テキストエディタで訂正時にひっかかったのが元々ですが

確かめたことがないので、・・記憶では、
UTF-8環境では特に、
IE は shift-jisで書かれていてもかってに認識して動くが、
他のブラウザーではひっかかる可能性がある?
反対だったかもしれません。IEでは正しく動かない可能性だったか?

だから
先頭で、@charset "utf-8";宣言してutf-8でcss作成していれば
今のブラウザーは、どの環境でも正しく認識するのではないかと・・違ったかも。

テーマを修正しました

投稿者: ryus_aoi 投稿日時: 2010/8/18 9:54
ryus_aoi

テーマを一部修正して更新致しました。
編集箇所は以下の通りです。
 ・theme.htmlの文字コードをUTF-8に変更
 ・theme.htmklの文字コードEUC版を同梱
 ・「Over the Rainbow」のままになっていた右カラムを修正(黒、灰、白の3通り)
詳細はリンク先に記載してあります。

>domifaraさん
お使い頂き誠にありがとうございます。
また、コードや、色指定間違いのご指摘などありがとうございました。
また何かお気づきになられた点などありましたらよろしくお願いいたします。

右ブロックのタイトルの色指定が間違ってました

投稿者: domifara 投稿日時: 2010/8/14 22:11
domifara

右ブロックのタイトルの色指定が間違ってました

    <!-- Right Column Start -->
    <{if $xoops_showrblock == 1}>
    <div id="right-column"> <{foreach item=block from=$xoops_rblocks}>
      <{if $block.title|strstr:"none"}>
      <{elseif $block.title|strstr:"red"}>
      <div class="blocktitle-red"> <{$block.title|replace:"red":""|escape}> </div>
      <{elseif $block.title|strstr:"orange"}>
      <div class="blocktitle-orange"> <{$block.title|replace:"orange":""|escape}> </div>
      <{elseif $block.title|strstr:"yellow"}>
      <div class="blocktitle-yellow"> <{$block.title|replace:"yellow":""|escape}> </div>
      <{elseif $block.title|strstr:"green"}>
      <div class="blocktitle-green"> <{$block.title|replace:"green":""|escape}> </div>
      <{elseif $block.title|strstr:"aqua"}>
      <div class="blocktitle-aqua"> <{$block.title|replace:"aqua":""|escape}> </div>
      <{elseif $block.title|strstr:"blue"}>
      <div class="blocktitle-blue"> <{$block.title|replace:"blue":""|escape}> </div>
      <{elseif $block.title|strstr:"purple"}>
      <div class="blocktitle-purple"> <{$block.title|replace:"purple":""|escape}> </div>
      <{else}>
      <div class="blocktitle"> <{$block.title|escape}> </div>
      <{/if}>
      <div class="blockcontents"> <{$block.content}> </div>
      <{/foreach}> </div>
    <{/if}>
    <!-- Right Column End -->

は、Over the Rainbowのテーマの指定のままでした。
定義、gif等存在しないので
変更例

    <!-- Right Column Start -->
    <{if $xoops_showrblock == 1}>
    <div id="right-column"> <{foreach item=block from=$xoops_rblocks}>
      <div class="right-block">
      <{if $block.title|strstr:"none"}>
      <{elseif $block.title|strstr:"gray"}>
      <div class="blocktitle-black"> <{$block.title|replace:"gray":""|escape}> </div>
      <{elseif $block.title|strstr:"black"}>
      <div class="blocktitle-gray"> <{$block.title|replace:"black":""|escape}> </div>
      <{else}>
      <div class="blocktitle<{cycle values="-gray,-black"}>"> <{$block.title|escape}> </div>
      <{/if}>
      <div class="blockcontents"> <{$block.content}> </div>
      </div>
      <{/foreach}> </div>
    <{/if}>
    <!-- Right Column End -->

3カラムしたくて、横幅960pxに変えてみました

投稿者: domifara 投稿日時: 2010/8/13 5:06
domifara

センター2カラム表示したくて、横幅960pxに変えてみました

変更 domifara--2009/8/12
・stylecss theme.htmlにSJISの日本語フォント名が含まれていたのでUTF-8コードに変更
・横幅サイズを全体960dpiに変えた
・マージンのかわりにliの先頭に・のイメージをつけて少しずらした。
注意
・先頭イメージ画像用に センターセンターブロックのweight== 0 にかぎり、
 通常のセンターセンターブロック weighを0以上にしてください。
 Top Column id css追加、タイトルは画像の上に重ねて表示としたので、
 イメージ画像用は横幅770pxにするとぴったりになるはず。
 サンプルとしてdomimainimg.jpgを画像のところにいれています。
 先頭上に、カスタムブロックで、表示することを前提(説明省略)

・センターブロックをモジュールコンテンツ下に表示することにした
 センターセンターはweight< 100 を右左ブロックの上に
 weight >= 100を下にするようにした。
ほか 
ja_utf8専用
http://xodomifara.lolipop.jp/karidown/total_eclipse960_utf8.zip
まとめてみました。

すっきりとした良い感じでした

投稿者: domifara 投稿日時: 2010/8/11 15:27
domifara

使わせてもらいました。
ありがとうございます。
少しだけ手をいれて、横サイズはもう少し大きくしました。
6件中1〜6件目を表示

新規追加プロジェクト

全て表示

カテゴリー

To Top