CSSカスタマイズ機能 つかってみた
Ameba Ownd の CSSをカスタマイズしてみました。
今日は少しだけ技術的な内容になります。
CSS? DOM?とよくわからない横文字が並びますが
最後まで読めば、何かが少しだけ
わかった気分を味わえるかもしれません。
また、この記事の内容を元にCSSを変更していただいて
デザインが崩れてしまっても責任は取れません。
実際にカスタマイズされる場合は自己責任でお願いいたします。
さてさて
今回、カスタマイズしてみたのは
「ブログ記事の一覧から日付表示を消す」というデザインの変更です。
実は、似たようなカスタマイズ方法がAmeba Ownd 公式のブログにあります。
なので、今回はそこに一手間加えて
「とあるページのブログ記事の一覧だけ、日付表示を消す」
に挑戦しました。
「とあるページ」を CSSで指定するところがミソです☆
ではまずは、どうやったらいいか調べるところから語らせていただきます。
結果だけ知りたい方は、すっとばしていただいても問題ありません！！
そして、そこから閃いた方法は・・・
非表示のやり方をCSSで書くと↓↓↓
非表示にしたい項目{
display:none;
}
display:none; を、日本語でいうなら
表示:無し;
とてもシンプルでわかりやすいCSSです。
特に難しいことはありません。
「とあるページ」だけ非表示、のような条件をCSSで書くと↓↓↓
非表示にしたい項目[項目="とあるページのとき"] {
display:none;
}
「とあるページ」ってなんなの？
どうすればその指定ができるの？
と、ここからはちょこっと難易度がUPします！！
具体的な例とともにご説明します。
たとえば、Elecのサービス案内ページ。
左上にブログ記事投稿日が出ています。
不要です。
HTMLソースをみてみると
この日付部分のHTMLは、<time 〜略〜> というタグになっていました。
ということで
time {
display: none;
}
と、ためしに書いてみる！！
日付消えました！！
しかし、消えてほしくなかった、このITブログの一覧からも日付が消えてしまいました。
サービス案内の一覧だけ日付を消すには・・・
ここからが本題です！！
さて、Ameba Owndユーザー様はすでにご存知かと思いますが
Ameba Owndのブログは１つしかありません。
ITブログもサービス案内もリンク集も各メンバープロフィールも
実は、全部１つのブログの中に記事を書いています。
ITブログなのか？サービス案内なのか？は
ブログの「カテゴリ」で分けているだけです。
つまりつまり
ITブログの一覧は、カテゴリ＝ITブログ の記事だけの一覧。
サービス案内の一覧は、カテゴリ=サービス案内の記事だけの一覧。
ということは↓↓↓
非表示にしたい項目[カテゴリが="サービス案内の記事"] {
display:none;
}
しかし、ここで問題が発生します。
サービス案内の記事ってどうやったら設定できるの？
そんなことどこにも書いてない。
いえ、そんなことはありません。
WEBシステムエンジニアの職業病。
「ネットサーフィン中にURLが気になって仕方がない」症候群が発病していた
Elecエンジニアは、Ameba Owndを始めた頃から気付いていました。
http://www.elec.shizuoka.jp/posts/292239?categoryIds=35653
↑↑↑サービス案内の「ご家庭様向けサービスのご案内」のURLです↑↑↑
categoryIds（カテゴリーキーワード）=35653
という謎の末尾。
これがまさに、我々が探していた、サービス案内の記事だけに設定される
魔法の呪文です。
ちなみに、ITブログの記事のURLにはすべて
categoryIds=29422
という魔法の呪文がついています。
ということで
非表示にしたい項目[カテゴリが="35653"] {
display:none;
}
だんだん正解に近づいてきました！！
解決までのラストスパートです！！
先ほどGETした魔法の呪文がHTMLのどこにかいてあるかチェックします。
最初に見つけた timeタグ のすぐ近くにいました！
< a 〜中略〜 href="posts/292239?categoryIds=35653">
ここのHTMLが見つかったらもう完成したも同然。
CSSの設定方法の説明がある「こちらのブログ 」を参考にすると。
aタグの href= となっている文章に 35653 という
魔法の呪文が設定されている
timeタグを 表示:無し; にするCSS は↓↓↓
a[href*="35653"] time {
display: none;
}
☆☆☆☆☆☆完成☆☆☆☆☆☆
一番難しい説明箇所をすっ飛ばしているであろうことには
自覚があります。
確信犯です。
a[href*="35653"] time
の所とか「なんでそうなるの？」という疑問は
「CSS3」のことを書いているブログをたくさん読むと理解できるかもしれません！！
また、ご利用のテンプレートデザインによって
aタグとtimeタグが近くにいなかったり
timeタグに display:none;しただけでは表示が消えないものもあります。
これはやり方の一例です。
本家ブログでも
と、注意しておりますので
CSSのカスタマイズには十分ご注意ください。
ElecのAmeba Ownd サイトでは
ご紹介した サービス案内の一覧以外にも
プロフィールページのメンバーの一覧や
リンクページのリンク一覧にあった日付も非表示にしています。
サービス案内一覧のCSSにちょこっと手を加えて対応しました。
たった３行だけなのに、表示をガラっと変えてしまうCSS。
考え方がわかってしまえばCSSの応用は簡単です。
使えるようになったら楽しくなってしまうこと間違い無しです！！
0コメント