DESIGN BLOGデザイン事務所の制作ブログ
[制作ブログ]:
カテゴリー『TECHNIC』を含む記事一覧(件)
デザイン事務所の制作ブログ
【jQuery】slideToggleを使って要素をクリックで要素を表示・非表示させる
「Q&A」などでよく使われる、クリックすると詳細が表示される、アコーディオンメニュー。この記事では、そのアコーディオンメニューを、jQueryのslideToggleというメソッドを使って作成する方法をご紹介します。
1、slideToggle
2、jsの関連コード<script>$(function($){$('.qa ul li .question').click(functi…
TECHNICWEB制作javascriptjQuery
【jQuery】超簡単jQueryスライダーbxSliderの使い方
画像を何枚か切り替えて表示させたい場合に使える、jQueryのプラグインの一種であるbxSliderの使い方をご紹介します。今回はCDN形式で行う方法で紹介します。
1、bxsliderのcssとjs導入<link rel="stylesheet" href="/jquery.bxslider.css"><script src="//ajax.googleapis.com/aj…
TECHNICWEB制作
【WordPress】single.phpで所属カテゴリをterm_order設定順に表示する方法
<?php// 全タクソノミーの取得条件$args = array('hide_empty'=>true,'orderby'=>'term_order',);// 全タクソノミーを取得$terms = get_terms( '★タクソノミー名★', $args );// 記事にチェックされているタクソノミーを取得$the_terms = get_the_terms( $post-…
TECHNICWEB制作wordpress
【メタタグ】電話番号がハイパーリンクになるのを防ぐ
結論
<meta name="format-detection" content="telephone=no">これをheadに追加すればOKです。
使用例
<!DOCTYPE html><html><head><meta name="format-detection" content="telephone=no"><titl…
TECHNICWEB制作
【CSS】clearfixについて
clearfixとは
まずclearfixとはfloatを使用する際にレイアウトが崩れないようにするものです。 floatは要素を隣に並べたり、文字を回り込ませたいときに指定するプロパティですが float(浮かせる)要素のため、次の要素が下に潜り込んでしまったりと レイアウトが崩れることがあります。 そのレイアウトを崩れないようにするのがclearfixの役目です。「 浮いた要素のバリア機能」…
TECHNICWEB制作
【HTML】imgタグについて徹底解説!
imgタグについて
HTMLでimageタグを使って画像を表示するためのHTMLタグのひとつです。「imgタグ」はインライン要素ですが、ブロック要素と同じ効果が出せるのを覚えておきましょう。表示する画像ファイルはsrc属性で指定し、WEB上ではGIF形式、JPEG形式、PNG形式の画像形式を指定することができます。
画像の形式はJPGが一番軽いです。なので基本的にはJPGで書き出して使用するよ…
TECHNICWEB制作
【HTML】pタグ徹底解説!
pタグとは
ブロックレベル要素(コンテンツをまとめる箱のような使い方をする要素)
paragraph(パラグラフ=段落)のことを指しています。
ひとつの段落であることを表すため、文章の途中で次の<p>に移ることは基本的にはしません。
NG例
<p>これは</p>
<p>例文</p>
<p>です。</p&g…
TECHNICWEB制作
【css】ボーダースタイル
ボーダーとは
border は CSS の 一括指定 プロパティで、要素の境界を設定します。borderプロパティは、ボーダーのスタイル・太さ・色をまとめて指定する際に使用します。
用途は様々で、見出し、枠によく使われます。
【重要】ボーダーの書き方
ボーダースタイルについてBMBでは以下の書き方で統一しています。
border: 線のサイズ 線の種類 線の色;
例1:border…
TECHNICWEB制作
cftでのfieldset_openによるグループ化時の複数画像投稿の出力について
複数のグループを出力した際に、グループ内の画像出力がうまくいかない時の注意点
商店街サイトでの例:single-shop.php
<?php $xxxxIMG = get_post_meta(get_the_ID(),'フィールド名');?>
→配列内では、<?php $zzzzMID = wp_get_attachment_image_src($xxxxIMG[$i],'…
TECHNICWEB制作wordpress
【WordPress】カスタム投稿タイプの絞り込み
wordpressでループそ書く際の特殊な絞り込みの方法を紹介します。
…
TECHNICWEB制作wordpress
【WordPress】カテゴリーで絞り込んだ記事の一覧を表示させる方法
<?php if(is_page('shogi')){?><ul class="clearfix list-news"><?php $args=array('posts_per_page'=>10,'post_type'=>'topics','orderby'=>'date','topics_cate'=>'将棋大会のこれまでの成績',);//…
TECHNICWEB制作wordpress
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制作