月別アーカイブ: 2014年5月

wordpress

wordpressトップページ(固定ページ)のタイトルを非表示にする

wordpress固定ページでは自動的にページのタイトルが表示されます。固定ページ作成時につけたタイトルが表示されます。トップページ以外はいいんですが、トップページに『TOP』と表示してあるのは、かっこ悪いので消したい!という場合に、content-page.phpを編集します。
参考サイトhttp://www.nishi2002.com/3836.html

twentytwelve デフォルト状態

上記のものを下記のように書き換えます。

以上です。

wordpress

wordpressの子テーマ function.phpについて(オーバーライドとは?)

wenty twelveの子テーマを作りサイトをカスタム中です。

WPのthemesの中にtwenty-childというディレクトリを作り親からコピーしてきたstyle.cssを設置してそれでcssを上書きをしています。
header.phpとfooter.phpも同じように親からコピーしてtwenty-childというディレクトリに入れました。

念のためfunction.phpもコピーして子テーマtwenty-childに入れました。

function.phpはオーバーライドできませんとあります。
functions.php の使用方法

オーバーライド?….読んでもよくわかりません。ただコピーするだけじゃだめなんですか?

教えて下さい。

/////////////////////////
子テーマfooter.phpをカスタマイズしようとしたら、エラー表示が出てfunction.phpの77行目がおかしいと言ってた(多分)だからfooter.phpは上書きできないと。
だから子テーマのfunction.phpをいったん削除したら、問題なくfooter.phpのカスタマイズが出来ました。

function.phpは他のphoとは違った特別なものっぽい。(多分)

////////////////////////
2014-05-30 の勉強会で謎がとけました。

オーバーライドとは?

例えばfooter.phpやheader.phpは、オーバーライドできます。「オーバーライドできます」と言うことは親テーマに書いてある内容を読み込んで、さらに子テーマに上書きした内容も読み込みます。ということではありません!

オーバーライド「できる」という事は、親のファイルは「読み込まれず無視」されるという事です。

functions.phpがオーバーライドできないと言うことは、親テーマと子テーマに同じ内容のもの(functions.php)があると駄目なのです。どちらも読み込んでしまうから、「あんた同じものがあるじゃないのよ!」と叱られてしまうわけです。叱られないようにするには、子テーマのfunctions.phpには追加した内容だけ書くようにします。まず最初に子テーマのfunctions.php内には親テーマに書いてあることは、削除しておきます。こうしておけば同じものが2つあるわけじゃないので、叱られません。ほっ

下記のものは、親テーマfunctions.phpからコピーした子テーマfunctions.phpです。(親テーマの内容を削除した状態のものです。)
(注意!)コメントアウトの部分は削除しないでください。下記参照。

これで問題ありません!

子テーマfunctions.phpに何か追加したい場合は、この状態から追加していきます。

2014-05-16 勉強会

svgアニメーションについて。

  • 線に効果をつけるには?
  • 「css animationが使えないブラウザだと、何も見えず、何も起こらなくなって困る」についての対処法

http://manakaa.com/tips.html

↑「SVG LINE アニメーション・応用編2014-05-15」に追記しました。参照して下さい。

visibility:hiddenとdisplay:noneの違い

visibility:hiddenは要素の高さをキープする。display:noneは要素の高さをキープしない。まあ、やってみて下さい。違いがわかりますよ。

疑似クラス

疑似要素でデザインに装飾を加えたりしていますよね。そして疑似クラスというのもあります。よく使う「:hover」というのは、疑似クラスにあたります。その他に「:target」というのもあります。今回「:target」を使ってどんな事が出来るのかやってみました。下記のファイル参照

疑似クラス:targetはこんな事が出来る。

clearfixについてのまとめ

2014-5-02の勉強会にて学んだclearfixについてまとめます。現在私は初めてのサイトを制作中で、<footer>内のナビゲーションがfooter画像内におさまらないという問題が発生し、先生に質問しました。

image01

→原因は、<main>の高さが0だから。

image02

中身がすべてfloatしている親要素の高さは0になる。floatをかけると別の次元になり、親要素の中にいない状態になる。上の図の場合、2つの<div>は<main>の中にいない状態になる。つまり、親要素の<main>は2つの<div>を覆っていない状態である。

●解決法

  1. 親要素に固定の高さを指定する。 →しかしこれでは、どのくらいの数値かわからない。
  2. 自動的に高さがつくようにclearfixを指定する。
  3. overflow:hidden; を指定する。

2と3はどちらでもよいが、overflow:hidden; を使用すると、幅を超えてしまったテキストや画像を隠してしまうという問題が生ずる。clearfixの方が安全である。※両方指定しないこと。

●clearfixの使い方

・clearfixしたい要素は中身がすべてfloatしている親要素。
・親要素にクラスを指定しておく。ここでは「class=”clearfix”」とする。
今回の例でいうと、
html

css

↑after疑似要素とcontentプロパティを利用して、中身のfloatした要素の後ろに、内容が空のblock要素を生成。そのblock要素にclear:both; を指定している。

image03

これで親要素に高さがキープされ、中身の要素全体を覆うようになった。
ほかにもclearfixが必要な親要素に同じクラス名をつければ、複数回使用できる。

●「:before」「:after」とは

cssの疑似要素。(疑似要素とは、htmlにはかいていないが、cssで作れる要素のようなもの)
:beforeと:after疑似要素は位置を指定するもの。しかしIE7までは非対応。IE8から使用可。

:before →要素の直前にコンテンツを追加
:after   →要素の直後にコンテンツを追加

 

 

SVG LINE アニメーション・応用編

2014-05-09 の勉強会で「SVG LINE アニメーション part2」というのをやりました。前回の応用編です。
SVG LINE アニメーション・基礎編

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・応用編 2014-05-15」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!

SVG LINE アニメーション・基礎編

2014-05-02 の勉強会で「SVG LINE アニメーション」というのをやりました。

svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。

自分のサイトの備忘録「tips」にアップしました。
manakadesign

manaka design/tips
「SVG LINE アニメーション・基礎編 2014-05-05」という記事をご覧下さい。

このページにも直接説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。どなたかチャレンジを!