Tag: haik

haik_seed

haik_seedデザインテンプレート（テーマ）は、オープンソース版haikを新規インストールした時に利用できるテーマです。

haik_seedではbootstrapを利用したレスポンシブデザインが利用できますが、大きな変更があり、従来のQHMのデザインの変更画面で反映しないものが多々あります。例えば、タイトル画像を従来のQHMの管理者ログイン状態から、QHMトップ > 設定一覧 > デザインの変更 と選択した画面でアップロードしても有効になりません。

制限等

アイキャッチ(#eyecatch)の指定はページに1回だけ有効です。2回指定した場合は、後に指定したものが有効になります。
また、#eyecatchは記述する位置に関係なく、ページの頭に表示されます。

「====」を段の区切りにするようなもの、 #bs_tabs と #colsを組み合わせて使うことは出来ません。「====」が外側のブロックの機能の区切りとして最初に反応します。

ちょっと配色を調整

ナビ編集でCSSを記述を行うことで、標準の設定に上書きするような感じで配色等を調整することが出来ます。

メニューの見出し背景をつける

　アスタリスク「*」に薄い色を付ける設定です。ブラウザのF12キーで開発ツールなどを表示してCSSの構造を調べて、ナビに次のような記述を追加します。#htmlプラグインを使っていますが、#beforescriptで記述したほうが良いのかもしれません。

#html{{
<style>
.haik-palette-brown .haik-article-menu h2 {
    background-color: #eed;
}
 
.haik-palette-brown .haik-menu h2, .haik-palette-brown .haik-article-menu h2 {
    background-color: #eed;
}
 
.haik-palette-brown .haik-menu .qhm-plugin-recent h5, .haik-palette-brown .haik-article-menu .qhm-plugin-recent h5, .haik-palette-brown .haik-menu .qhm-plugin-popular h5, .haik-palette-brown .haik-article-menu .qhm-plugin-popular h5 {
    background-color: #ddd;
}
</style>
}}

CSSの改造については、以下のWEBページが参考になります。

CSSの改造 - 一歩先を行く　QHMユーザのためのＴｉｐｓ
http://qhmtips.com/index.php?CSS%E3%81%AE%E6%94%B9%E9%80%A0