最近の覚書やメモ

Web 制作に関する個人的な覚書やメモです。記事中の内容やコード等には、誤りなどもある可能性があることをご了承ください。また、内容を利用される場合は、あくまでもご自身の責任においてご利用ください。

New Web 制作リファレンス
もう少し整理された形式のWeb制作参考資料です。

jquery jQueryで文字数により表示幅を変える

2013年4月17日

コードなどを記述する pre 要素の overflow を auto にしている時、1行の文字数が多い場合マウスオーバーすると幅が自動的に広がるようにする。 このサイト(例)の場合、google-code-prettify を使ってコードの記述部分をシンタックスハイライトするようにしていて、行番号を表示する場合は、番号リスト(ol)で出力され、そうでない場合…

続きを読む

wordpress WordPress でカテゴリーのリストを出力する

2013年4月16日

WordPress でカテゴリーのリストを出力するには、wp_list_categories() を使って簡単に出力できるが、除外するカテゴリーは ID で指定しなければならなかったり、li 要素の前に画像を出力することができなかったりと微調整が難しい。また、毎回「get_categories()」を使って記述するのも面倒くさい。 そこで自前でリストを出力す…

続きを読む

jquery WordPress で jQuery を使い画像のパスを指定する場合の注意

2013年4月16日

テーマのテンプレートは、wp-content/themes/themeに置かれているが、ブログで表示される場合は、wp-contentと同じ階層にある、index.phpとして表示される。 このため、相対パスで記述するとリンク切れが発生してしまう。 以下のように jQuery で記述した場合、画像は表示されない。 フルパスで記述すると、画像は表示されるように…

続きを読む

jquery jQuery でリストの中に入れた画像の垂直位置を中央にする

2013年4月15日

次のような場合、画像の大きさや、line-height の値によって、画像がうまく中央に位置しないことがある。 このような場合、outerHeight()を使って、画像を中央(垂直方向)に表示することができる。 この時、CSS は、画像要素の「position」を「absolute」にして、その親要素の li 要素の「position」を「relative」…

続きを読む

wordpress wp_list_categories()で出力したリストの背景画像を変更する

2013年4月15日

WordPress で wp_list_categories()で出力したリストに CSS で背景画像を設定して、マウスオーバーしたときに表示するようにする。 CSSは jQuery でまず、「background」を「none」にしておく。 マウスオーバーしたら、背景画像を指定して、マウスアウトしたら、「background」を「none」にする。 Wor…

続きを読む

wordpress WordPress でパンくずリストを出力する

2013年4月15日

プラグインを使わずに、パンくずリストを出力する方法。 以下のサイトにとても丁寧でわかりやすい解説があったので、それを元にカスタム投稿タイプやカスタムタクソノミーにも対応するように、このサイト用に作成してみたもの。 「パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(Web Design Recipes)」 パラメータ…

続きを読む

wordpress WordPressの本文エリアでビジュアルエディタを表示させない方法

2013年4月14日

管理画面の本文エリアで、テキストエディタで入力して pre タグ内にインデントをつけるためにタブを挿入しておいて、その後ビジュアルエディタに切り替えると、インデントの空白(スペースやタグ)が削除されてしまう。 これは、WordPressの自動整形機能によるものなので、取り合えずよい方法が見つかるまでは、ビジュアルエディタを使用しないようにするために、以下の方…

続きを読む

wordpress WordPressのショートコードでシンタックスハイライト

2013年4月14日

追加情報 WordPress 4.2.3 から以下のショートコードの方法では、シンタックスハイライトがうまく表示されない場合があります。 これは、セキュリティの問題で wp-includes の中の shortcodes.php が大幅に書き換えられたためです。 すでに以下の方法を使っている場合の暫定的な解決方法としては、shortcodes.php を W…

続きを読む

wordpress 静的 HTML に WordPress の投稿を表示する

2013年4月12日

ブログなど特定部分だけをWordPress管理下とするようなサイトを構築する際、トップページに投稿の新着情報を表示するには WordPress の”wp-load.php”をインクルードする記述を追加する。 具体的には、 index.html を index.php にリネームして PHPを使えるようにする。 リネームした index…

続きを読む