タグ

ブックマーク / www.webopixel.net (5)

  • WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう

    Posted: 2012.06.20 / Category: WordPress / Tag: テンプレートカスタマイズ, 管理画面 WordPress3.4からテーマカスタマイザーとい機能が追加されテーマファイルを編集しなくても管理画面から色や画像などリアルタイムで確認しながら編集できるようになりました。 この記事ではテーマカスタマイザーの使用方法とカスタマイズ方法をご紹介します。 テーマカスタマイザーの使い方 WordPressの管理画面で左メニュー「外観」→「テーマ」で「テーマ管理画面」を表示し、「カスタマイズ」ボタンをクリックします。 テーマカスタマイザー画面が表示されます。 何も設定していなくても「サイトタイトルとキャッチフレーズ」と「固定フロントページ」という項目があります。 たとえばテーマファイルで下記のように設定してあると、「サイトのタイトル」などの変更箇所がリアルタイムで

    WordPress3.4のテーマカスタマイザーで自由度の高いテーマを作ろう
  • jQueryでスクロールすると表示する系いろいろ

    jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

    jQueryでスクロールすると表示する系いろいろ
  • jQueryでHTML5の独自データ属性(data Attributes)を扱う

    Posted: 2011.07.01 / Category: HTML&CSS, javascript / Tag: HTML5, jQuery HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッ

    jQueryでHTML5の独自データ属性(data Attributes)を扱う
  • jQueryでマウスオーバーすると全体的にピカーンってなるやつ

    jQueryでマウスオーバーすると全体的にピカーンってなるやつ マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。 投稿日2011年10月11日 更新日2011年10月12日 準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。 ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法 一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして

    jQueryでマウスオーバーすると全体的にピカーンってなるやつ
  • jQueryのAjaxを使用して外部htmlを読み込む

    Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな?</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ

    jQueryのAjaxを使用して外部htmlを読み込む
  • 1