トップページ > 記事閲覧
【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/01(Mon) 14:15
投稿者 tomzo
参照先
よしたんさん

この方法は、HAIKのCSSファイルは一切触らないで#beforescript
プラグインを使用してその中にCSSの定義を行っています。

以下のサイトに詳しく書いています。
これは私が管理しているサイトです。

一歩先を行く haikユーザのためのTips

CSSの改造方法
https://haik.qhmtips.com/index.php?CSS%E3%81%AE%E6%94%B9%E9%80%A0%E6%96%B9%E6%B3%95

haik_seed作成例
https://haik.qhmtips.com/index.php?haik_seed%E4%BD%9C%E6%88%90%E4%BE%8B


具体的にどのようにCSSを書いているかは、そのサイトのソースを見れば分かります。
マジシャン はやぶさの場合
https://hayabusa-magic.com/

142行目がそのCSS部分です。これだけです。
<style type="text/css">
<!--
/* 背景色と文字色を設定する/* 背景色と文字色を設定する */



CSSはブラウザのデバッガーで調べています。
デバッガー上のCSSの値を変更してうまくいけば、そのCSSをコピーしています。
Re: 【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/10(Wed) 20:51
投稿者 よしたん
参照先
tomzoさん、アドバイスいただきありがとうございます。

私がいつも使っているブラウザはFirefoxなのですが
一番最初にtomzoさんに教えていただいた
「CSSはブラウザのデバッガーで調べています。
デバッガー上のCSSの値を変更してうまくいけば、そのCSSをコピーしています。」についてを、ネットで調べてみたのですが、なかなか答えを導き出せずにいました。

そこへpesoさんのアドバイスで
一応、当初の目的(疑問)であった全てのページの【見出し3】を【赤文字+太字】に一括変更することは無事に果たすことが出来ました。

時間を見つけて、ChromeでデベロッパーツールによるCSSを見つける方法を勉強してみたいと思います。

分からなかったら、新しくスレッドを立ててお尋ねしますので、その時は宜敷くおねがいします。
Re: 【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/10(Wed) 11:22
投稿者 tomzo
参照先
pesoさん

ナイス フォローです。
感謝


よしたんさん
ブラウザの開発ツール(Chromeの場合はデベロッパーツール)で
CSSを見つける方法は分かりますか?

Googleで
「Chrome デベロッパーツール 使い方」
を検索してみてください。
いろいろと詳しく説明してあるサイトがあります。

もしわからなければ、当フォーラムに質問してください。
Re: 【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/08(Mon) 20:02
投稿者 よしたん
参照先
実は、やり方が分からずに独学で研究していたところに
pesoさんのアドバイスがあり、
さっそく、先程、やってみました。

すると、うまく全ページに反映されているではありませんか。

pesoさん、ありがとうございました。
感謝申し上げます。
Re: 【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/08(Mon) 02:45
投稿者 peso
参照先
フッターに下記のように書き込むと、全ての【見出し3】が、【赤文字+太字】に変更可能かと思います。



#beforescript{{
<style type="text/css">
<!--
.haik-palette-blue .haik-container h4 {
color: red;
font-weight: 700;
}
-->
</style>
}}



【red】の部分はカラーコード、例えばピンク色【#ff3981】などに置き換えても良いです。


#beforescript{{
<style type="text/css">
<!--
.haik-palette-blue .haik-container h4 {
color: #ff3981;
font-weight: 700;
}
-->
</style>
}}
Re: 【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/01(Mon) 19:29
投稿者 よしたん
参照先
tomzoさん、新しいスレッドを立てていただき、
そしてアドバイスいただき、ありがとうございます!

ひとつひとつ、文字の色だったり大きさだったりを確認しながら変更していかないといけませんね。
根気がいる作業ですが、自分の希望通りにはなりそうな気がします。


私がやっているサイトはこちらです。
地域ホームページ備中町西山
http://nishiyama-community.com/

変更したいのは
小タイトル文字の変更です。(太文字、赤文字に変更したい)

トップページは既に小タイトルをひとつひとつ変更したものです。

具体的な記述は・・・
***&deco(red){''西山に新規就農者が移住されています''};

ただし、この作業をしたのは「トップページ」と
もうひとつ、「西山の歴史探訪のアーカイブ」です。
http://nishiyama-community.com/index.php?%E8%A5%BF%E5%B1%B1%E3%81%AE%E6%AD%B4%E5%8F%B2%E6%8E%A2%E8%A8%AA%E2%99%AC%E3%81%AE%E3%82%A2%E3%83%BC%E3%82%AB%E3%82%A4%E3%83%96



この記述にしていないページを見ると
小タイトルと本分とが同じ色と同じ文字なので
小タイトルが目立っていません。
やや文字の大きさが大きいかなあという感じです。

例えばこちらのページ・・・
「これまでの投稿記事 令和元年度」
http://nishiyama-community.com/index.php?%E6%8A%95%E7%A8%BF%E8%A8%98%E4%BA%8B%20%E4%BB%A4%E5%92%8C%E5%85%83%E5%B9%B4%E5%BA%A6
・・・そのほかのページも同様です。



申し遅れましたが haik_popを使用していて
haik_popの特徴(欠点)のようです。

この欠点をひとつひとつ修正するのは困難なので
一括して文字変更をしたかったのです。

いしまるさんご教示のページも参考にしたいと思います。
(参考に出来るかな!?難しそう!...苦笑)
Re: 【技術情報】HAIKのCSSを改造する方法
投稿日 : 2021/03/01(Mon) 15:19
投稿者 いしまる◆vOmCuTAP2Tw
参照先
不要かもしれませんが、
CSSの一般的な基礎知識について以下などが参考になると思います。
ちょっと空いた時間に繰り返して閲覧すると良いですよ。

『はじめてのCSS』 - ドットインストール
https://dotinstall.com/lessons/basic_css_v5

- WEB PATIO -