Tag Archives: code

TweenMax.jsとThree.jsを使用してホバーに面白いアニメーションを加えてみた

みなさんこんにちは。 今回はタイ…

• code,
• javascript,
• web

ピラミッドチャートをCSSだけでつくってみよう！

CSSでピラミッドチャートを作る…

• code,
• css3,
• design,
• web

inview.jsを使用してchart.jsを1ページに複数実装する

皆さん、こんにちは！ 今回は、タ…

• blog,
• code,
• web,
• wordpress

【解決】slickでなぜか縦ならびのままスライドする…

以前、ワードプレスを使用してsl…

• blog,
• code,
• web

Advanced Custom Fieldsギャラリーの書き出し方

Advanced Custom …

• blog,
• code,
• web,
• wordpress

カスタム投稿タイプと通常の投稿をトップページに全部表示する方法

今回はトップページ（index）…

• blog,
• code,
• web,
• wordpress

特定の要素が可視範囲から消えたら別の要素を表示する方法

はい！みなさんこんにちは。 今日…

• blog,
• code,
• web

Googleフォントのサブセット化

ウェブサイトを作成する際にGoo…

• blog,
• code,
• web

スライド３つを同時に動かす方法

今回は下記のようなスライドショー…

• blog,
• code,
• css3,
• javascript,
• web

EC-CUBE2系で製品一覧のタイトルを変更したい

はい、みなさんこんにちは！ EC…

• blog,
• code,
• ec,
• eccube,
• web

ECCUBEで商品画像が小さくガニガニしてる…大きくしたい！

ECCUBEで商品に登録した画像…

• code,
• ec,
• eccube,
• web

wp_nav_menuでsingleページにもcurrentをつける（改良版）

はい！皆さんこんにちは。 前々前…

• code,
• web,
• wordpress

cssでbr削除すると半角スペースが入る！

はい、みなさんこんにちは。 コロ…

• blog,
• code,
• web,
• wordpress

wp_nav_menuでsingleページにもcurrentをつける

PCにしろスマホにしろカレントを…

• blog,
• code,
• web,
• wordpress

2段階スライドショーを実装してみよう！

今回はキービジュアルで2つのアニ…

• blog,
• code,
• css3,
• web

みんなcanonicalの設定どうしてる？

今日は私が今まで勘違いしていたc…

• blog,
• code,
• web

LP（ランディングページ）などでMW WP FORMを使用した時の位置調整

はい、みなさんこんにちは！ 今日…

• blog,
• code,
• javascript,
• web,
• wordpress

WordPressでSVGを使用したい

カスタムフィールドなどでSVGの…

• blog,
• code,
• web

wp_nav_menuでメガメニューを作成する

はい、みなさんこんにちは。 今日…

• blog,
• code,
• css3,
• web

スマートカスタムフィールド（SCF）でPDFをループさせる

みなさんこんにちは！ スマートカ…

• blog,
• code,
• web,
• wordpress

WP（ワードプレス）で外観>メニューを作成した場合にサブタイトルを表示する方法

ワードプレスの既存機能で付いてい…

• blog,
• code,
• web,
• wordpress

今更だけど…レスポンシブ対応！背景にvideoタグで動画を設置したい！

キービジュアルを動画にする際にレ…

• blog,
• code,
• css3,
• web

WordPressで同じタグをもつ記事を「おすすめの記事」として一覧で表示する

よくいろんな人のブログをみている…

• blog,
• code,
• web,
• wordpress

Vanta.jsを使用しておしゃれな背景アニメーションを実装してみた

今回は『Vanta.js』をご紹…

• blog,
• code,
• javascript,
• web

WordPressで投稿された記事に『いいね！』を実装する。

今回はWP ULikeプラグイン…

• code,
• web,
• wordpress

WordPressでタグの一覧を表示する

ワードプレスの標準機能でついてい…

• blog,
• code,
• web,
• wordpress

会員サイトが簡単に作成できるWP-Memberを実装してみた！

実装自体ははちゃめちゃに簡単でし…

• blog,
• code,
• web,
• wordpress

【歓喜】SVGがfaviconに対応！これでいろんなサイズの画像を用意しなくてOK！

みなさんは、faviconの作成…

• blog,
• code,
• web

（JS）お問い合わせフォームで各必須項目にスペースが入力されたときに制御する方法

こんにちは！今日は表題の件につい…

• blog,
• code,
• javascript

SCF（スマートカスタムフィール）でオプションに基本情報をまとめて登録する

とっても今更ですが、スマートカス…

• blog,
• code,
• web,
• wordpress

クリックして表示したメニューを異なるところをクリックすると非表示にする

アンカーリンクメニューなどで、下…

• blog,
• code

画像の高さを取得して指定サイズ以下の場合クラスを付与する

お客様に更新していただくCSMを…

• blog,
• code,
• web

マウスオン（ホバー）でサブメニューなどを横から出す

最近サイトを作成していてアーカイ…

• code,
• web

タブの切り替えコンテンツをふわっと表示する方法

基礎中の基礎かもしれませんが今日…

• blog,
• code,
• web

「この投稿を先頭に固定表示」のチェックボックスを削除する

「この投稿を先頭に固定表示」のチ…

• blog,
• code,
• web

WP（ワードプレス）で記事を固定表示したときの表示件数の調整

こんにちは！ 今日は表題の件を解…

• blog,
• code,
• web

fotorama.jsを使って、背景フルスクリーンのスライドショーをつくる

こんにちは！ 今日はfotora…

• blog,
• code

【今更だけど…】CSSで円、半円をつくる方法

こんにちは！CSSで円を作る機会…

• blog,
• code,
• css3,
• design,
• web

thanksページなどに直でアクセスされた場合にリダイレクト処理を行う方法

こんにちは！ 今日はタイトルの通…

• code,
• web

jQueryでaタグのtelをPCのみ削除する

電話番号に付与されるリンクについ…

• blog,
• code,
• web

CSSのみで画像を永遠ループする

今回はJSを使用せずにCSSのみ…

• blog,
• code,
• css3

グリッドデザインをするときに助かる！jQuery

こんにちは！ 今日は表題のとおり…

• blog,
• code,
• web

ウェブサイト内のボタンデザインで迷ったときはhover.cssで何とかしちゃおう！

ウェブサイト制作時にトップページ…

• blog,
• code,
• design

WordPress(ワードプレス)の投稿のラベル名を変更する

今回は表題の通り、ワードプレスで…

• blog,
• code,
• web

スマートカスタムフィールド（SCF）で画像無しの繰り返しループ出力時に項目が空だった場合にテキストを表示する方法

みなさんこんにちは。 今回はスマ…

• blog,
• code,
• css3,
• web

jquery.cookie.jsを使用して、最初のみオープニングアニメーションを稼働させる方法

オープニングアニメーションって誰…

• blog,
• code,
• web

はちぇめちゃに便利！超軽量のプログレッシブCSSフレームワーク!!

県庁や官公庁のサイトでは、ダーク…

• blog,
• code

SVGで作成した文字をアニメーションするときにIEだけ動かない問題にハマった話

みなさんこんにちは！ 時々このブ…

• blog,
• code,
• css3,
• web

HTMLでこんなことまでできる！最近覚えたHTML技法

私も最近知ったのですが、覚えてお…

• blog,
• code,
• web

お問い合わせなどのテキストエリアに入れるplaceholderを改行させる

はい、みなさんこんにちは。 今日…

• blog,
• code,
• web

CSSでウェブページのすべてを構築できるCJSS

基本的に私たちはHTMLというフ…

• blog,
• code,
• css3

私が最近覚えたCSS　第2弾！

みなさんこんにちは！ 私が最近覚…

• blog,
• code,
• css3

WP（ワードプレス）でメンテナンス表示を出す方法

みなさんこんにちは！ 今回はサー…

• blog,
• code,
• web

私が最近覚えたCSS

みなさんこんにちは！ 私が最近覚…

• blog,
• code,
• css3

WP（ワードプレス）でカスタムフィールドにでアップロードする特定のファイルにベーシック認証をかける方法

はい、みなさんこんにちは！ 今日…

• blog,
• code,
• web

Simple.Timer.jsで簡単にカウントダウンタイマーを設置する

ウェブサイトにソースを読み込ませ…

• blog,
• code,
• css3,
• web

WP（ワードプレス）でslideout.jsを使用したときのスマホ用のメニュー実装の備忘録

スマホサイトってもう当たり前のよ…

• blog,
• code,
• css3,
• web

一行かくだけで！すべてのリンクをtarget=”_blank”にする方法

サイト内部のリンクについては、別…

• blog,
• code

WP（ワードプレス）で親ページか子ページかを判断して表示をわける

ワードプレスでサイトを作成すると…

• blog,
• code,
• web

[WordPress（ワードプレス）]年別で月別アーカイブリストを表示

任意のカテゴリでのみアーカイブリ…

• blog,
• code,
• web

WP(ワードプレス)の投稿アーカイブを任意のURLで出力する

みなさんこんにちは。 本当は今日…

• blog,
• code

WP（ワードプレス）で勝手にpタグやbrタグが削除されてしまう

みなさん、こんにちは。 今回は表…

• blog,
• code,
• web

きた！EdgeがChromiumを採用してリリースされる！！と、個人的に言いたいことを書いてみた。

ウェブ制作に携わる人間ならだれで…

• blog,
• code,
• web

WordPress（ワードプレス）のサイト内検索で表示される結果から固定ページを除外する方法

はい、みなさんこんばんは。 今回…

• blog,
• code,
• web

固定ページの子ページ一覧を表示させる方法

みなさんこんばんは。 今回は結構…

• blog,
• code,
• design,
• web

動く！かわいいアニメーションのSVGアイコンが商用無料！

はい、みなさんこんにちは。 ウェ…

• code,
• design,
• web

SCF（スマートカスタムフィールド）でグーグルマップを表示したい

はい、みなさんこんばんは。 今日…

• code,
• web

WPの固定ページのエディタを非表示にする方法

みなさん、こんばんは。 これまで…

• code,
• web

PowerCMSで各カテゴリごとに年別アーカイブを表示する方法

はい、みなさんこんばんは。 Po…

• blog,
• code,
• css3,
• Movabletype

（うわ…！？）calcだけじゃない！CSSの数学関数が増加する！サイン・コサイン・タンジェント！？

日常的によく使うCSSの数学関数…

• blog,
• code,
• css3,
• web

MovableTypeでカテゴリに記事が存在しないときの表示を分けたい

はい、みなさんこんにちは。 いつ…

• blog,
• code,
• web

WordPressに静的ページを設置したい！

今回はWPと同じ階層にディレクト…

• blog,
• code,
• web

カスタムフィールドで投稿した項目ごとに別ページでまとめて表示する方法

みなさんこんばんは！ 今回はカス…

• blog,
• code,
• web

カスタム投稿タイプのURLを数字に変更したい！

WPでウェブサイトを作成する際に…

• blog,
• code,
• web

ウェブサイトで画像の保存を禁止する方法

ウェブサイトが公開直前になって、…

• blog,
• code,
• css3

WordPressで本文からdescriptionを取得する方法

WordPressでウェブサイト…

• blog,
• code

MW WP FORMで選択した項目ごとにメールアドレスを変更する

年明けましたね！2019年初のブ…

• blog,
• code

メールアドレスをエンティティ化する方法（WordPress）

ウェブサイトを制作する上で、サイ…

• blog,
• code

MW WP FORMでメールフォームを作成しBogoで多言語したときに送信内容が文字化けしたときの対処法

少し前から多言語サイトを取り扱う…

• blog,
• code,
• web

datailとsummaryでつくるアコーディオン

こんにちは～ 今日はdetail…

• blog,
• code,
• css3,
• design

選択させて結果的に答えが出る『心理テスト』型JS組んでみました

こんにちは！ 今回ウェブ制作を行…

• blog,
• code,
• css3,
• design

スマートカスタムフィールドをグループで表示させるときになぜかでなかった場合の対処法

こんにちは！ 私はよくスマートカ…

• code,
• web

flexboxをIE8やIE9にも対応させたい！

こんにちは！みなさん、flexb…

• blog,
• code,
• css3,
• web

javascriptを使用してマウスの動きに合わせて背景の画像を動かしてみた

こんにちは！ 今回はウェブデザイ…

• blog,
• code,
• css3,
• web

メディアクエリを設定していて、スタイルシートの落とし穴にはまったので見直してみた

こんにちは！ 8キロの山登りを終…

• blog,
• code,
• css3

縦書き文章のレスポンシブについて考えてみた

和のサイトを作成する際に用いられ…

• blog,
• code,
• css3

ムーバブルタイプにカレンダー機能を設置して少しだけカスタマイズしてみた

ムーバブル対応にデフォルトでカレ…

• code,
• css3

odometer.jsで数字をカウントさせて、出力結果が一桁の場合あたまに0を付ける方法

毎日すごしやすい季節ですねー！ …

• code,
• css3,
• web

スクロールすると文字がふわっとでてくる方法

jQueryとcss3だけでスク…

• blog,
• code,
• css3,
• web

【css】counterを利用した自動ナンバリングのあれこれ

ちょこちょこCSSのcounte…

• code,
• css3,
• web

JS（jQuery）でidを付与して、0からはじまる連番をつけてみた

今回は同一の複数クラスをつけたD…

• blog,
• code,
• css3,
• web

PCやスマホなどの端末にサイト画像を当て込んでレスポンシブ表示する方法

ナックウェブの制作実績でも行った…

• blog,
• code,
• css3,
• web

slicknavを実装して左側にロゴを入れ、さらにロゴにリンクを設定したい

1年以上前に書いた記事で sli…

• blog,
• code

表面がゆらゆらゆれる水（アクア）系のripples.jsを実装してみた

あつい！夏ですね~(*_*) と…

• blog,
• code,
• design,
• web

WordPressでRSSフィードが突然表示されなくなったときの対処法

先日お客様から連絡があって、アメ…

• blog,
• code

クロスドメインでiframeを調整しようとしてどうにもならなかった話

台風きてますね！ 夜中雨と風がす…

• blog,
• code

私がSCSSでまとめているソースもろもろ

SCSSを実務でも使用するように…

• code,
• web

cssでli要素などのときに奇数、偶数、番目以降などを整理してみた

cssで何番目の要素に色をつける…

• code,
• css3

シンプルなニュースティッカー”SimpleTicker”の使い方

ウェブサイトを作成しているときに…

• blog,
• code

JSとCSSで桜を降らせてみた

こんにちは！6月ももう後半ですね…

• code,
• web