イカスキン

名称イカスキン
ファイルika.skin.php
バージョン1.01
対象サーバーPukiWiki 1.5.3 / PHP 7.4 / UTF-8
対象ブラウザーFirefox, Chrome, Safari, Edge 各最新版
ライセンスGPLv3

このサイトに使われているPukiWiki 1.5.3以上用の自作スキンです。

デザインはこのサイトをご覧いただいている通りですが、次のような特長があります。

  • シンプル
    伝統的なウィキスタイルを継承しつつ、装飾や色彩を抑えたシンプルなデザイン
  • レスポンシブ
    ウィンドウサイズに適応し、モバイル端末の狭い画面にも対応
  • ダークモード対応
    ライトテーマとダークテーマを備え、OSのカラースキームに合わせて変化させることもできる
  • カスタマイズ可能
    本文領域の幅・文字サイズ・行間隔・禁則有無などを簡単に変更できる

なお、Internet Explorer(IE)およびレガシーブラウザーには対応しておらず、対応予定もありません。非対応ブラウザーでは表示が著しく乱れるため、IEでのアクセスが多く見込まれるサイトにはお使いただけません。

インストール

ika.skin.php
37.8KB | 2020-10-15

ダウンロードしたika.skin.phpファイルをPukiWikiskinディレクトリに配置してください。

次に、PukiWikiルートディレクトリにある設定ファイルdefault.ini.phpを開き、冒頭のSKIN_FILE定義を下記のように書き換えてください。

/////////////////////////////////////////////////
// Skin file

if (defined('TDIARY_THEME')) {
	define('SKIN_FILE', DATA_HOME . SKIN_DIR . 'tdiary.skin.php');
} else {
	// define('SKIN_FILE', DATA_HOME . SKIN_DIR . 'pukiwiki.skin.php'); // 行頭に「//」をつけて標準スキンを無効に
	define('SKIN_FILE', DATA_HOME . SKIN_DIR . 'ika.skin.php'); // 代わりにイカスキンを設定
}

以上で完了です。ブラウザーでPukiWikiの画面を開くと、見た目が当サイトのように変わっているはずです。標準スキンに戻したいときはこの定義を元に戻してください。

カスタマイズ

PukiWikiルートディレクトリにある設定ファイルdefault.ini.phpを開き、末尾に下記のコードを追加(コピー&ペースト)してください。

/////////////////////////////////////////////////
// イカスキン設定
define('IKASKIN_THEME',             0); // カラーテーマ(0:ライト, 1:ダーク, 2:OS設定に自動適応)
define('IKASKIN_LINKCOLOR_LIGHT',  ''); // ライトテーマのリンク色(例:'#0000ff')
define('IKASKIN_LINKCOLOR_DARK',   ''); // ダークテーマのリンク色(例:'#0000ff')
define('IKASKIN_SHOW_LASTMODIFIED', 0); // 最終更新日時を表示(0:No, 1:Yes)
define('IKASKIN_FONT_SIZE',         0); // 文字サイズ(px単位, 0:デフォルト)
define('IKASKIN_LINE_HEIGHT',       0); // 行の高さ(em単位, 0:デフォルト)
define('IKASKIN_MENU_WIDTH',        0); // メニューバーの幅(px単位, 0:デフォルト)
define('IKASKIN_BODY_WIDTH',        0); // ページ本文の幅(px単位, 0:デフォルト)
define('IKASKIN_WORDWRAP',          0); // 改行規則(0:禁則なし, 1:禁則あり)
define('IKASKIN_SIMPLIFY',          0); // シンプル表示(0:No, 1:Yes)
define('IKASKIN_COPYRIGHT',         0); // 管理人名の接頭辞(0:"Site admin", 1:"(C)")
define('IKASKIN_MENU_ORDER',        0); // メニューバーの表示順序(0:MenuBar→本文→RightBar, 1:RightBar→本文→MenuBar)
define('IKASKIN_LOGO',             ''); // サイトロゴ画像パス(例:'image/pukiwiki.png')
define('IKASKIN_FAVICON',          ''); // ファビコン画像パス(例:'favicon.ico')
define('IKASKIN_APPLETOUCHICON',   ''); // 180×180px PNGアイコン画像パス(例:'apple-touch-icon.png')
define('IKASKIN_CSS',              ''); // CSSファイルパス(例:'ika.css')
define('IKASKIN_DISUSE_MAINJS',     0); // main.js不使用(0:No, 1:Yes)
define('IKASKIN_DISUSE_SEARCH2JS',  0); // search2.js不使用(0:No, 1:Yes)

左の「IKASKIN_○○」が設定項目、カンマの後の ’’ や 0 が設定値です。右側には項目の説明があります。

変更したい項目の値を、説明に基づいて書き換えます。ファイル名などの文字列は必ず半角クォーテーション('")で囲んでください。

たとえば、文字の大きさを変更したければ「IKASIKIN_FONT_SIZE」の値を「16」などとします。サイトロゴのファイルを指定したければ「IKASKIN_LOGO」の値を「'pukiwiki.png'」などとします。変更の必要のない項目はそのままで構いません。

設定は即座に反映されます。値を変更してセーブしたら、ブラウザーで PukiWiki の画面をリロードしてください。書き方や内容を誤るとエラーが発生したり、効果が表れなかったりします。一項目ずつ、画面の変化を確かめながら変更するとよいでしょう。

なお、default.ini.phpPukiWiki標準の設定ファイルの一つ(厳密にいえばpukiwiki.ini.phpで指定されている既定プロファイル)で、その他の各種動作も設定することができます。詳しくはファイル内のコメントやPukiWiki公式サイトをご確認ください。デフォルトでは一般に不要と思われる処理や表示が有効になっているため、ご自分のサイトでの必要やお好みに応じて設定し直すことを勧めます。

カスタマイズ例1:読み物中心のレイアウト

ブログ風の読み物中心のサイト向けの設定例です。

/////////////////////////////////////////////////
// イカスキン設定
define('IKASKIN_THEME',             0);   // カラーテーマ(0:ライト, 1:ダーク, 2:OS設定に自動適応)
define('IKASKIN_LINKCOLOR_LIGHT',  '');   // ライトテーマのリンク色(例:'#0000ff')
define('IKASKIN_LINKCOLOR_DARK',   '');   // ダークテーマのリンク色(例:'#0000ff')
define('IKASKIN_SHOW_LASTMODIFIED', 0);   // 最終更新日時を表示(0:No, 1:Yes)
define('IKASKIN_FONT_SIZE',         16);  // 文字サイズ(px単位, 0:デフォルト)
define('IKASKIN_LINE_HEIGHT',       1.8); // 行の高さ(em単位, 0:デフォルト)
define('IKASKIN_MENU_WIDTH',        0);   // メニューバーの幅(px単位, 0:デフォルト)
define('IKASKIN_BODY_WIDTH',        700); // ページ本文の幅(px単位, 0:デフォルト)
define('IKASKIN_WORDWRAP',          1);   // 改行規則(0:禁則なし, 1:禁則あり)
define('IKASKIN_SIMPLIFY',          1);   // シンプル表示(0:No, 1:Yes)
define('IKASKIN_COPYRIGHT',         1);   // 管理人名の接頭辞(0:"Site admin", 1:"(C)")
define('IKASKIN_MENU_ORDER',        0);   // メニューバーの表示順序(0:MenuBar→本文→RightBar, 1:RightBar→本文→MenuBar)
define('IKASKIN_LOGO',             'image/MySiteLogo.png'); // サイトロゴ画像パス(例:'pukiwiki.png')
define('IKASKIN_FAVICON',          'favicon.ico');          // ファビコン画像パス(例:'favicon.ico')
define('IKASKIN_APPLETOUCHICON',   'apple-touch-icon.png'); // 180×180px PNGアイコン画像パス(例:'apple-touch-icon.png')
define('IKASKIN_CSS',              '');   // CSSファイルパス(例:'ika.css')
define('IKASKIN_DISUSE_MAINJS',     0);   // main.js不使用(0:No, 1:Yes)
define('IKASKIN_DISUSE_SEARCH2JS',  0);   // search2.js不使用(0:No, 1:Yes)

文字サイズや行間を大きくし、本文を適当な幅に固定して読みやすくします。禁則はもちろんあり。また、フラットな読み物では見出しの大中小による構造は重要でないため、シンプル表示を指定して見出し罫線を省きます。さらに、コピーライトと各種アイコンを指定して作者のしるしを明確にします。

カスタマイズ例2:スキン&プラグイン一括導入時

こちらのページの一括ダウンロードファイルから、すべてのプラグインを同時にインストールした場合の設定例です。

機能拡張プラグインを活用するよう設定することで、ウィキがより便利になります。

/////////////////////////////////////////////////
// イカスキン設定
define('IKASKIN_THEME',             0); // カラーテーマ(0:ライト, 1:ダーク, 2:OS設定に自動適応)
define('IKASKIN_LINKCOLOR_LIGHT',  ''); // ライトテーマのリンク色(例:'#0000ff')
define('IKASKIN_LINKCOLOR_DARK',   ''); // ダークテーマのリンク色(例:'#0000ff')
define('IKASKIN_SHOW_LASTMODIFIED', 0); // 最終更新日時を表示(0:No, 1:Yes)
define('IKASKIN_FONT_SIZE',         0); // 文字サイズ(px単位, 0:デフォルト)
define('IKASKIN_LINE_HEIGHT',       0); // 行の高さ(em単位, 0:デフォルト)
define('IKASKIN_MENU_WIDTH',        0); // メニューバーの幅(px単位, 0:デフォルト)
define('IKASKIN_BODY_WIDTH',        0); // ページ本文の幅(px単位, 0:デフォルト)
define('IKASKIN_WORDWRAP',          0); // 改行規則(0:禁則なし, 1:禁則あり)
define('IKASKIN_SIMPLIFY',          0); // シンプル表示(0:No, 1:Yes)
define('IKASKIN_COPYRIGHT',         0); // 管理人名の接頭辞(0:"Site admin", 1:"(C)")
define('IKASKIN_MENU_ORDER',        0); // メニューバーの表示順序(0:MenuBar→本文→RightBar, 1:RightBar→本文→MenuBar)
define('IKASKIN_LOGO',             ''); // サイトロゴ画像パス(例:'image/pukiwiki.png')
define('IKASKIN_FAVICON',          ''); // ファビコン画像パス(例:'favicon.ico')
define('IKASKIN_APPLETOUCHICON',   ''); // 180×180px PNGアイコン画像パス(例:'apple-touch-icon.png')
define('IKASKIN_CSS',              ''); // CSSファイルパス(例:'ika.css')
define('IKASKIN_DISUSE_MAINJS',     0); // main.js不使用(0:No, 1:Yes)
define('IKASKIN_DISUSE_SEARCH2JS',  0); // search2.js不使用(0:No, 1:Yes)

/////////////////////////////////////////////////
// IEブロックプラグイン設定
define('PLUGIN_IEBLOCK_ALLOW_VERSION', 2); // 0:IE10以下も許可(何もしない), 1:IE11以上のみ許可, 2:Edge以上のみ許可, 3:Edge Chromium版以上のみ許可, 4:Edge Chromium版以下すべて遮断
define('PLUGIN_IEBLOCK_ERRORPAGE',    ':BrowserNotSupported'); // IEを遮断した際に表示するページ名

/////////////////////////////////////////////////
// ページ情報プラグイン設定
define('PLUGIN_PAGEINFO_SHOW_PAGE_FUNCTIONS',    1); // ページ操作ツールを表示
define('PLUGIN_PAGEINFO_SHOW_GENERAL_FUNCTIONS', 1); // 一般ツールを表示
define('PLUGIN_PAGEINFO_SHOW_ATTACHEDFILES',     1); // 添付ファイルリストを表示
define('PLUGIN_PAGEINFO_SHOW_RELATEDPAGES',      1); // 関連ページリストを表示
define('PLUGIN_PAGEINFO_SHOW_BASICINFO',         1); // ページ基本情報を表示
define('PLUGIN_PAGEINFO_SHOW_VIEWS',             0); // ページ閲覧回数を表示(counter標準プラグインが設置されていなければ無意味)
define('PLUGIN_PAGEINFO_SHOW_PROTECTION',        1); // ページ保護情報を表示
define('PLUGIN_PAGEINFO_SHOW_CMSINFO',           0); // CMS(PukiWiki)情報を表示
define('PLUGIN_PAGEINFO_SHOW_SERVERINFO',        0); // サーバー情報を表示

/////////////////////////////////////////////////
// PWAプラグイン設定
define('PLUGIN_PWA_MANIFEST',       ''); // ウェブアプリマニフェストファイルのURL。空なら内蔵マニフェストを使用
define('PLUGIN_PWA_SERVICEWORKER',  ''); // サービスワーカーファイルのURL。空なら内蔵サービスワーカーを使用
define('PLUGIN_PWA_APPLETOUCHICON', ''); // 180×180pxアプリアイコンPNG画像のURL。空なら内蔵画像を使用
define('PLUGIN_PWA_ICON192',        ''); // 192×192pxアプリアイコンPNG画像のURL。空なら内蔵画像を使用
define('PLUGIN_PWA_ICON512',        ''); // 512×512pxアプリアイコンPNG画像のURL。空なら内蔵画像を使用
define('PLUGIN_PWA_DISABLED',        1); // 1なら本プラグインを無効化

/////////////////////////////////////////////////
// OGP出力プラグイン(ogp.inc.php)
define('PLUGIN_OGP_NS_PREFIX',        ''); // OGP名前空間のプリフィクス(og以外の場合に指定)
define('PLUGIN_OGP_WITH_DESC',         1); // 1:<meta name="description">タグを同時に出力, 0:出力しない
define('PLUGIN_OGP_DEFAULT_IMAGE',    ''); // 既定のOGP画像の絶対URL(空なら既定画像なし)
define('PLUGIN_OGP_TWITTER_SITE',     ''); // Twitterカード用:ウェブサイトの@ユーザー名
define('PLUGIN_OGP_TWITTER_CREATEOR', ''); // Twitterカード用:コンテンツ作成者の@ユーザー名
define('PLUGIN_OGP_FACEBOOK_APPID',   ''); // Facebook用:App-ID

/////////////////////////////////////////////////
// JSON-LDプラグイン設定
define('PLUGIN_JSONLD_ARTICLE',        1); // 1:Article (記事情報)を出力, 0:無効
define('PLUGIN_JSONLD_BREADCRUMBLIST', 1); // 1:BreadcrumbList (パンくずリスト情報)を出力, 0:無効

/////////////////////////////////////////////////
// reCAPTCHA v3 プラグイン設定
define('PLUGIN_RECAPTCHA3_SITE_KEY',       '');   // Google reCAPTCHA v3 サイトキー。空の場合、reCAPTCHA判定は実施されない
define('PLUGIN_RECAPTCHA3_SECRET_KEY',     '');   // Google reCAPTCHA v3 シークレットキー。空の場合、reCAPTCHA判定は実施されない
define('PLUGIN_RECAPTCHA3_SCORE_THRESHOLD', 0.5); // スパマー判定スコア閾値(0.0~1.0)
define('PLUGIN_RECAPTCHA3_HIDE_BADGE',      1);   // 0:reCAPTCHAバッジ表示, 1:代替文言表示
define('PLUGIN_RECAPTCHA3_API_TIMEOUT',     0);   // reCAPTCHA APIタイムアウト時間(秒)。0なら無指定
define('PLUGIN_RECAPTCHA3_CENSORSHIP',     '');   // 投稿禁止語句を表す正規表現(例:'/((https?|ftp)\:\/\/[\w!?\/\+\-_~=;\.,*&@#$%\(\)\'\[\]]+|宣伝文句)/ui')
define('PLUGIN_RECAPTCHA3_CHECK_REFERER',   0);   // 1ならリファラーを参照し自サイト以外からの要求を拒否(非推奨)
define('PLUGIN_RECAPTCHA3_ERR_STATUS',      403); // 拒否時に返すHTTPステータスコード
define('PLUGIN_RECAPTCHA3_DISABLED',        0);   // 1なら本プラグインを無効化

/////////////////////////////////////////////////
// ブログカードプラグイン設定
define('PLUGIN_BLOGCARD_THEME',     0);      // カラーテーマ(0:ライト, 1:ダーク, 2:OS設定に自動適応)
define('PLUGIN_BLOGCARD_WIDTH',     800);    // 最大表示幅(px)
define('PLUGIN_BLOGCARD_CACHE_AGE', 604800); // 情報キャッシュの有効期限(秒)

/////////////////////////////////////////////////
// タブ表示プラグイン設定(tab.inc.php)
define('PLUGIN_TAB_RESTRICT',           0);     // 本プラグインの実行を凍結/編集制限ページ内またはPKWK_READONLY下に制限する
define('PLUGIN_TAB_ALLOW_DOUBLECLICK',  1);     // 該当ページのURLに遷移するタブダブルクリック機能を許可
define('PLUGIN_TAB_TIMEOUT',            10000); // ページをロードする際のタイムアウト時間(ミリ秒)。0なら設定せず
define('PLUGIN_TAB_ALLOW_DEFAULTSTYLE', 0);     // タブに既定のスタイルを適用
define('PLUGIN_TAB_NOTEID',            'note'); // 注釈表示ブロック要素のID
define('PLUGIN_TAB_NOCACHE',            1);     // ロードするページ情報のブラウザーキャッシュを明示的にオフ

/////////////////////////////////////////////////
// アイコン表示プラグイン設定(fa.inc.php)
define('PLUGIN_FA_KITCODE', ''); // Font Awesomeをロードするための Kit Code
define('PLUGIN_FA_STYLE',   ''); // アイコンに共通して適用するスタイル
  • スキン
    お好みで設定してください。
  • IEブロックプラグイン
    スキンが対応していないInternet Explorerからのアクセスを遮断するよう設定します(デフォルト)。
  • ページ情報プラグイン
    添付ファイル・関連ページ・ツール他を表示するよう設定します。
  • PWAプラグイン
    アイコン画像があれば設定します。
  • OGPプラグイン
    共通のOGP用画像やTwitterユーザー名、FacebookアプリIDなどがあれば設定します。
  • JSON-LDプラグイン
    有効にして検索エンジンに最適化します(デフォルト)。ウィキをインターネットに公開しない場合は無効にしてください。
  • スパム対策プラグイン
    reCAPTCHAを使用する場合はGoogle reCAPTCHAサイトで取得したv3用キーを設定して機能を有効にしてください。reCAPTCHAを使わず、投稿禁止語句のみを設定することもできます。
  • ブログカードプラグイン
    見やすくなるよう、カラーテーマをスキンのテーマと一致させます。
  • タブ表示プラグイン
    スキンでスタイル設定済みのため、プラグインのデフォルトスタイルを無効にします。
  • アイコン表示プラグイン
    Font AwesomeKit Codeを取得したら設定します。

さらに、下記の標準設定項目を探してそれぞれ0に変更します。これらの表示はページ情報プラグインで代用できるため、無効にして負荷を減らし表示をすっきりさせます。

/////////////////////////////////////////////////
// 添付ファイルの一覧を常に表示する (負担がかかります)
$attach_link = 0;

/////////////////////////////////////////////////
// 関連するページのリンク一覧を常に表示する(負担がかかります)
$related_link = 0;

CSS

IKASKIN_CSS項目でskinディレクトリ内の任意のCSSファイルを適用するよう設定できます。

ika.css
25.0KB | 2020-10-15

ika.cssはイカスキン内蔵のデフォルトスタイルをCSSファイル化したものです。スタイルを変更したいかたはこのファイルを編集してskinディレクトリに配置し、IKASKIN_CSSにファイル名を設定してください。