タグ

ブックマーク / webdesignrecipes.com (11)

  • 使えるギャラリーにする方法

    WordPress のギャラリー機能使っていますか? 使いにくい WordPress のギャラリーをちょっと使えるようにするカスタマイズです。 ものすごく長くなってしまいました ... できるだけ簡単にまとめてみたので興味があるひとはぜひ読んでみてくださいね! Webサイトで写真を一覧表示したいときに、よく使われているギャラリー。WordPress のテーマにも、Webサイト全体をギャラリーみたくするものも、数多くありますよね!でも普段はブログや一般的な Webサイトとして使っていて、その中の数ページをギャラリーページとして使いたい … ってこともあると思います。 私の場合、ギャラリーを jQuery のプラグインと組み合わせて作成する事が多いので、WordPress のギャラリー系のプラグインは使ってません(おすすめのギャラリー系、画像管理系のプラグインがあったら教えて欲しいです)。 ま

  • パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)

    タイトルはパンくずリストなんですけど、パンくずリストを紹介する記事ではありません。でも、パンくずリストを自分で作ってみると分かるんですけど、パンくずリストのコードには、WordPress でのサイト構築のノウハウが詰まっているなーって思います。なのでパンくずリストを作りながら、WordPress でのサイト構築の考え方みたいなものを紹介する感じの記事になっています。 WordPress でブログじゃない Web サイト構築をするとき、サイトの構造によってはサイドバーなどを自分でカスタマイズしなくてはいけません。例えば固定ページを作ったら、親ページでは子ページへのリンクを表示したりとか、逆に子ページでは親ページのリンクを表示したりとか …。もちろんリンクだけじゃなくて、アイキャッチ画像なんかも一緒に表示したいこともあったりします。一般的な Webサイトを WordPress で作ろうとすると

    aoiasaba
    aoiasaba 2014/11/10
    ★現在いるページから色々取得する方法
  • functions.phpに書いておくといいかもしれないコードいろいろ

    WordPress の便利なオプションファイル functions.php。 これに数行追加するだけで、当にいろんなことができちゃいます。今回は、functions.php に書いておくといいかもしれないコードをいくつかまとめてみました。 WordPress のテーマの中で利用する functions.php。このファイルがかなり便利で、私はいろいろと functions.php に書き込んでいます。よくプラグインとかウィジットを使えばいいじゃないかーとも言われたりしますが、プラグインは厳選して重要なものだけを使って functions.php でできるものは、できるだけそうしたいなーと思っています。 プラグインが増えればその分ファイルの読み込みが多くなって、少なからず速度も落ちるかな … とか、プラグインの管理ページがごちゃごちゃするのがイヤだーとか、そんな程度の理由なんですけど …。

  • WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ

    WordPress をカスタマイズするなら覚えておきたい条件分岐タグと、カスタマイズにとっても便利なカスタム投稿タイプについて、簡単にまとめてみました。 WordPress をカスタマイズするなら、必ずと言っていいほど使うのが条件分岐タグ。ブログとして Webサイトを構築するなら、とってもよく使う … というほどではないかもしれませんが、一般的な Webサイトを WordPress で構築していくとなると、動的な Webサイトであればあるほど、条件分岐タグはよく使います。 また、話は変わっちゃいますけど、WordPress 3.0 から格的に採用された新機能、カスタム投稿タイプも、WordPress でのサイト構築にはかなり便利です。おなじみの条件分岐タグから、カスタム投稿タイプ、タクソノミーまでを、メモっぽくまとめてみました。 WordPress サイト構築 Tips 目次 WordP

  • イメージスライダーを付けてみよう

    それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね! それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像

    aoiasaba
    aoiasaba 2014/02/06
    <script>タグ使用時
  • はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

    初めて WordPress でオリジナルテーマを作ろうと思ったとき、真っ先に参考にしたいのが公式のデフォルトテーマだと思います。でも最近のデフォルトテーマは、ちょっといろいろな機能もついていて複雑な構造をしています...。今回は初めて WordPress でオリジナルテーマを作りたい!っていう人向けに、シンプルなテーマをもとに制作フローをまとめてみました。サンプルはダウンロードしてご活用ください。 WordPress もバージョンアップを重ねて、最近では 3.5 になりました。それに伴ってデフォルトのテーマも、新しい TwentyTwelve になりました(2013年 1月現在)。WordPress で初めて自分だけのオリジナルテーマを作ろうと思うと、まず最初に参考にしたいのがデフォルトテーマ …。でも最近のデフォルトテーマは、ちょっと難しい構造になってる … と思ったりしませんか? 私が

  • ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

    ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します! 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max

  • CSSで気をつけたい事やつまづいたときのちょっとしたコード

    Webデザイナーにとって、必須のスキルである CSS ...。スタイルシートを書くときに普段から気をつけてることや、あれ?これってどうやってやるんだっけ?となかなか覚えきれないものをちょっとまとめてみました。またサンプルも作ってあるので合わせて見てくださいね! Webサイトを作っていると、CSS でつまづくことがたくさんあります。初心者の頃は、CSS で思うようなレイアウトやデザインを描けない事が何度もありました。また各ブラウザ間の表示の差異もあって、ますます壁が高いなーと感じてました。 今回は後々メンテナンスが楽になる CSS の書き方や、気をつけたい事、つまずいた時に「そういえばこうだった」的なものを集めてみました。後半はコードのまとめになってます。 CSS の注意書き 目次 (X)HTMLを書く時に気をつけたい事 スタイルシートを読みやすく書く CSSのブラウザのバグを把握、知ってお

    aoiasaba
    aoiasaba 2012/02/08
    長英文改行
  • Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ

    色んな Webサイトを見ていると、1px にこだわって作られたキレイなデザインがたくさんあります。私は Photoshop を使っているので、Photoshop のレイヤースタイルを使って、1px の細かい所を作る Tips をまとめてみました。基的な操作ばかりなので、これから Photoshop で Webデザインをやってみたいなーという人向けの記事です。 色んな素敵なデザインの Webサイトを観察していると、1px の細かいところまでこだわって作られてるデザインってとても多いですよね。1px … Webデザインでは一番小さいサイズ。「神は細部に宿る」という言葉もあるけれど、1px までしっかり作られたグラフィックはとても美しいですね! 今回は Photoshop を使って、いろんな 1px を作ってみました。とは言っても難しいグラフィックデザインを作るわけではなくて、レイヤースタイル

  • デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

    Webデザインは、紙の上のデザインと違うところも多いと思います。でも同じデザインですから、歴史ある DTP デザインから学ぶことはいっぱいあります。デザインの基礎の基礎、レイアウトについて、デザインするときに気をつけたい基礎の部分の注意書きです。 毎日インターネットを見ていると、素敵なデザインの Webサイトに出会います。ときにはひと目惚れしちゃうようなこともあります。そんなデザインにあったとき、どうして素敵なのかなーと考えるのも勉強のうち。そう思って素敵なデザインはストックしておいて、自分なりにそのデザインが素敵な理由を考えてたりします。 デザインの理由 どうしてそういうデザインをしたのか … デザインには理由があります。気まぐれに色を選んだり、要素を配置したりしないからです。なので自分のデザインの理由、どうしてそういう風にしたのかということを、口で説明できないとダメだと言われます。もち

  • WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方

    WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも!そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS(コンテンツマネージメントシステム)というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン

  • 1