サイトイメージ

スキンを変更する

新しいスキンを作成する

myEditor にデフォルトで用意されているスキンの構造を応用して新しいスキンを作成することができます。２種類のスキン（css01 と  css02）が用意されていますが、css01 を例にとって説明します。

サイトトップに themes というフォールダがあり、その下の css01 フォールダの下に html.inc というファイルがあり、これがテンプレートのような役割をしています。html.inc をこのページの最後に引用しておきますが、次のような構造になっています。

  • このファイルは $string という変数を定義する php テキストで、変数に代入されているのは、ウェブページの html ソースであることがわかります。引用例では青色で示しています。
  • ただし、ダブルコーテーションをバックラッシュ（\）でエスケープしています。
  • また、コンテンツの部分やナビゲーションの部分、その他４箇所が変数で置き換えられています。$meta には検索ロボットを指令するメタ定義が入ります（公開非公開の使い分け）。引用例では朱記部分です。
  • スタイルシート、画像、Java Script 等の構成要素は css01 フォールダの中に用意されています。この他スタイルシートがコールする background-image ファイルも同フォールダに用意されています。引用例では紫色で示しています。パスの指定はサイトトップからになります。

以上のように、既存のウェブページの html ソースを基にテンプレート（html.inc）を作成し、スタイルシート、画像、Java Script 等の構成要素と一緒に新しいフォールダに収納し themes の直下に配置することで新しいスキンが出来上がります。新しいフォールダの名称がスキン名となり、「ページとカテゴリーの管理」のスキン選択肢に自動的に追加されます。

画像を取込む際の幅指定との関係

「画像取込み」画面に幅指定の選択肢ありますが、これはスキンと関係します。デフォルトのスキン２種類のどちらもコンテンツ領域の幅 600px 左右余白 40px をとっています。最大幅を 550px にしているのはそのためです。これらを変更したい場合は次のように行います。

  • editors ⇒ library ⇒ selectArray.inc を開き、配列変数 $width を編集する
  • admin ⇒ upload_check.php 103行～105行　数値 550 を変える（3箇所）

ファイル引用（html.inc）

一部省略しています（・・・・・・・の箇所）。 

<?php
mb_internal_encoding("utf-8");
$string=("<!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
<meta name=\"description\" content=\"$description\" />
<meta name=\"keywords\" content=\"$keyword\" />
<meta http-equiv=\"Content-Script-Type\" content=\"text/javascript\" />
<meta http-equiv=\"Content-Style-Type\"  content=\"text/css\" />
<title>$title</title>
<link href=\"themes/css01/style_screen.css\" ・・・・・・・ media=\"all\" />
<link href=\"themes/css01/font_family.css\" ・・・・・・・ media=\"all\" />
<link href=\"themes/css01/style_print.css\" ・・・・・・・ media=\"print\" />
<script type=\"text/javascript\" src=\"themes/css01/font_resize.js\"></script>
</head>
<body class=\"main\" onload=\"fscRef()\">
<div class=\"top\">
<img src=\"themes/css01/top.png\" alt=\"サイトイメージ\" width=\"800\" height=\"150\" />
</div>
<table class=\"body\">
<tr>
<td colspan=\"3\" class=\"bottomline\">
<span class=\"dummy\"><script type=\"text/javascript\"><!--
　　　・・・・・・・
// --></script></span></td>       
</tr><tr>
<td class=\"dummy onepxheight\"></td>
<td rowspan=\"2\" class=\"toji\"></td>
<td rowspan=\"2\" class=\"main\">
$contts
</td>
</tr><tr>
<td class=\"dummy navi\">
$navigation
</td>
</tr><tr>
<td class=\"dummy topline\" colspan=\"3\">contact:admin@riok.net</td>
</tr><tr>
<td class=\"dummy\" style=\"width:172px; height:1px; \">
<img src=\"themes/css01/dummy.gif\" width=\"172\" height=\"1\" /></td>
<td class=\"dummy\" style=\"width:28px;\">
<img src=\"themes/css01/dummy.gif\" width=\"28\" height=\"1\" /></td>
<td style=\"width:600px;\">
<img src=\"themes/css01/dummy.gif\" width=\"600\" height=\"1\" /></td>
</tr>
</table>
<div class=\"bottom\">
<p class=\"footer\">Copyright (C) hpEditor, All Rights Reserved</p>
</div>
</body>
</html>
");
?>
contact:admin@riok.net

Copyright (C) myEditor, All Rights Reserved