1. ホーム /
  2. コネタ /
  3. WEB制作

WEB制作

WEB制作

CSSの強制継承「inherit」は他人が作ったグダグダなCSSをリセットしたい時に有効

cssの基本として親要素のプロパティ（色とか）を子要素が引き継ぐというものがある。

自分が書いたcssならまだしも、前任者から引き継いだcssをいじるとなると、その人の手癖や自分よりレベルの高い書き方(笑)などの要因によって、修正したり書き換えるのが困難な場合がある。

これはCSSに限らず、プログラミング言語などでも他人が書いたコードをいじるというのは難しいのだ。

ひたすらデベロッパーツールをいじくりまわしても、何がどうなっているか簡単に見つけ出すことができない。

やっと目的のクラスやプロパティらしきものを発見しても、複数のcssによってプロパティが上書き、上書きとグダグダになっている場合、簡単に修正できない場合がある。

むしろ初期状態に戻すのがinherit

そういうグダグダな作りのcssの場合、往々にしてあなたが想定している継承が無効化されていることがある。CMSで動的に強い力でcssが割り当てられているようなケースだ。

そんな時には強制的に継承させるプロパティ「inherit」が役に立つ。どちらかというと初期状態に戻す処理になる。

もしかしたら、人によってはあまり使ったことがないかもしれないが「inherit」は色やフォントなども含め、全てのプロパティに適用させることができる。

使い方の例
#sidebar h2 { color: inherit; }

詳しい使い方を知りたい場合はこちらのページが役に立つ。
https://developer.mozilla.org/ja/docs/Web/CSS/inherit

WEB制作

画像リンクのマウスオーバーの下線を消す、但し、文字は下線を出すCSS

サイトの中でマウスオーバーの時に「格好悪いので画像リンクの下線を消したい」が「テキストリンクは下線は出したい」というケースがあると思う。

画像に下線が出ると格好悪いが、テキストだと下線が出ないとリンクだと一般的にわかりにくい。

全部のリンクのマウスオーバー時の下線を消す

a:hover {
text-decoration: none;
}

疑似クラス（:hover）をリンクであるa要素すべてにかける方法。しかしこれだと、テキストの下線も巻き添えをくらって出て来なくなる。

手っ取り早く、確実に画像にだけ適用する方法

HTMLやCSSというのは、何かを表現するのに、良くも悪くも何通りもの方法があるのは大前提。

自分一人で白紙の状態から作ったサイトならともかく、CMSだったり、人が作ったサイトを編集したり、あるいは自分が作ったけど昔過ぎて忘れてしまったような場合もあるだろう。

てっとり早く画像の下線だけ消したい場合は、
HTML側で
div class=”sen_denai”
などと新しいクラスで画像を囲む。

そして、cssで
.sen_denai a:hover{
text-decoration: none !important;
border: none !important;
}

と書く。色々な記述を書かないとならないのは、他の部分などの設計によってケースバスケースで、効いたり効かなかったりするから。

なぜかマウスオーバーすると画像がずれてしまう場合は、
vertical-align:top;
などを記述すると良い場合がある。

「画像リンクのマウスオーバーの下線を消す、但し、文字は下線を出す」

日本語だとこれだけなのに、場合によってはかなりの時間を試行錯誤しないとならない場合もあるだろう。検討を祈る。

WEB制作

【メモ】LION MEDIAのページネーションをカスタマイズする方法

WordPressのテーマ、LION MEDIAは優れたテーマであるが、ページネーション(ページャー、ページ送り)の部分がデフォルトでは省略された表記になってしまう。



ページ送りの機能はWordpressにデフォルトで備わっているもので、LION MEDIAにおいてもその部分の記述をいじることでカスタマイズできる。Wordpressのプログラミング的な部分がわかっていれば簡単に調整できるが、わからないと逆に難儀するので、以下、備忘録的にメモ。

(注意、真似する場合は完全自己責任でお願いします。バージョン、環境違い等で同じにならないケースは多々あります)

functions.phpの「fit_posts_pagination」を検索し、ページ番号の省略させ具合を制御する「mid_size」の値を変える。LION Mediaではデフォルトだと0になっているが、2や3くらいにすると以下のようになる。