mojoPortal で、画面のカラーやフォントの種類やサイズを変更したいと思ったことはありませんか？ mojoPortal は、スキンを修正することで、結構簡単に画面周りを変更することができます。

１．スキンフォルダー

スキンに関するファイルは、次の箇所にあります。

(1) /Data/sites/(SiteID)/skins フォルダー（サイト毎）
(SiteID) はサイト番号です。シングルサイトの場合は、/Data/sites/1/skins になります。このフォルダーには、andreasviklund-02 から始まって30を超えるスキンフォルダーがあります。スキンを修正したい場合は、選択したスキンフォルダー内の該当のファイルを修正します。

(2) /Data/skins フォルダー
リリースファイルでは、この フォルダーにスキンファイルが置かれています。サイトがを作成されたとき、このフォルダーから/Data/sites/(SiteID)/skinsにスキンファイルがコピーされます。

２．スキンフォルダー内のスキンファイルの概要

ver 2.3.1.7 以降の構成（2009/9/14　一部修正）

  • layout.Master（ASP.NET マスターページ）
  • theme.skin （スキンファイル。利用はできるがスタイルの設定のためには使用しない方がよい）
  • style.config （css ファイルの一覧を含む設定ファイル）
  • style.css
  • stylemenu.css
  • styletreeview.css
  • styleblog.css
  • styleforum.css
  • stylefeedmanager.css
  • styleformwizard.css
  • stylewebstore.css
  • styleaspcalendar.css
  • styledatacalendar.css
  • IESpecific.css （Internet Explorer 6 以下専用ののスタイルの指定）
  • IE7Specific.css （Internet Explorer 7 専用のスタイルの指定）

ver 2.3.1.6 以前の構成

  • layout.Master（ASP.NET マスターページ）
  • theme.skin （スキンファイル。利用はできるがスタイルの設定のためには使用しない方がよい）
  • style.config （css ファイルの一覧を含む設定ファイル）
  • stylelayout.css（位置指定、マージン、パディング等の設定）
  • stylecolors.css（色の指定）
  • styleborders.css（枠線の指定）
  • styleimages.css（画像及び背景画像の指定）
  • styletext.css（テキストの指定）
  • IESpecific.css （Internet Explorer 6 以下専用ののスタイルの指定）
  • IE7Specific.css （Internet Explorer 7 専用のスタイルの指定）

３　フォントやフォントのサイズの変更

フォントやフォントのサイズを変更したい場合は、ver 2.3.1.6 以前はstyletext.css を、ver 2.3.1.7 以降は style.css を編集します。ver 2.3.3.2 以降 style.css が整理されて、以下のようになっています。（2009/12/26　一部修正）

body { font-family:tahoma, verdana, sans-serif; font-size:13px; margin:0; padding:0; }　本文のフォント、サイズの指定
.pagebody, .topnav { background:#e0e0e0; color:#303030; }
html { height:100%; }
中略
/* Headings */
h1 { font-family:arial, sans-serif; font-size:108%; }　h1 のフォント、サイズ等の指定
h2 { color:#505050; font-size:100%; margin:0;}  h2 のフォント、サイズ等の指定
h3 { font-size:16px; color:#656C4A; }  h3 のフォント、サイズ等の指定
h1.siteheading { font-size:2.2em; font-weight:400; margin:0; padding:10px 0 0 19px; }
.siteheading { font-size:130%; text-decoration:none; }  サイトヘッダーのフォントのサイズ等の指定
h2.moduletitle { clear:both; color:#505050; margin:0; padding:0 0 0 7px; font-size:1.8em; font-weight:400; }
以下略