俺流!バラとラン栽培

バラとランと WordPress に魅せられて!

タグ: CSS

カレンダーウィジェットの日付リンクを丸くする

本ブログのフッター位置にあるカレンダーウィジェットを、以前からもうちょっとデザインを工夫できないかな、と考えていて、いろいろとネットを検索していました。特にリンクに関しては、工夫したかった!

そこで、ネットで見つけた「[WordPress.com] カレンダーウィジェットの日付を丸くする | comemo」を参考にスタイルを変更しました。

先ずは Before-After を掲載しておきます。

スタイル変更前 スタイル変更後
20150501_calendar_1 20150501_calendar_2

「display」を block にすること、border-radius で角を丸めたことでしょうか。上記のコードにある px は、毎回確認しながら微調整しました。コードは、「子テーマ」の style.css へ記入しています。

引用符(blockquote)の CSS、content プロパティーを使いこなす!

本ブログでは、表(table)や引用符(blockquote)を多用しています。表に関しては自己満足ではありますが、そこそこ完了していますが、引用符(blockquote)に関しては、単純な装飾しか施していませんでした!

そこで、引用符に content プロパティーってやつがあることを知り、更に以前単純にコピペで利用させて頂いた引用符に関する装飾を思い出し、本ブログでも採用してみることにしました!

PAK86_codeing_700x200

参考にした投稿記事は以下の 2 つです!

重要なのは、content プロパティーと、それをどうやって表示させるかということです。本ブログでは、引用符(blockquote)のボックスの最初に「Quote」と表示させたい!結論からすると、以下のようになります。

content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。出典:「CSSの content プロパティーを使いこなそう! | Webクリエイターボックス」より

本当に自己満足の世界ですが・・・かなりかっこ良くなったと思っているのですが・・・どうでしょうね~「Quote」という content をローテーションさせることもできるのですが、以前、その調整でかなり時間を費やしてしまって、そこまでやる必要があるのかな~ってなことを考えていたので、単純に引用符のボックスの上にちょっとだけ突き抜けるように設定しました。

コードは以下の通り。

これだけできると本当に嬉しくなりますね~

ちょっと苦労したのは、「Quote」のポジション。blockquote に position プロパティーを設定しないと content プロパティーの表示が上手くできないようです。また、z-index プロパティーを指定することで、本文を最前面に表記できるようにします。

なが~いコードを一人で書くって・・・大変なことですが一度完成すると本当に満足感がありますね!

Posted by “WordPress for Android” in Xperia Z3 Compact.

順序のないリストにアイコンフォント(Genericons)を適用する

先日の投稿記事「【問題解決】アイコンフォント、Genericons が IE 11 で表示されない!」を記述する時に気が付いたのですが、本ブログで採用しているテーマ「Frontier」では、アイコンフォントの「「Genericons」を標準で装備していることを知りました。

20150308_genericons

この「Genericons」は、WordPress の標準テーマ「Twenty Fourteen」で標準装備されたらしいのですが、どうやらアイコンをフォントして表示することができるらしい!ましてや本ブログで採用している「Frontier」で標準装備しているのですが、使わない手はないでしょう!

先ずは、思い付いたのがタイトルページにリストしている「最新投稿記事」リストにアイコンフォントを適用します。参考にしたのは「イメージ画像を使わずにリストの行頭記号をカッコよく変える – AdSense実験室」という投稿記事。

上記に加え、具体的な利用方法は「アイコンフォントの具体的な使い方 – Genericons | Web Tips」が詳細を説明していますので、参考になると思います。

本ブログで採用しているテーマ「Frontier」では、以下のように設定されているようです。

実際にテーマファイルを確認すると以下のファイルが格納されています。

ファイル 備考
フォントファイル(.eot) 実際には、4 つのフォーマットのアイコンフォントがあるようですが、実装されているのは .eot ファイル。
genericons.css @font-faceとアイコン表示するためのクラスを記述しています。
LICENSE.txt フォントのライセンスを記述したファイルです。

実際に挿入した style.css は以下の通りです。オリジナルのスタイルを修正するためのコードも記述する必要があるため、ちょっと通常の sytle.css よりもコードが多いかもしれません。

リストには「recentpost」というクラスを設定することで、通常のリストの装飾とは区別するようにしています。投稿記事や固定ページでは、通常のリストにしたいので。実際に出力したサンプルを下に示しておきます。

  • リスト 1
  • リスト 2
  • リスト 3
  • リスト 4
  • リスト 5
  • リスト 6

通常、リストを上記のように混在させることはありませんが、あくまでも結果を確認するために示しています。上記リスト4、5、6 は「<li class="recentpost">~</li>」として記述しています。

【追記】
ちょっと気になるのは、上記とは別に以下のような記述が本ブログでは出力されています。

上記は、「Font Awesome」という別のアイコンフォントを利用できるようにしていること、更に jetpack というプラグインでは、上記と全く同じ「Genericons」を別のディレクトリーに格納しているということ・・・

特に問題は出ていないようですが、やっぱり気になりますよね~

表(table)にシャドウとグラデーションを付ける方法

表を作成するためにやっとこさシャドウを付けることに成功しました!(本ブログの投稿記事「Internet Explorer 11、table (表)でシャドウを表示する方法」参照)

では、更に完成形にしたいと思います!と言っても表内のトップセルにグラデーションを付けることで完成にします。ちょっとしたあこがれだけの自己満足ではありますが。

PAK86_codeing_700x200

まずは、完成した style.css 内をご紹介。以下のコードです。

これを実行すると、実際には表全体に対して軽めのシャドウが付いて、トップセルにグラデーションが係っているはず。取り急ぎ、「Internet Explorer 11」と最新版の「Google Chrome」で確認しています。以下が実際の表。

冬越温度 強光を好む 中光を好む 弱光を好む
12~15℃ (4)デンファレ (6)コチョウラン:大輪系
(2)コチョウラン:中輪系
(1)コチョウラン:小輪系
None
8~12℃ (3)シンビジウム:大型 None None
5℃ (4)デンドロビウム None None

詳細は、あっちこっちのネットで公開されていますから、そちらのサイトを参考にすることをお勧めしますが、私が参考にしたのは、以下のウェブページ。

もうこれだけで十分に実装できちゃいました。トップセルの部分で「background-color」としちゃって最初は機能しませんでしたが、解説を注意深く読めば、「background」で良かった!

【追記:2015年03月10日】
上記に加えて、各行の背景色を交互に変えてみました。参考にしたのは「CSS3を使って美しく装飾されたテーブルの作り方|Webpark」です。このページ、ほとんど必要な表に関する装飾方法が記載されていると思います。

ちょっとくどいかな~デザインが・・・感じ方は個人差がありますから、取り急ぎ、このデザインは善しとしておきます。

【追記】
ちょっと自分用の備忘録ですが、上記のコードの先頭に付ける「-moz-」や「-webkit-」って何だ、って疑問があって・・・調べてみると「ベンダープレフィックス-CSSの基本 | HTMLリファレンス」というページに解説がありました!

ちょっと引用しておくと・・・

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。
出典:「ベンダープレフィックス-CSSの基本 | HTMLリファレンス」

なるほど!そういうことか~と納得するも解説ができるほどではないので、まずは記憶しておけば良いかな。更に・・・

拡張機能であることを明示するための識別子
ベンダープレフィックス(接頭辞)とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。

将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子(vendor identifier)でブラウザの種類を特定します。
出典:「ベンダープレフィックス-CSSの基本 | HTMLリファレンス」

参考までに以下も引用しておきます。

主要ブラウザのベンダープレフィックス
-moz- Firefox
-webkit- Google Chrome、Safari
-o- Opera
-ms- Internet Explorer

これで納得。

Internet Explorer 11、table (表)でシャドウを表示する方法

通常、私個人ではネットを徘徊するためには「Internet Explorer」と「Google Chrome」を利用しています。まかりなりにもブログを運営していて、更にはスタイルシートを改良しているわけですから、人気のブラウザでの閲覧は当たり前かな、なんて生意気に。

本ブログでは、表と引用を多用していますので、少なくとも表と引用句、即ち、HTML の「table タグ」と「blockquate タグ」には、いろいろと目立たせるための装飾を施したいと考えています。

まずは、シャドウでも付けて簡単に・・・と思ったのですが、「Internet Explorer 11」で確認してみるとシャドウが登場しない!ところが「Google Chrome」では綺麗に登場しているシャドウが!どうして?

解決策が見つかったので、下記に示しておきます。

PAK86_codeing_700x200

先ずは、オリジナルのテーマ「Frontier」にある table タグに関する CSS ファイルを確認しました。なんてことはない、単純でシンプル。このスタイルを「子テーマ」にある style.css に変更を加えれば良い。

単純に表にシャドウを出したいだけなので、「box-shadow」を以下のように追加(5 行目)しました。オリジナルだと小さな表も投稿記事いっぱいに広がってしまうので、「width: 98%;」を「width: auto;」へも変更しました(2 行目)。他の部分はそのまま。

上記だけで、「Google Chrome」では表にシャドウが登場してくれます。なかなか良い感じなんて自己満足して、「Internet Explorer 11」で確認してみると・・・あれっ、シャドウが見えない!最初は、「Internet Explorer 11」の設定が悪いのでは、と考えていろいろと確認しましたが、スタイルに関する設定なんてあったかな~ってふっと気が付いて・・・

そこで見つけたのが「IE9でドロップシャドウ(box-shadow)が効かない | ダリの雑記:WEBプログラム版」という投稿記事。どうやら table に border-collapse の設定に左右されるようです。ちょっと引用しておきます。

table のスタイルを「border-collapse:collapse;」にしているとダメみたい。その部分の table のみスタイルを「border-collapse: separate;」とし、解決しました。
出典:「IE9でドロップシャドウ(box-shadow)が効かない | ダリの雑記:WEBプログラム版」

そこで、上記に従って「border-collapse: separate;」に変更すると見事にシャドウが登場してくれました。しかし・・・今度は、表の全ての線で変な隙間が登場して、ちょっとうるさい!更にネットを調べると、「CSS3 – IE9でtableをbox-shadowで装飾する – Qiita」という投稿記事を発見!

そこで、リンク先に説明されているように「border-collapse: separate; border-spacing: 0;」と変更しました(下記、3 行目)。結局は、下記のような CSS コードへ修正しました!

上記で見事解決しました!「Internet Explorer 11」でも表にしっかりとシャドウが登場してくれました!嬉しいですね~問題解決の喜びを感じつつも「基本が解ってないな~」と反省もしかり。

1 / 212
「俺流!バラとラン栽培」Copyright © 2015-2016 by Zero Cool. All rights researved. Frontier Theme