DESIGN BLOGデザイン事務所の制作ブログ

[制作ブログ]： カテゴリー『TECHNIC』の記事一覧（19件）

デザイン事務所の制作ブログ

【jQuery】slideToggleを使って要素をクリックで要素を表示･非表示させる 「Q＆A」などでよく使われる、クリックすると詳細が表示される、アコーディオンメニュー。この記事では、そのアコーディオンメニューを、jQueryのslideToggleというメソッドを使って作成する方法をご紹介します。 １、slideToggleの使用例　まずはjsの記述について <script> $(function($){ $('ul.qa li .question'… TECHNICWEB制作javascriptjQuery
【CSS】clearfixについて clearfixとは まずclearfixとはfloatを使用する際にレイアウトが崩れないようにするものです。 floatは要素を隣に並べたり、文字を回り込ませたいときに指定するプロパティですが float（浮かせる）要素のため、次の要素が下に潜り込んでしまったりと レイアウトが崩れることがあります。 そのレイアウトを崩れないようにするのがclearfixの役目です。「 浮いた要素のバリア機能」… TECHNICWEB制作
【HTML】imgタグについて徹底解説！ imgタグについて HTMLでimageタグを使って画像を表示するためのHTMLタグのひとつです。「imgタグ」はインライン要素ですが、ブロック要素と同じ効果が出せるのを覚えておきましょう。表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式、JPEG形式、PNG形式の画像形式を指定することができます。 画像の形式はJPGが一番軽いです。なので基本的にはJPGで書き出して使用するよ… TECHNICWEB制作
【css】ボーダースタイル ボーダーとは border は CSS の 一括指定 プロパティで、要素の境界を設定します。borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。 用途は様々で、見出し、枠によく使われます。 【重要】ボーダーの書き方 ボーダースタイルについてBMBでは以下の書き方で統一しています。 border: 線のサイズ 線の種類 線の色; 例1：border… TECHNICWEB制作
cftでのfieldset_openによるグループ化時の複数画像投稿の出力について 複数のグループを出力した際に、グループ内の画像出力がうまくいかない時の注意点 よく忘れがちな配列処理のミス備忘録です。よくあるのはカスタムフィールドグループで複数の画像を配列として投稿できるようにするという時。なぜか2つ目以降の画像が出力できていない時、または1つしかグループがない時に画像が表示されない時。各自、配列の処理がちゃんと行われているかチェックし、配列についての理解が正しく出来ているか… TECHNICWEB制作wordpress
【WordPress】カスタム投稿タイプの絞り込み wordpressでループを書く際のmeta_queryを使って複数のカスタムフィールドの値で条件絞り込みする方法。 「key」にはカスタムフィールドのフィールド名を、「value」にはフィールドに特定の値を。valueに文字入力があるかないかで判定したい場合は「true/false」を指定します。 <?php $args=array('posts_per_page'=&g… TECHNICWEB制作wordpressPHP
【WordPress】クエリパラメータURLでカテゴリー絞り込み記事の一覧を表示させる方法 記事ループを作る時のカテゴリーやタクソノミーでの絞り込み例 記事の絞り込み方はいくつかありますが、BMBではカスタム投稿タイプを多用するため、以下の方法を使用しています。通常投稿タイプでも使い回しています。 以下は、投稿タイプが「food」、カテゴリー（タクソノミー）「フルーツ」、タグ「セール中（タグっぽく使うがこれもタクソノミー）」で絞り込みしている状態での設定です。 表示中のページURLが… TECHNICWEB制作wordpressPHP
WordPressで投稿記事の記事一覧でタイトル・本文の文字数を制限したいときに確認すること 【wordpress】タイトルや本文の出力時に便利な文字数制限！ アイキャッチの様にタイトル・本文を省略したいときは下記の記述を確認しましょう。  <?php bmb_title(22);?> タイトルを何文字で省略するかの記述です。()の中に何文字で省略したいかを記述します。この場合は22字です。 <?php bmb_excerpt(40);?> タイトルと同様… TECHNICWEB制作wordpress
【WordPress】よく使う代表的な条件分岐 WWordPressの条件分岐は、指定した条件を満たしたときに、特定のアクションを実行するための方法です。ここではWordpressでよく使う条件分岐をいくつかあげてみました。 カスタム投稿タイプなどの条件分岐 <?php if(is_front_page() || is_home()){?>●●●●●●●●●<?php } ?>※トップページの条件分岐<?php… TECHNICWEB制作wordpress
【食事】十条でお昼ご飯に迷ったとき 十条の事務所は商店街にあるので、周りに食べ物がいっぱいあります。独断と偏見でおすすめを挙げてみました。住所はGoogle Mapで調べてください。 ※加筆修正歓迎 オリジン弁当：リーズナブルで安定したクオリティのごはんが食べられます。事務所から近いです。 鳥大：安くて茶色い総菜が売ってます。人気なので、列に並ぶ必要があります。 魚一：少し遠いですが、1000円くらいで料亭みたいに丁… TECHNIC
【業務全般】リモートでの作業について ここでは、事務所含む複数地点の作業者どうしが同じプロジェクトを進めるにあたっての注意事項を記載します。 ファイルの同期方法 マスターデータの確認 ファイルの同期方法 BMBではgithubといったオンラインのバージョン管理ツールを導入していない(2021.07.30時点)ので、複数地点で作業する場合には、一つのファイルに対してどの場所にあるファイルが最新バージョンか把握する… TECHNICWEB制作
【IT全般】CSVファイルについて CSVファイルとは CSVファイルの使用例 CSVファイルの注意点 CSVファイルとは CSVとは「Comma Separated Values」の略でカンマで区切られたデータのことです。そのため、CSVファイルはカンマ区切りでデータ構造が示されたファイルのことと言えます。拡張子は.txtか.csvとなりますが、どちらもメモ帳のようなテキストエディタで開けます(.csvの場… TECHNICWEB制作
【CSS】BMBでよく使うクラス名 BMBでよく使うクラス名をまとめます(IDの時もあります)。基本的にはローワーキャメルケースで名づけます。編集可否が×の項目は、「このクラスをフックにしてCSSを適用させてはいけない」という意味です。※加筆修正歓迎 クラス名 HTMLタグ 意味 編集可否 title h1,h2など見出し。span等 サイト内で頻出のタイトルのデザインに対してつけます。 〇 … TECHNICWEB制作
【JS】よく使うコードの解説 ここでは、WordPressでよく使うJavaScriptのコードについて解説します。BMBではjsのコードはjs階層直下のgeneral.jsなどのファイルにまとめて書いています。ここではjQueryを読み込んでいることを前提としています。 クリック(.click)による起動 スクロール(.scroll)による起動 ページ読込完了時(window.onload)の起動 クラスの動… TECHNICWEB制作