passwordとportは最初コメントアウトされていますが、スラッシュを外して入力しておくことで、毎回聞かれなくて済みます。 設定がよくわからない　って方は、ロリポップ！の場合ですが、どこにどの項目を設定するのか載せておきますね。 その他の項目は適宜に応じて設定して下さい。詳しくはよくわかりません… 「SFTP」でアップロードしてみようここまでの設定が済んだら、アップロードが出来る状態になっているはずです。 対象のファイルを左のプロジェクトフォルダーから選び、右クリックします。 「SFTP/FTP」とあるので、その先の「Upload File」をクリックします。 サーバーへの接続状況が画面下部に出ます。 ここで、設定がうまく言っていれば、successと出てアップロード完了です！ ちなみにフォルダを右クリックして同様の手順を踏むと「Upload Folder」があり、フォルダごとまとめて

前回の WordPress 記事のいろんな情報を取得する の流れで今回はカスタム投稿タイプの投稿タイプの情報取得します。 get_post_type_object(get_post_type()); でカスタム投稿タイプの情報が取得できます。get_post_type()にポスト名指定すれば個別に取得することも可能です。 カスタム投稿タイプのラベルを表示させたい時は <?php echo esc_html(get_post_type_object(get_post_type())->label ); ?> このような感じです。 また、カスタム投稿タイプの投稿タイプ概要を表示。 投稿タイプ概要 esc_html(get_post_type_object(get_post_type())->description); 結果：動物に関する記事です。 投稿タイプ名（スラッグ） esc_html(g

目次 中々の大作になってしまったので目次付けときます。 ↓目次を表示する まえがき 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('r

キヤノンEFマウントのレンタル商品一覧キヤノンデジタル一眼レフカメラ用EFマウントの交換レンズレンタルです。

海外サイト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"