サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
会話術
designsupply-web.com
以前の記事「Gulpで使…
全世界で圧倒的なシェアを誇るCMSであるWordPressですが、常々いろんな驚異の対象となっています。当サイトでも過去記事
あまり使う場面はないと思うのですが、触る機会があったので豆知識的な感じで残しておきたいと思います。通常、iframeは外部のリソースを読み込むため、直接iframeのDOM要素にアクセスできません。そこでjavascriptを使ってiframeのDOM要素にアクセスしていきます。 まずはiframeを呼び出すベースのHTMLを見ていきます。今回はiframe外の要素にイベントを設定し、iframe内の要素を操作する例で進めていきます。トリガーとなる要素と、iframeの要素を用意します。 【HTML】※一部抜粋 <body> <button id="trigger">クリックでiframe内の要素が変化します</button> <iframe src="20190515-iframe.html" id="elem"></iframe> </body> そして、iframeとして表示するHT
前回記事「Vueインスタ…
特定の要素以外をクリックした時に何らかの機能を実行するのは、モーダルやポップアップのウィンドウを閉じたりする時に便利です。jQueryを使うことで簡単に実装できるので備忘録としてのメモです。 クリックイベント…
前回記事「Laravel…
最近のウェブサイトデザインでよく見かける印象がある、画像やテキストなどのコンテンツをアニメーションのマスクで表示させる動きをSass(とjavascript)で作成してみたいと思います。アニメーションの動きや速さを調整したりすることで、い…
Vue.jsではjQueryのように、直接DOMを参照してそのDOMに対して何らかの操作をするというケースはあまりありません。コンポーネントとして取り扱ったり、コンポーネントにあるテンプレート内で直接的に要素に対して操作するためです。 とは言っても、要素固有の座標位置や高さなどのDOMが持つ情報を取得して、何らかの処理を行いたい場合には、直接DOMを参照するような場合も出てきます。Vue.jsでは直接的にDOMを参照する際に「$el」や「$refs」などのプロパティが用意されており、これらを使うことで直接コンポーネント内のDOMを参照することができます。 コンポーネントのルート要素を取得する「$el」 「$el」を使うことで、そのコンポーネントのルート要素にあたるDOMを参照することができます。下記のようにVueコンポーネントファイル内のscriptで使うと、そのコンポーネント内のルート要
ウェブサイトのデバッグ時に拡張子が「.map」という見覚えのないファイルが404エラーになっていたことはありませんか?今回はこのケースについて備忘録を残しておきます。 ソースマップファイル(.map)とは
先日クライアントワークで、CSVで管理しているデータをサイト上に表示させたいというような要件があり、いろいろ調べてみるとJavaScriptで出来そうという情報が見つかったので試してみました。CSVとは半角コンマで区切られた値のことで、詳…
少し前にウェブデザインのトレンドとしてよく見られた、全画面表示の動画背景ですが、クライアントワークでも採用する機会があり、今更感はありますが備忘録として残しておきたいと思います。 今回は動画を背景にするのに加えて…
2019年一発目の記事投稿です。今年も当サイトのオウンドメディアをよろしくお願いいたします。ありがたいことに新年早々、コーディング作業に追われているところで、その時に使えそうなものをメモしておきたいと思います。今回はタイトルの通りなのですが、ページの自動リロードを一定時間ごとに行うものです。最近ではスポーツのリアルタイム実況サイトなどでよく見かける機能ですね。 コーディング作業中は基本的にGulpでいろんなタスクを走らせており、その中でもファイル更新のタイミングでローカルサーバーと連携したページの自動リロードなどを使っています。(参考記事「Gulp + Browsersyncを使ったブラウザ自動リロードでコーディング効率化を目指す」) これも大変便利なのですが、使っているうちにメモリ消費量がかなり増えてきて、だんだんPCの動作が重たくなってくることもしばしばあります。。特に開発専用のPCで
コーディング時にはいろんなルールや規約を設けることが多いかと思いますが、中でも重要なのが命名規則だと思います。細かいようですが、この命名規則についてルールを設けておくことで、複数人での開発をスムーズにしたり、改修時の工数短縮にも効果的です…
クライアントワークでこのようなケースがあったので備忘録としての記事です。WordPressでは親カテゴリー、子カテゴリーとカテゴリーに階層構造を持たせることができます。しかし子カテゴリーが多くなってくると機能的に複雑になってきたり管理が大変になったりします。そこで子カテゴリーではなく属する親カテゴリーでの条件分岐やページテンプレートで扱いたいという時に使える小技になります。 1. 子カテゴリーが属する親カテゴリー別での条件分岐 post_is_in_descendant_category関数というものを使用します。まずはfunctions.phpに下記を記述して関数の定義を行います。 【functions.php】 if ( ! function_exists( 'post_is_in_descendant_category' ) ) { function post_is_in_desce
HTMLのフォーム要素ですが、ウェブサイトなどではよくデザインが変更されているものを見かけます。基本的にはこれらフォーム要素を直接デザインするのもあれば、要素自体は非表示にして対応するlabel要素に対してデザインするという場合もあります。 ただしfile要素についてはなかなかクセがあるのでデザイン変更には少し複雑な方法となります。今回はCSSとjQueryを使ってこのfile要素のデザインをフルカスタマイズする方法を見ていきたいと思います。 まずはHTMLからコードを見ていきます。input要素自体を囲うラッパー要素を用意し、その中にinput要素とlabel要素を入れておきます。この時input要素とlabel要素が対応するようにid属性とfor属性で紐づけておきます。 【HTML】※一部抜粋 <div id="input-group"> <input type="file" id="
前回記事「ベーシック認証を使用して簡易ログイン機能を作成する」でサイト内にログイン機能を実装する方法…
今回はHTMLのdata属性(カスタムデータ属性)を使ってシンプルなツールチップを実装してみます。このdata属性はdata-*****の表記で自由な属性名を定義できるカスタムデータ属性というHTML5で定義されている仕様になります。ちな…
ajaxはjavascriptを使った非同期通信という技術で、様々なウェブサイトで使用されています。jQueryを使うことでこのajaxも手軽に実装できるのですが、今回はajaxで他ページからのコンテンツを呼び出して表示させる便利なサンプルを作成してみたいと思います。 ページをURLで指定して、要素内にHTMLとして出力 サンプルコードと合わせてみていきたいと思います。まずは取得したいコンテンツ(=要素)があるページのURLを指定します。そして、find関数で取得する要素を取得し、その要素を変数へ格納させ、表示させたいHTMLの中の要素へappend関数で出力します。 【sample.html】※一部抜粋 <body> <script> $(function(){ $.ajax({ url: 'http://example.com', // 表示させたいコンテンツがあるページURL
function output_title() { add_theme_support('title-tag'); } add_action('after_setup_theme', 'output_title'); タイトルタグの区切り文字変更 function rewrite_separator($separator) { $separator = '|'; return $separator; } add_filter('document_title_separator', 'rewrite_separator'); 上記の方法でタイトルタグを自動生成した場合、区切り文字はハイフンとなりますが、この処理を加えることで、区切り文字を任意のものに変更することができます。 アイキャッチ画像の有効化とオリジナルのサムネイルサイズの定義 add_theme_support('post-thum
普段のデザイン制作にはSketchを使っていて、制作自体はかなり効率化ができてきたのですが、デザインデータの共有時にはいろんなロスが発生してもう少しスムーズにできないかと考えていました。そんな時にはとても便利なZeplinというツールを使って、チーム内でのデザイン制作フローを効率化することができます。 今回はSketchにてデザイン制作をした場合にZeplinを使った連携方法を、導入段階からまとめていきたいと思います。 デザインデータの情報をオンラインで共有できる「Zeplin」 ZeplinはSketchやPhotoshopなどで作成したデザインデータの情報を確認することができるツールで、スタイルガイドの作成や修正指示に使います。オンライン上で共有することもできるので、複数人でのチーム内制作などで威力を発揮します。 また、制限はありますが無料で使うこともできるので、導入のハードルも低いの
まとめサイトなどでよく見かけるコンテンツの見出し項目に合わせたナビゲーションを実装していきます。ナビゲーションからコンテンツ位置までの移動はもちろん、スクロールした現在地に合わせてナビゲーションで確認できるようにします。 HTMLでページ内アンカーとナビゲーション部分を用意 まずは各コンテンツへのページ内アンカーが機能するようにしておきます。そして、それらのページ内アンカーに対応したナビゲーションをリストなどで作成しておきます。また初期設定としてナビゲーションの最初の項目には現在地を示すclassを充てておきます。 【HTML】※一部抜粋 <!-- コンテンツ部分 --> <div id="content01"> </div> <div id="content02"> </div> <div id="content03"> </div> <div id="content04"> </div
タイトルの通りですが実装にあたり結構行き詰まったので残しておきたいと思います。本来ページャーはアーカイブページ内であったり、メインループではそのまま使用できますが、固定ページやサブループではページャーがうまく機能しないなどの問題が発生します。 例として今回は固定ページでカスタム投稿の表示条件を指定したサブループを前提として進めていきます。ループの出力はこんな感じです。下記では通常投稿のカスタム分類「taxonomy01」に属するターム「term02」を持つ記事を12件ずつ表示させるという内容になっています。 【page.php】※一部抜粋 <?php $paged = get_query_var('paged') ? get_query_var('paged') : 1; $args = array( 'posts_per_page' => 12, 'paged' => $paged, '
過去記事「jQueryで作成するフォームバリデーション」ではjavascriptを使ったクライアントサイドのフォームバリデーションを紹介しましたが、この形ですとソースコードの書き換えがあったり、そもそもjavascriptがオフになっている場合は使えなくなってしまいます。そこでサーバーサイドでもしっかりとバリデーションを行うことが大切です。 今回はメールフォームにサーバーサイドバリデーションを実装していきたいと思います。使用するフォームですがこれまでにPHPでコンタクトフォームを作成する記事で紹介したものをベースに進めていきます。過去記事にありますので下記をご参考に。 【関連記事】 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(入力画面)」 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面) 」 「PHPで自動返信メール機能付きのコンタクトフォーム
最近は常時SSLの重要性が高まってきますが、さくらインターネットのレンタルサーバーでWordPressサイトを使用している場合には、常時SSL対応時に少し注意が必要です。SSL非対応からの変更になると常時SSL対応後に外部ファイルパスが変わらないなどで表示がおかしくなってしまう場合もあります。 そこで下記コードをWordPressの設定ファイルである「wp-config.php」を追記します。 【wp-config.php】(一部抜粋) if( isset($_SERVER['HTTP_X_SAKURA_FORWARDED_FOR']) ) { $_SERVER['HTTPS'] = 'on'; $_ENV['HTTPS'] = 'on'; $_SERVER['HTTP_HOST'] = '【DOMAIN NAME】'; $_ENV['HTTP_HOST'] = '【DOMAIN NAME
WordPressはコンテンツが投稿されるごとにページが生成される動的サイトですが、合わせてページURL(パーマリンク)も合わせて生成されます。ですので下層コンテンツページなどはURLの形が決まっており、WordPressとは別にディレクトリを用意した静的HTMLページと重なりアクセスできない場面があります。今回はそんなケースに使える小技です。 静的サイトのディレクトリにアクセスすると「page not found」の表示が… WordPressの場合、一般的には下層ページのURLは以下のような構成になっています。末尾のファイル名は省略された形になっています。 http://example.com/content-01/ この時、WordPressサイト内にある該当の固定ページやアーカイブページを参照し表示されることになりますが、以下の構成のようにディレクトリ名が同じ静的HTMLサイトを設
connecttothefutureヒト、モノ、サービスを繋げる新しい価値をクリエイト our valuesウェブサイトが価値を生む資産に変わるウェブサイトはビジネスにおける大切な資産です。コンテンツを作り情報を発信し続けることで、あなたのビジネスを成功へ導く強力なツールとなります。でもウェブサイトをただ作って公開しているだけでは本来の価値を生み出すことは難しいでしょう。時間をかけてでもしっかりと育てていくことが重要です。合同会社デザインサプライでは、本当に価値のあるウェブサイトをクライアント様と共に作り上げていくことをポリシーとしています。 制作のコンセプト
WordPressではデフォルトで用意されている投稿の他にもユーザー側で独自に設定できるカスタム投稿があります。このカスタム投稿における、カテゴリーなどの分類にあたるものがカスタム分類(タクソノミー)になります。カスタム分類内では分類項目がタームと呼ばれ、このタームも文字列などとして表示させたり、タームのスラッグ名を取得することができます。 カスタム分類のタームを表示させ、さらにスラッグを取得しclass名に指定するなどができる、ターム名まわりの記述方法をまとめていきたいと思います。 カスタム分類のターム名を表示させる まずは、基本となるターム名を文字列として表示させる方法です 【PHP】 <?php if ($terms = get_the_terms($post->ID, 'タクソノミー名')) { foreach ( $terms as $term ) { echo ('<span>
リッチなコンテンツを求められるウェブサイトの場合はクライアント側で動きのある機能が効果的です。その中でも比較的よく見かけるのがページローディング機能です。ページの読み込み次第ではどうしても表示順序がバラバラになってしまうのでちょっと不恰好な印象を与えてしまう可能性もあります。 そこでページの読み込みの間にローディング画像を加えることで、すべて読み込みが終わってページコンテンツが揃った状態で表示できるのと、動きのある機能を加えることで洗練された印象を与えることができます。 ではコードを見ていきたいと思います。まずはHTMLから、ページローディングの要素は最初に持ってきます。その後にメインのコンテンツが続きます。ページローディングの構成ですが、全体を覆うラッパー要素とその中にローディング中を示すアイコンを入れています。こちらについてはデザインによって適宜アレンジするのもいいかと思います。 【H
パララックス効果を採用したサイトが一時期ブームになっていましたが、それに合わせてたくさんのプラグインが登場しました。ただプラグインで実装しようとすると細かなカスタマイズが面倒だったりと少し使いづらい面もあります。 そこで今回はプラグインを使わず、カスタマイズしやすいパララックス効果を実装していきたいと思います。 1. CSSのみで実装する背景固定のパララックス効果 背景画像を固定にすることで、スクロールした時にコンテンツエリアが前面にあるように見せる方法です。わかりやすいパララックス効果になります。 【HTML】 <div class="wrap"> <div class="parallax bg-01">背面:パララックスエリア </div> <div class="content">前面:コンテンツエリア </div> <div class="parallax bg-02">背面:パラ
次のページ
このページを最初にブックマークしてみませんか?
『大阪市天王寺区ホームページ制作 | 合同会社デザインサプライ-DesignSupply. LLC-』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く