Web 制作に関する個人的な覚書やメモです。記事中の内容やコード等には、誤りなどもある可能性があることをご了承ください。また、内容を利用される場合は、あくまでもご自身の責任においてご利用ください。
New Web 制作リファレンス
もう少し整理された形式のWeb制作参考資料です。
2013年4月17日
コードなどを記述する pre 要素の overflow を auto にしている時、1行の文字数が多い場合マウスオーバーすると幅が自動的に広がるようにする。 このサイト(例)の場合、google-code-prettify を使ってコードの記述部分をシンタックスハイライトするようにしていて、行番号を表示する場合は、番号リスト(ol)で出力され、そうでない場合…
2013年4月16日
WordPress でカテゴリーのリストを出力するには、wp_list_categories() を使って簡単に出力できるが、除外するカテゴリーは ID で指定しなければならなかったり、li 要素の前に画像を出力することができなかったりと微調整が難しい。また、毎回「get_categories()」を使って記述するのも面倒くさい。 そこで自前でリストを出力す…
2013年4月16日
テーマのテンプレートは、wp-content/themes/themeに置かれているが、ブログで表示される場合は、wp-contentと同じ階層にある、index.phpとして表示される。 このため、相対パスで記述するとリンク切れが発生してしまう。 以下のように jQuery で記述した場合、画像は表示されない。 フルパスで記述すると、画像は表示されるように…
2013年4月15日
次のような場合、画像の大きさや、line-height の値によって、画像がうまく中央に位置しないことがある。 このような場合、outerHeight()を使って、画像を中央(垂直方向)に表示することができる。 この時、CSS は、画像要素の「position」を「absolute」にして、その親要素の li 要素の「position」を「relative」…
2013年4月15日
WordPress で wp_list_categories()で出力したリストに CSS で背景画像を設定して、マウスオーバーしたときに表示するようにする。 CSSは jQuery でまず、「background」を「none」にしておく。 マウスオーバーしたら、背景画像を指定して、マウスアウトしたら、「background」を「none」にする。 Wor…
2013年4月15日
プラグインを使わずに、パンくずリストを出力する方法。 以下のサイトにとても丁寧でわかりやすい解説があったので、それを元にカスタム投稿タイプやカスタムタクソノミーにも対応するように、このサイト用に作成してみたもの。 「パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(Web Design Recipes)」 パラメータ…
2013年4月14日
管理画面の本文エリアで、テキストエディタで入力して pre タグ内にインデントをつけるためにタブを挿入しておいて、その後ビジュアルエディタに切り替えると、インデントの空白(スペースやタグ)が削除されてしまう。 これは、WordPressの自動整形機能によるものなので、取り合えずよい方法が見つかるまでは、ビジュアルエディタを使用しないようにするために、以下の方…
2013年4月14日
追加情報 WordPress 4.2.3 から以下のショートコードの方法では、シンタックスハイライトがうまく表示されない場合があります。 これは、セキュリティの問題で wp-includes の中の shortcodes.php が大幅に書き換えられたためです。 すでに以下の方法を使っている場合の暫定的な解決方法としては、shortcodes.php を W…
2013年4月12日
ブログなど特定部分だけをWordPress管理下とするようなサイトを構築する際、トップページに投稿の新着情報を表示するには WordPress の”wp-load.php”をインクルードする記述を追加する。 具体的には、 index.html を index.php にリネームして PHPを使えるようにする。 リネームした index…