カテゴリーを親子関係で管理している時に、タイトルにあるようにパンクズに登録しているカテゴリーが全て表示されない場合がある。対処法をご紹介致します
結論から申しますと、ただ↑これだけの事です。親や祖父カテゴリーを選択すると、アルファベット＞カタカナ＞ひらがな の順、さらにあいうえお順でソートされ、その順番でパンクズが表示されるようです。
例えば下のようにカテゴリーを登録した場合、
当然パンクズは下の様に表示したいものです。
ところが実際は下の様に表示されてしまいます。
これは、Aqueriusがアルファベットであるため、飲み物やスポーツドリンクよりも上位にソートされてしまっているからです。
これを回避するためには下の様に最下層のカテゴリーだけ選択する事で、親カテゴリー、小カテゴリーを表示させることができる。
有名なのは「Breadcrumb NavXT」ですね。ただ、プラグインを使わなくてもコードで簡単に表示できるので、プラグインに頼らないのも１つですね。
検索のヒント
ブログ以外のサイトを製作する際に、アーカイブページのurlに自動でcategoryが出力されるのが気になる・・・・という場合の対処法をご紹介致します。
こちらはインストールした時点で”category”を取り除いてくれる便利なプラグインです。
.htaccessに下記を追加してアップすれば完了です。※サイトURLを書き変えてください。
RewriteRule ^category/(.+)$ http://サイトURL/$1 [R=301,L]
画像の編集ソフトというと有料ならPhotoshop、無料ならGimpといったところが有名ですが、最近はオンライン上で画像が編集できる無料のサービスが進化しています。
幾つか選りすぐりのサービスをご紹介致します。細かい説明より、まずは触って頂いて直感的に使いやすいものを選んで頂ければ良いと思います。
photoshopにかなり近い作りになっています。これが無料というのは驚きです。こういったサービスは無料だけあっていつ閉鎖されるか分かりません。他のサービスにもアンテナをはっておきましょう。
こちらもかなり操作性が良いです。これも無料・・・・。
デバイスが多様化する中で、ホームページの幅をどれくらいにするか、悩みどころだ。
何pixelで設計するかを決めるのに役立つ情報をご紹介したいと思う。
日本国内で実際に使われているモニターサイズの割合を見てみましょう。下のサイトはカウンターを使って様々なデータを取得、グラフで表示してくれるサービス。
※下のリンクは2011年８月〜2013年8月の値
http://gs.statcounter.com/#resolution-JP-monthly-201108-201308-bar
横幅が768pxが1.59%となってるので、この幅まで対応する必要があるか？検討の余地がある。
[Googlead]
Google Analiticsが導入されているサイトであれば、ユーザー > ユーザーの環境 > ブラウザとOS からユーザーの使用しているモニター解像度の一覧を見ることもできるだろう。
※セカンダリディメンションでブラウザを選択すれば、720や320といったモニターサイズがスマートフォンからのアクセスだという事も知ることができる。
大手企業のサイトがどの幅に設定しているかも参考になる。ULTRAZONEは主要WEBサイトの横幅をまとめているサイト。
モニターの横幅毎に可変するレスポンシブデザイン。可変するタイミングとなる横幅のポイントのことをブレイクポイントと呼ぶが、このブレイクポイントに関しても設計段階である程度検討しておく必要がある。
[Googlead]
IE6（InternetExplor6）はMicrosoftが開発し、2001年に公開されたブラウザです。５年後にはこの話は話題にのぼる事すらないとおもいますが、現時点ではIE６に対応するかしないか、少なくとも一考せざるをえない課題となっています。なぜなら、実際にサイトにアクセスしているユーザがこのブラウザを使っているという事実があるからです。
IE6はcssに対する独自の解釈があるため、他のブラウザでは奇麗に見えるのにIE６ではカラムが落ちてしまうという事がしばしばおこります。javaを使う等、様々な方法で回避することは可能ですが、作業量が大幅に増えてしまいます。ホームページ製作会社によってはIE6対応は別対応、または全く対応しないとしているところもある。
１つにはMicrosoftがサポートを終了しているという事が挙げられます。（IE7もサポートしていません）
IE6へのサポート終了に伴って、Microsoftも積極的にブラウザのアップデートを促しおり、確実にユーザ数は減少しています。下のリンクは、StatCounterというサイトが公開しているデータで、2011年8月〜2013年8月の期間の数値になります。IE6のブラウザシェアは1.14%と、激減しています。
下のページはMicrosoftが企画しているIE6CountCownというキャンペーンページ。こうしたサイトがある事自体、もはやIE6のブラウザシェアが０になるのも時間の問題といえるでしょう。今は古いブラウザへの対応よりも、新しい技術に目をむけていこう。
サイトのテーマカラーを決める際役立つツールをご紹介します。同じ「青色」といっても人によってイメージする色は様々です。微妙なズレをなくすためにも打合せの際にカラースキームを実際に見ながら進めていくと効率的ですね。
マウスを動かすと色相、明度等を直感的に変更できる。png画像でダウンロードできるので、打合せ時の記録としても使えます。
こちらは同じカラースキームでも、よりサイトをイメージしやすく設計されています。Light sampleとDark sampleというプレビューが用意されているのも良いです。実際にその色を使ってサイトをデザインした場合の雰囲気を掴むことができる。
こちらは少し面白いツールで、写真をアップロードすると、その写真にどんな色が含まれているかを抽出してくれるツール。その名もカラーハンター。メインで使う画像が決まっていて、その画像を中心にデザインしていきたい時等に重宝します。
紙媒体でよく使用される頭文字だけを大きくするデザイン。「ドロップキャップ」や「イニシャルキャップ」と呼ばれています。CSSで表現する方法をご紹介します。ポイントは以下の３つになります
first-letterは要素の最初の文字にスタイルを適用する事ができる疑似要素です。例えばp:first-letterとするとp（段落）の最初の文字だけにスタイルを適用することができる。
p:first-letterを使うとすべての段落の最初の文字にスタイルが適用されてしまいます。恐らく、記事内の最初の段落だけに適用させたいという場合が多いと思いますので、その場合first-childという疑似クラスを併用する方法で回避できる。下記のようなコードになります。
p:first-child:first-letter
ただし、IE6以下は非対応となっていますので、対応させるためには、適用させる段落にクラスを割り当てるしかないようです。
MAC版IEもこちらは対応していません。対応してないだけならば良いのですがバグがでてしまうので、MAC版IE向けに「HOLY HACK」で下記のように記述します。
/* この行と最後の行が必須。このコメントアウトがHOLY HACKです */
p:first-letter {
//ここにスタイルを記述
}
/* この行も必須です */
検索のヒント
” ドロップキャップ CSS “
[Googlead]
画像や画像タイトル、続きを読む等のブロック要素を含む全体をクリック、またはタップできる様にしたいという場合、結論からいくと「html5を宣言する」で解決する。
html5から、「ブロック要素をaタグで囲って良い」となった。これにより、記述コードもシンプルになり、難しいことはなにもない。
ではhtml5を宣言するにはどうすれば良いのか。
HTML 4では以下の様にDOCTYPE宣言を記述していた。 （HTML 4.01 Transitional）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[Googlead]
それを下記のシンプルなコードと差替えるだけで、html5のDOCTYPE宣言となる。
<!DOCTYPE html>
ちなみに、html5以前はどうしていたかというと・・・・
ブロック要素をposition:relative;とし、要素内のaタグをposition:absolute; top:0; left:0; width:100%; height:100%;という流れ。
要素を縦方向に中央揃えさせる方法はたくさんあるのですが、IE7以下にも対応させるとなると、現時点ではかなり面倒な作業となります。方法をいくつかご紹介します。
親要素の高さと同じline-heightを設定することで縦方向真ん中に配置することができる。
positon:absoluteに設定し、topを50%、top-margin:-1em;に設定。
などなど、他にも状況に応じて様々な設定方法が考えられます。
特に、block要素を縦方向中央揃えの場合は、display:table-cell;にする事で、vartical-allign:middle;を効かせることができる様になります。この場合IE7以下はcss hackを使う必要がある。
検索のヒント
” table-cell ie7 “ ” css 縦方向中央 “
floatを使ってコンテンツを並べる際に、最後の要素だけ余白をつけない方法のいくつかをご紹介します。
まず要素と要素の間の余白(A)を決め、全体幅(B)から引いた値(C)を、要素の数(D)で割ります。
例えば、(A)=10px、(D)=３、(B)=320pxの場合、320-10×2=300px。
この値を(D)で割ると１つの要素幅が100pxとなります。これをfloatで回り込ませて、余白10pxを指定すると、（100px+10px）×3＝330pxとなり、全体幅から10pxはみ出てしまいます。そこで、親要素のulにmargin-right:-10pxを指定するのがポイントとなります。
<div class="wrapper">
<ul>
<li>floatコンテンツ</li>
<li>floatコンテンツ</li>
<li>floatコンテンツ</li>
</ul>
</div>
#wrapper {
width: 320px; /*全体の幅*/
}
#wrapper ul {
width: 330px; /*マージンを含む子ボックス合計幅*/
margin-right: -10px; /*はみ出しを調整*/
}
#wrapper ul li {
width: 100px;
float: left;
margin-right: 10px;
}
css3ではlast-childというスタイルがあり、これは疑似クラスの一種でリストの最後にだけスタイルを指定することができる。
ただし、最後の要素にしか適用されないため、1行毎に設計する必要がある。また、現時点でIE8等対応していないブラウザもあるため、推奨環境に応じて対策が必要です。
検索のヒント
” last-child IE8 “
jqueyにも各親要素内のすべての最後の子要素を選択するセレクターが用意されています。
覚えてしまえば簡単ですので、ぜひこちらも利用してみましょう。