1月 182014
 

【追記:2014年01月23日】
所属している会社では、「Internet Explorer 9」を利用しています。セキュリティーの関係で、自分で勝手にアップグレードできませんので、ちょっと不都合もありますが。特に、下記に示した引用符。以下の様になっています。

20140123_quote_IE9

全てのブラウザーで確認しているわけではありませんから、こうしたことも致し方ないとは思うのですが・・・閲覧して下さっている方の中には、かなり迷惑な感触を抱いている方もいらっしゃるんだろうな~何て反省してはいるのですが。

【公開時、投稿記事】
「かっこいい」の定義が不明確ですが・・・ただ、単純に「blockquote」を適当するのではなく、ちょっと他のサイトでは利用していないような、それでいて結構目立つ引用符を作成したい・・・

そこで、「CSS3 を使って blockquote をちょっとおしゃれに | Unformed Building」にある例を参考にちょっとやってみました!

実際に適用しているコードは、本投稿記事の後半にアップしておきますが、実際には以下のように表示されるようなります。

引用符(いんようふ)は、約物の一つ。文中において、他の文や語を引用していることを示す役割を果たす記号で、多くの場合一対で引用部分を囲む。コーテーションマーク、クォーテーションマーク、クオーテーションマーク、引用符号ともいう。(出典:「引用符 – Wikipedia」より)

Internet Explorer の古いバージョンでは、上手く表示できないようですが・・・少なくとも CSS 3 をカバーしているブラウザーでは、私の思ったような表示になっているはず!

実際に適用しているコードは以下の通りです。

/* ======= Reseting Blockquote ======= */
blockquote { quotes:none; }

/* ======= blockquote要素前後にコンテンツを追加しないように指定しています ======= */
blockquote:before, blockquote:after { content:''; content:none; }

blockquote {
    background: none; /* url(images/blockquote-l.png) no-repeat left top; */
    position: relative;
    margin: 10px 30px 10px 30px;
    padding:15px 10px 2px 15px;
    border:1px solid;
    border-color:#bddcad #eee8aa #eee8aa #bddcad;
    font-weight: normal;
    font-style: normal;
    text-align: left;
    color: #501616;;
    background-color:#edffdc; }
	
blockquote:before {
    position: absolute;
    top: 20px;
    left: -75px;
    z-index: 1;
    width: 100px;
    transform: rotate(-25deg); /* 反時計回りに25度回転 */
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
    color: #8fbc8f;
    content: "Quote"; /* 文字列を生成 */
    font-size: 30px;
    font-weight: 700;
    font-style: oblique;
    font-family: Georgia normal, "Times New Roman", Times, serif;
    text-align: center;
    text-shadow: 3px 5px 3px rgba(0, 0, 0, .2); /* 文字にドロップシャドウ */ }
/* ======= Reseting Blockquote END ======= */

いや~素晴らしい!引用符だけで、こんなに長くなるんだ~とちょっと驚きましたが、やっただけの成果があったような気がしています。あくまでも自己満足の世界でしょうけど。


1月 172014
 

ブログに限らず、ウェブデザインで重要と考えられるのは、やっぱりその配色ではないでしょうか。素人の私が主張することではないのですが、それでも配色には結構神経を使います。

実は、私、色覚異常なので・・・正式名は「第二種赤緑色覚異常」というらしい(発覚した時に診断された名称です)。日常生活には支障はないのですが、ウェブサイトは、配色によって通常の方よりも「ちかちか」したり、文字がかなり見辛かったり。特に赤と緑の配色は NG です。

そこで、本ブログでは青系色にすることにしたのですが、これまでに適用したことのない「Royal Blue」ってのを基準にしようかな、と決意しました(いつもながら大袈裟です!)。

ウェブのデザイン、特に配色の決定を助けてくれるサイトは多いのですが、私は「Color Hex Color Codes」というウェブサービスを使って、「Royal Blue」で検索して提案してくれる配色を適用することにしました。

検索フォームから「Royal Blue」で検索すると・・・以下のような結果を表示してくれます。

20140117_ColorHex

「Royal Blue」は、コードにすると「#4169e1」で、同系色は段々濃くなる時と薄くなる時とに分けて提案してくれるし、ちょっとしたウェブのサンプルも示してくれます。

以下、自分の忘備録として、配色として提案されたコードを表示しておきます。

Shades of #4169e1
#4169e1 #3a5eca #3454b4 #2d499d #273f87 #203470 #1a2a5a #131f43 #0d152d #060a16 #000000
#4169e1 #3a5eca #3454b4 #2d499d #273f87 #203470 #1a2a5a #131f43 #0d152d #060a16 #000000
Tints of #4169e1
#4169e1 #5478e4 #6687e7 #7a96ea #8da5ed #a0b4f0 #b3c3f3 #c6d2f6 #d9e1f9 #ecf0fc #ffffff
#4169e1 #5478e4 #6687e7 #7a96ea #8da5ed #a0b4f0 #b3c3f3 #c6d2f6 #d9e1f9 #ecf0fc #ffffff

1月 162014
 

投稿記事が増加してくると、頻繁に利用する HTML タグに関しては、ちょっとした工夫が欲しくなってきます。例えば、「<table>関連タグ」や「<blockquote>タグ」等は、本ブログでは頻繁に利用するため、適用しているテーマ「Suffusion」でのカスタマイズには、限界がありそうです。

そこで、CSS だけは「子テーマ」を設定して、自分好みのスタイルにしようと決心!

しかし、以前公開した本ブログの投稿記事「「子テーマ」を検討する」でも触れましたが、「2.CSS が完全上書きできない」ということを確認することにしました。

単純に、親テーマを引き継ぐだけの「子テーマ」を採用してみて確認します。

本ブログで採用している「Suffusion」は、「Suffusion Options -> Skinning -> Theme Selection (Color Scheme)」のみを「Royal Blue on a light theme」へ変更している以外は、全てのカスタマイズ可能なオプションは標準のままの設定です。下図が、一つの投稿記事のコピーです。

20140117_Suffusion_RoyalBlue

これをスタイルをそのままに「子テーマ」にすると CSS を上書きしないのが明確です。

20140117_Suffusion_Child

ブログの背景色が変わってしまっているし、ブログタイトルの配色も違ってしまっている・・・詳細に比べてみれば、もっと存在しているのでしょうけど、「子テーマ」で変更していけばいいかな、と考えていますが、これまで「親テーマ」を完全に引き継いでくれると思っていただけに勉強になりました。


1月 152014
 

本ブログで現在適用している「Suffusion」というテーマ。標準で準備されているカスタマイズ領域が多くて素晴らしい・・・しかし、どうしても痒いところに手が届かないこともあって、いよいよ自分専用のカスタマイズを加えていこうかな、と考えています。

WordPress の鉄則として!?、自分専用のカスタマイズを実施する時には、「子テーマ」というのを設定して、そこでカスタマイズすることで、今後のアップグレードに支障を出さない、というのがあります。私個人も、他のブログでは「子テーマ」を設定していますので、それほど難しくはなさそうです。

  1. カスタマイズしたいテーマのディレクトリーと同じレベルに「子テーマ」用のディレクトリー設定。
  2. 「子テーマ」に必要なファイルを上記のディレクトリーに配置する(最低でも style.css を配置)。

これだけで機能しだすので、ちょっと知識があればできますよね!

私も、スタイルだけをカスタマイズしたいので、style.css のみで、以下のコードを「子テーマ」の準備を始めました。

/*
Theme Name:     Suffusion_Zero
Theme URI:      http://www.nakui.net/wordpress/wp_theme
Description:    This is the Child theme for Suffusion
Author:         Zero Cool
Author URI:     http://www.nakui.net/about
Template:       suffusion
Version:        1.0
*/
 
@import url('../suffusion/style.css');

詳細に関しては、ネットに溢れるほど素晴らしい情報が公開されていますから、ここで詳細を説明することは避けますが・・・ただ、ちょっと気になる情報を見つけました!それが、「40代からのストレスフリー人生計画:WordPress で子テーマを作ってサイト運営してみてわかった 3つのデメリット」という公開投稿記事。

どうやら以下のような問題がありそうです。

  1. functions.php の管理が面倒
  2. CSS が完全上書きできない
  3. 親テーマファイルの構成が大幅に変わると子テーマの修正もハンパない修正作業になってしまう

私の場合、上記の「css が完全に上書きできない」というのがかなり気になります・・・これから、詳細を検討してみなければなりませんが・・・またまた、楽しみが増えたような気がして、ワクワクしています。


1月 142014
 

昨年(2013年)の春頃、瀕死状態だった「カランコエ」だったのですが、一念発起して必死で!?救済処置を施しました。と言っても、やったことと言えば、枯れ枝の徹底削除、鉢替えと同時土替えを決行、そして置き場所を日差しの多い場所に変更。これだけ。そして、見事に復活して花が咲きだしました!

20140112_karankoe_1

花は淡い黄色って感じでしょうか。なかなかかわいい感じのする花です。ただ、もっと橙色が強かったような気がするのですが、そこはあまり記憶が無いので、とりあえずは良しとしましょう。だって・・・単なる復活ではなく、増殖しているんです。

20140112_karankoe_2

どうでしょう。カーテン越しの日差しを浴びて、もう一鉢あるんです・・・というかもう3鉢もあるんです。「枯れた」と思って切り取った枝を水差しにして、「ひょっとしたら根が出たりして!」なんて考えていたら、ほとんどが発芽!復活どころか、増殖して見事に大株になったりして。こうなると、なかなか嬉しいものです。

カランコエの育て方

以下、「ヤサシイエンゲイ:カランコエ」より、育て方のキーポイントを忘備録として記載しておきます。

季節、日常の手入れ
花茎が伸びてその先にまとめて花をつけます。次々と花茎があがってきますので、花が3割くらい枯れてきたら思い切って花茎の付け根から切り落とす。

夏に新芽の先を摘んでおくとワキから新たに芽が伸びてきて枝数が増えて結果、花数が増える。室内で育てていると葉っぱにホコリがたまりやすいので、ときどき上から水をかけて洗い流すこと。

ちなみに開花期間は秋から春ですが、自然の環境下で育てていると花が咲くのは冬以降になることが多い。また、つぼみができたあとに気温が10℃以下になるとつぼみの動きが鈍り、春に暖かくなるまで花が咲かないことがある。逆に暖かければ晩秋にできたつぼみは冬から花を咲かせる。秋頃から花を楽しみたい場合は夏に短日処理を行うこと。
 
花後の春~秋は戸外の日当たりがよく雨の当たらない場所で育てること。強い直射日光に当たると葉が焼けてしまうことがあるので、真夏は直射日光を避けた明るい日陰で育てる。また、高温多湿時期は蒸れないように風通しにも気を使うこと。

日当たり・置き場所
10℃以下になると花つきが極端に悪くなり5℃くらいで生長が止まる。冬は室内の暖かいよく日の当たる場所で育てる。逆に夜は人工照明の光に当たり続けると花が咲きにくい状態になるため、できれば蛍光灯の光などの当たらない場所で管理する。

水やり・肥料
葉が多肉質で中にたっぷり水が詰まっているため乾燥には大変強い。根が細く根ぐされを起こしやすいので水のやりすぎには気を付けること。5~9月の生長期は鉢土の表面が乾いてからたっぷりと水を与える。冬は鉢土の表面が乾いて2~3日たってから水を与えます。

肥料は新芽が動き出す5月頃から秋まで、液体肥料を10日に1回(ただし、夏の高温時期は根ぐされを起こしやすいので肥料は与えない)。開花中は原則として肥料を与えなくてもよいが、リン酸分の多い肥料を与えることにより長く花を楽しむことができる。

用土
とにかく水はけをよくすること。赤玉土(中~小粒)5:ピートモス2:川砂3

植え替え
鉢の中が根でいっぱいになってしまうと、水はけが悪くなりますので植え替えを行う。

6月頃花が咲き終わったら枝を全体の半分くらいに切り戻し、一回り大きな鉢に植え替えます。植え替え直後は1週間ほどやや日の陰る場所で管理し、その後通常の管理に戻します。植え替え直後は一度たっぷりと水を与えて、その後はやや乾かし気味に保つのがコツ。

短日処理
7~8月頃に夕方の5時頃から翌朝の7時頃までダンボールなどをかぶせて意図的に日照を調整し短日の状態を作る。この作業はつぼみが確認できるまで毎日繰り返す。目安としては30~40日間ほど。