トップページ > 記事閲覧
【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/29(Sat) 20:27 |
投稿者 | : peso |
参照先 | : |
お世話になります。
HAIKのマニュアルで、【eyecatch】や【section】について
class=* でクラスを指定します
と書いてありますが、具体的にはどのような機能なのでしょうか?
使い方や、それによって得られる効果などが分かれば教えてください。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/08/03(Thu) 01:21 |
投稿者 | : peso |
参照先 | : |
うみほしさん、補足情報ありがとうございます。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/31(Mon) 16:38 |
投稿者 | : うみほし |
参照先 | : https://umihoshi.com |
sectionも応用できました。
#sectionで囲った部分にclassを付けて,部分的にCSSを付けることができました。
具体的には私のサイトの日食とオーロラのページで,リンクを張った画像だけマウスオンで変形させて,それ以外の画像は変形させないというようにできました。
なるほど便利です。
pesoさん
きっかけをいただきありがとうございました。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/31(Mon) 12:18 |
投稿者 | : うみほし |
参照先 | : https://umihoshi.com |
ミスの訂正ありがとうございます。元コメントも訂正しておきました。
colorも!importantを付けて強制しないと反映されませんでした。fontはこれを付けても効果無しでした。
decoで反映できるものはわざわざCSSを使う必要は無いでしょう。
このclass指定で表現の幅が広がると思います。
他の要素にもこういうオプションは無いのかな?
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/31(Mon) 12:04 |
投稿者 | : peso |
参照先 | : |
詳しく教えていただき、ありがとうございます。
新規ページを作って、貼ってみて動作の内容が理解できました。
#sectionでも試してみましたが、同様の動作をするようです。
その際class名を別に付けることで、cssで個別に装飾ができました。
うみほしさんのサイトは、拝見させていただいております。
URLが間違っていたようでしたので、念のため下に記載させていただきます。
https://umihoshi.com
バックアップの件もお気遣いいただきありがとうございます。
徐々に勉強していこうと思います。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/31(Mon) 10:59 |
投稿者 | : うみほし |
参照先 | : https://umihoshi.com |
私がテストしたのはたとえばこんな記述です。
これをそっくりどこかのページに貼ってみるとどういう表示になるかわります。
#eyecatch(class=usopyon){{
&deco(b,i,,,3em){ウソぴょん};
}}
#beforescript{{
<style type="text/css">
<!--
.usopyon {
background: -moz-linear-gradient(top, #ffff00 0%, #f1da36 100%);
background: -webkit-linear-gradient(top, #ffff00 0%,#f1da36 100%);
background: linear-gradient(to bottom, #ffff00 0%,#f1da36 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#f1da36',GradientType=0 ); background-color: #E8E8E8;
color: blue !important;
font-size: 20px !important;
}
-->
</style>
}}
font-sizeは効果無しで&decoで文字の大きさが変わりました。
一方文字色はcolorで反映されてます。
HAIKでの動作はまだ不明な点が多いです。
なお,sectionはまったく試していませんのでどうなるかはわかりません。多分同じようにで装飾できるのでしょう。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/31(Mon) 10:04 |
投稿者 | : うみほし |
参照先 | : https://umihoshi.com |
pesoさん
CSSの詳しいことを書くと長くなるので,私が使っている参考書を紹介しておきます。
『ああしたい、こう変えたいが手にとるようにわかる CSS基礎』
(エムディエヌコーポレーション ,2015)
HAIKでのCSSの書式はこの掲示板の管理人tomzoさんのサイトにあるTipsを参考にしました。
たとえば,
http://haik.qhmtips.com/index.php?%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E7%B7%A8
を見るといいでしょう。
CSSをテーマseedに適用した例は,私のサイト,
https://umihoshi.com
が参考になるでしょう。
私もここまで1年以上かかっているので,あせらず少しずつ試してみてください。
なおCSSに挑戦するときの注意は,記述をミスると画面が真っ白になって手も足もでなくなることがあることです。私も初期にそういう目に遭いました。この場合はバックアップから書き戻せば良いです。CSSをテストするときは必ずバックアップをきちんととることです。テストで公開を中断できないなら,テスト用のサイトで試してから公開サイトに使う方がいいでしょうね。それは個々の事情にお任せします。オリジナルのHAIKからの改造になりますので,すべて自己責任です。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/31(Mon) 09:43 |
投稿者 | : peso |
参照先 | : |
うみほしさん ありがとうございます。
>classで設定した値をセレクタにし,それに対してプロパティとバリューを記述すると背景色など変更できました。
具体的にはどのような書き方になるのでしょうか?
すみませんがよろしくお願いします。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/30(Sun) 20:16 |
投稿者 | : うみほし |
参照先 | : https://umihoshi.com |
classで名前を決めておくと,それに対してCSSでいろんな表現が可能になるということではないでしょうか?
テストサイトで実験してみたところやはりそうでした。
classで設定した値をセレクタにし,それに対してプロパティとバリューを記述すると背景色など変更できました。
HAIKテーマの設定だけでは使える色に限りがあるので,これはCSSを使うメリットになるでしょう。
CSSでアイキャッチを装飾したいときに使える手段です。
ただしフォント関係のプロパティ(fontで始まるもの)は無効でした。これはHAIKの通常書式でテキスト装飾する方が優先ということなのでしょう。
少し試しただけなので,他にもプロパティによって使える・使えないがあるかもしれませんね。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/30(Sun) 13:19 |
投稿者 | : peso |
参照先 | : |
いしまるさん、早速ありがとうございます。
サンプルページも拝見させていただきました。
なかなか難しそうですが、いろいろな使い方があるのですね。
勉強してみます。
Re: 【質問】『eyecatch』や『section』でのclassの指定について
投稿日 | : 2017/07/30(Sun) 11:24 |
投稿者 | : いしまる◆vOmCuTAP2Tw |
参照先 | : http://haik.oi21.net/ |
単にclass指定をしても何も変化は無いと思います。
HAIKで利用しているBootstrapで定義済みのclassがあるわけですが、
それを利用したり、#htmlプラグインなどと一緒に活用して、
独自のclassスタイルを設定し、そのclassを指定
したり、JavaScriptのライブラリを利用する際にその機能が
有効になるclass指定を行うことで、eyecatchやsectionに
機能やスタイルを追加設定するような感じで使う事に
なると思います。
あまり分かりやくはないですが、以下の様な感じです。
https://haik.oi21.net/index.php?section_test