目次 中々の大作になってしまったので目次付けときます。 ↓目次を表示する まえがき KoToRiは最近まで「Custom Field Template」を愛用していました。 使い方を詳しく説明した記事も書きました。詳しく書き過ぎて見てくれた人にコメントで注意もされました笑 Custom Field Templateの使い方[WordPress] でも最近『Advanced Custom Fields』に乗り換えました。 理由はいろいろあるのですが一番の理由は編集画面に表示されるフィールドが見やすいからです。 管理画面をなるべく使いやすくカスタマイズするという事に重きを置くようになったのです。今更ですが。 でも調べていくうちに『Advanced Custom Fields』の柔軟性にビビりました。 みなさん、このプラグインが無料なのは凄いことです！ なので『Advanced Custom F

カスタム投稿タイプとカスタムタクソノミーについてまとめました。結構詳しくまとめた（つもりな）のでこの記事を参考にすればカスタム投稿タイプを使用して基本的なことは出来るようになると思います。 まえがき カスタム投稿タイプとカスタムタクソノミーについてまとめました。 カスタム投稿タイプを使ってWordPress標準の「投稿」とは別の独立したブログコンテンツを作成する時に必要になりそうな項目をピックアップして解説します。 カスタム投稿タイプとカスタムタクソノミーを覚えるとできることの幅が格段に広がりますので抑えておいて損は無いと思います。 目次 カスタム投稿タイプとカスタムタクソノミーの概要 カスタム投稿タイプとは カスタムタクソノミーとは タームとは カスタム投稿タイプ&カスタムタクソノミーの作成 カスタム投稿タイプのパーマリンク設定 カスタム投稿タイプのテンプレートやタグ カスタム投稿タイプ

WordPressのショートコードを自作してみる Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。 そんなときに便利なのがショートタグです。 投稿日2010年07月11日 更新日2011年04月03日 ショートタグは投稿記事に[]（ブラケット）内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。 で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。 プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。 たぶん一番シンプルなショートコード ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコード

※2018.03.01追記：4年半経ちましたが、今のところはおおむねこの記事のままで大丈夫と思ってます。定期的にチェックするのは大事。 今年に入ってから、「クエリ変更はquery_postsかpre_get_postsか」という話題がWordPress中級者以上の間では盛り上がっていましたが、初心者コピペWordPressユーザーの多くの方には「お前ら何を言っているんだ」ということでしょう。 実際、WordPress日本語フォーラムに投稿される質問の中でも、必要ないところでquery_postsを使って表示がおかしなことになっているケースがあとを絶ちません。 古い記事が検索上位に出ている現状 なぜ同じようなトラブルが減らないのかといえば、Googleで「WordPress　新着記事」「WordPress 新着情報」などのワードで検索した時、上位に表示されている記事が結構古いものが多いのにも

WordPressに標準装備されているウィジェットで、自作のウィジェットを作成してみよう、という内容です。便利な機能で、クライアントワークでは割と必須ですけどあまり情報がない印象だったので復習をかねて書いてみました。 WPのウィジェットに追加できるアイテムボックスを自作する、という方法です。基本的な事しか書いてません。なので、WordPressテーマ開発のビギナーさん向けになります。 ウィジェットをテーマで使えるようにするまずはおさらい。利用しているテーマでウィジェットを使えるようにするには、その為のコードを書く必要があります。 何もしていない状態ですと、上記のようにウィジェットページには注意文しか表示されません。 まずは利用可能にする利用するためには以下のようなコードを利用中のテーマファイル内にあるfunctions.phpに書きます。 if ( function_exists('reg

株式会社ビデオエイペックス 営業時間 10:00～18:30 古物営業法に基づく表示 株式会社ビデオエイペックス 東京都公安委員会303311007316

海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー

海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ

「数字」にフォーカスを当て、書体の選びかたやデザインの秘訣ガイドラインを学びながら、実際に使えるフリーフォント素材20個をまとめてご紹介します。 数字デザインを選ぶときの原則事項 著者 Samantha Zhang の働く Graphiq では、データ表やチャート、インフォグラフィクスなど、細かい数字をいつもたくさん扱っています。データの視覚化では、 ほとんどのデータで Helvetica（ヘルベチカ）書体を利用していますが、フォントを選ぶときのガイドラインがいくつあります。 1. ライニングと等幅ライニング数字を選ぼう。 まずよい数字フォントを選ぶコツとして、ライニングまたは等幅ライニング数字かどうか確認しましょう。 ライニング数字（英: Lining　Figures）とは、ベースライン（英: Base Line）とキャップ・ハイト（英: Cap Height）の高さが揃っていることを指

要素に影を落とすためのbox-shadowを確認するためのジェネレーターです。 各種プロパティなどページ下部に詳しい説明を書いてあります。 filter関数のdrop-shadowやReact Nativeのshadowのジェネレーターは別ページになります。 /* preview */ width: 200px; height: 60px; background-color: #3cb371; /* border-radius */ border-radius: 30px; /* box-shadow */ box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);

レスポンシブレイアウトやスマートフォンサイトを簡単に作れるBootstrap3。数あるCSSFrameworkの中でも特に人気が高く、もはや業界標準と言っても良いくらいメジャーになっています。 そんなBootstrap3をさらに使いやすく便利にしてくれるのがプラグイン。海外でも人気の高いCSSFrameworkなので開発も活発で様々なプラグインやアドオンが出ています。ありがたいことにその多くは無料！ このページではBootstrap3のための使いやすい無料プラグイン５０こまとめを紹介します。 Bootstrap3のプラグインまとめ Bootstrap-Calendar Bootstrapで作られたカレンダー。これ自作しようと思うとけっこう大変なのでこういったプラグインがあると助かります。 prettyCheckable デフォルトだとちょっと無骨な感じのチェックボックスですが、いけてるスタ

[fancy_box]この記事は海外デザインブログScotch.ioで公開された「Bootstrap 3 Tips and Tricks You Might Not Know」と「Bootstrap 3 Tips and Tricks You Still Might Not Know」の著者Nicholas Cerminaraより許可をもらい、ポイントをまとめて抄訳しています。Thanks again, @nickforthought!![/fancy_box] Twitter謹製フレームワークBootstrap 3は、フロントデベロッパーの開発スピードアップの手助けをしてくれる機能が多数収録されています。ときには特別なコンテンツのためにCSSやJavaScriptを使ってプログラムした後に、Bootstrap初期設定だけで解決できることに気付いたことがあるかもしれません。 これではWeb

TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル

<!-- toggle --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- brand --> <div class="navbar-header"> <a class="navbar-brand"

フイルムで撮ったような写真を撮る、僕なりの方法を教えます。 僕がフイルム感を出したい時に撮る時の方法、 その１−ピントはデジタルカメラのマニュアルで撮る。 AFで撮ると、ピントがガチッと合い過ぎるのです。 フイルムカメラで撮ったことがある人はわかると思いますけど、 ピントが合ってるかどうかわからない微妙な感じがいいのです。 その２−レンズは単焦点を使う。 ズームレンズよりボケ味がいいのです。 僕は、いつも５０㎜を使っています。 理由は、目で見てる感じに近いからです。 その３−絞りは解放値に近い値で撮る。 f2.8のレンズだったらf2.8〜f4くらいの値で撮ってます。 理由は、２と同じで背景がボケ感を出したいからです。 その４−明るさは、適正露出より２分の１〜１段くらい明るくしています。 理由は、僕が「これって露出オーバー？」と感じるくらいな絵が好きだからです（笑） その５−室内の場合、スト

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