haikの構造

haikのスタイル構成

以下はインストール直後のhaikのスタイル構成を簡略化して書いたものです。全てを記述している訳ではありません。

<body .haik-palette-orange>
  .haik-headcopy
    .container
      #headcopy
         ここにh1が入る
      <
    <
  <
-------------------------------
  <navi #navigator>
    .container
      .navibar-header
        .navibar-brand
        <
      <
    <
  </navi>
  .navbar-collapse
  <
-------------------------------
  <header .haik-eyecatch-top>
    .qhm_eyecatch
      <section #qhm_section_1>
        .qhm-section-content
             ここにh1が入る
        <
      <
    <
  </header>
-------------------------------
  .container
    .row
      .col-sm-9　　　（段組　9col)
        <main .haik-content>

          ここにコンテンツが入る

        </main>
      <
      .col-sm-3　　　（段組　3col)
        <aside .haik-menu>
          #menubar

            ここにメニューが入る (h2, h3...)

          <
        </aside>
      <
    <
  <
-------------------------------
  <footer .haik-footer>
    .haik-footer-border

      ここにフッターが入る

    <
  </footer>
-------------------------------
  .haik-license
    .container
      .haik-copyright
      <
    <
  <
</body>

フォルダ構成とファイル

haikのフォルダを直接覗くことはあまりないと思いますが、何かトラブルが起きたときフォルダ構成を知っておくことは大切です。
スタイルシートやプラグインの改造、またはファイルのバックアップ時にはフォルダ構成を知らないと重大なミスを犯しかねません。

以下は　haik 6.0.3 のフォルダ構成　(rootはhaikをインストールしたフォルダを意味しています。実際にrootフォルダがあるわけではありません。)
このroot配下に自分でフォルダを作成して、動画や写真、その他イメージデータなど何でも置くことができます。通常は、SWFUを使用してアップロードするため、フォルダを作成する必要はないと思われますが、大量のデータをFTPで自分で作成したフォルダへアップロードすることももちろん可能です。

root
├─attach　　（画像など添付したファイルが入る）
├─backup　　（バックアップデータ　gz形式）
├─cache　　 （キャシュデータが入る）
├─cacheqblog（qblogのキャシュデータが入る）
├─cacheqhm　（QHMのキャシュデータが入る）
├─counter 　（アクセスカウンタ）
├─diff　　　（更新情報のデータ）
├─image 　　（画像データ）
│　├─face　　（顔マークの画像）
│　├─gmap　　（GoogleMapの画像）
│　├─hokuken （北研の画像データ）
│　├─hr　　　（水平線の画像データ）
│　└─slides　（スライドショー用の枠画像など）
├─js　　（Javscript jQueryも入っている）
│　├─datepicker 
│　│　├─css    
│　│　└─js     
│　├─mediaelementplayer 
│　└─qhm  
├─lib　　（PHPのライブラリ）
├─plugin　　（プラグイン　ここに新規にプラグインを追加できる）
│　├─audio　　　　　　
│　├─colorbox 　　　　
│　├─gmap 　　　　　　
│　├─greybox
│　├─jplayer　　　　　
│　├─lightbox2
│　├─playlist
│　├─playvideo　　　　
│　├─qblog　　　　　　
│　├─qform　　　　    
│　├─section  　　　　
│　├─skin_customizer  
│　├─sysstem_updater  
│　├─theme_updater    
│　└─video  　　　　　
├─skin　　（スキンファイル）
│　├─bootstrap 　　 （レスポンシブデザイン用CSS）
│　├─hokukensmart
│　├─hokukenstyle 　（北研のデザインテンプレート）
│　│　└─haik_seed　（★無料のテーマ）
│　├─killerpage　　 （キラーページ用テンプレート）
│　├─killerpage2　　（キラーページ2用テンプレート）
│　└─wordpress　　　（WordPress用のテーマ）
├─swfu　　（画像アップロード用ツール）
│　├─cheetan
│　│　└─db
│　├─css
│　├─ctp
│　├─d　　 （SWFUでアップした画像などはここに入る）
│　├─data　（SWFUでアップした画像などの管理情報）
│　├─images
│　├─js
│　├─models
│　└─swfupload
├─trackback　　（トラックバック）
└─wiki　　（本文などの全データが入る）★重要

ご意見箱

皆様のご意見をお待ちします。


当ページは役に立ちましたか？

選択肢 投票
とても役に立った 10  
少しだけ 0  
あんまり 0