2022-09-01から1ヶ月間の記事一覧

bxsliderでスマートフォン時にスライド部分をスクロール出来ない場合の解決法

bxslider.com bxsliderではデフォルトでは「touchEnabled」イベントがonになっていて、スマホ時でもスライド画像をスワイプで切り替える事が出来ます。しかし、これがonになっているとスライド画像を縦にスワイプしても画面がスクロールされないので、オプシ…

コーディング作業の際にチェックするポイント

コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべてindex.htmlになっているか フォルダ名は適切な名前になっているか ページ毎に適切なタイトルがついているか 適切な…

モバイル幅でwebサイトを作成する

今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景(多くはbody要素を固定)を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはspオンリーのサイ…

プラグインを使ったwordpressのデプロイ

以前、バックアップを取って、sql文を使ってwordpressのデータを移動させましたが、今回はプラグインを使ってデプロイさせます。 ja.wordpress.org このプラグインは検索 & 置換操作中に発生する、あらゆるシリアライゼーションの問題も解決します。とても簡…

ポートフォリオの制作

ポートフォリオ制作でまず自身が把握する事は中に入れるコンテンツの分量です。今までの授業で作ったデータをもう一度見直し、手直しする物は手直して、ポートフォリに掲載する物を決めましょう。 次にwebのポートフォリオを何で作るかを決めましょう。選択…

GitHub Pagesを使ってサイトを公開する

GitHub Pagesとは、GitHubがユーザーに提供している静的なウェブページのためのウェブホスティングサービスです。GitHubのアカウントがあればすぐに使えるので、gitの基本的な仕組みを覚える為にも使ってみましょう。html、css、js、画像等、静的なサイトで…

Gitを使う

git

Gitとは? Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機…

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。 一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

画像の補正

画像補正に使う機能は主にレベル補正、色相・彩度、トーンカーブの3つです。 トーンカーブを使った補正 トーンカーブはデータの劣化をおこさずに細やかな補正ができます。トーンカーブを使えば「明るさ・コントラスト」、「レベル補正」でできることはもちろ…

wordpressで特定のカテゴリー記事を表示させる

wordpressで特定のカテゴリー記事を表示させる為には「 get_posts( );」を使って表示させます。カテゴリーに指定したスラッグを使う事で特定のカテゴリー記事のみを表示する事が出来ます。また、「foreach」を使う事で配列に入っている値を全て出力させます…

Google Fromに自動返信機能を付ける

Googleスプレットシートにはスクリプトを埋め込む機能が付いています。今回はこの機能を使って、自動返信メールを送ってみます。 function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------…

classを指定するだけで動く「yubinbango.js」

php

github.com

フォーム-ラジオボタンが選ばれた状態でページ遷移させる

php

今回のフォームは、商品紹介ページに「商品A」「商品B」「商品C」の3つのコンテンツがあり、それぞれの購入ボタンをクリックして申し込みページに遷移した時、それぞれの商品のラジオボタンにチェックがはいっている状態にしたい。申し込みページ以降は基本…

wordpressに記事データをインポートする

コンテンツのインポート 新たにインストールしたWordPressにはコンテンツが何も無いのでオリジナルテーマを作成する前コンテンツのサンプルデータをダウンロードしましょう。 www.socym.co.jp もちろん自分で投稿記事などを入力する事も可能ですが、ここでは…

wordpressテンプレートタグを使う

wordpressテンプレートタグを使う事で、静的なコンテンツを動的なコンテンツにする事が出来ます。wordpressテンプレートタグは1つ1つ目的が決まっているので、wordpressテンプレートタグの記述全てを覚えるのではなく、目的にあったwordpressテンプレートタ…

コーディング作業の際にチェックするポイント

コーディングの質はSEOにも直結するので、デザインの質と同じくらい大事です。細かい部分も1つ1つ確認して行きましょう。 ファイル名はすべてindex.htmlになっているか フォルダ名は適切な名前になっているか ページ毎に適切なタイトルがついているか 適切な…

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

高機能モーダルウィンドウ「fancybox3.5.7」

fancyboxは画像だけでなく動画やGoogleMap、htmlファイルといった様々なデータ形式がモーダルウィンドウで表示させられる高機能版モーダルウィンドウです。 web.archive.org 今回はこちらのCDN版を使用します。cdnjs.com ※cdnの場合はminファイルを使用する…

cssプラグインを使ってハンバーガーメニューを作る

css3 jQuery プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>

ページネーションの導入が簡単に出来る「paginathing.js」

ページネーション(pagination)とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </meta></meta></head></html>

WordPressとは?

WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 WordPressとは、オープンソースのブログソフトウェアで…