KYO

ワードプレスの記事投稿画面のエディタにボタンを追加する

2018年7月15日

ワードプレスのテーマを作っていると、記事投稿画面で便利な機能を追加したいと思う時があります。プラグインを追加すれば簡単にできるのでしょうが、今回は自作で作っていきます。ちなみにこのブログテーマは自作テーマ(KYO)なのですが、数種類のボタンを自作しています。 ビジュアルエディタにボタンを追加する functions.phpに以下のように書...

PHP

PHPとAjaxとBootstrap4で作るストレスレスなECサイトの作成(ソースコードあり)

2018年7月10日

PHPとjQueryのAjaxとBootstrap4を使ってストレスレスなECサイトを勉強がてら作ってみました。今回はそのソースコードを全公開します。そしてちょとした解説も行います。 今回作るECサイトは、ショッピングカート機能と注文画面、そして管理画面の作成まで行なっています。 Bootstrap4のモーダルとAjaxを利用することで、...

ジンプルで見やすいワードプレスのブログ用テーマを作りました

2018年7月2日

ブログを運営する時にワードプレスが非常に強いです。運営管理の面で見ても、SEO対策の面でも見てもワードプレスでブログを作るのは今の時代の最善手です。 このテーマはシンプルで見やすく扱いやすく、必要な機能が揃っているのですぐに仲良くなれます。 ワードプレスでブログを作りたい人にオススメできるテーマです。 テーマ名 KYO 料金 FREE 用...

CSS

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日

ソースコード   ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...

ワードプレスでお店のホームページを作るならゲール

2018年6月23日

ワードプレスのテーマを作りました。 テーマの名前はゲールです。   ゲール紹介ページ デモページ   主に飲食店や美容系のお店をターゲットにしています。 普通のブログには向いていないのですが、ビジネスサイトを作るならば、とてもオススメのテーマになっています。   今のところは飲食店や美容系などのお店のホームペ...

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。 ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。 しかし、今回は0から作っていきます。   なぜ0から作るかというと、オシャレなステ...

Bootstrap4のグリッドデモページを作成

2018年6月17日

Bootstrapはレスポンシブなサイト高速に作る上で、非常に強力ですが、グリッドの仕組みを理解する必要があります。(理解しなくても感覚でいける気もしますが・・・笑) そこで勉強がてらデモページを作りました   Bootstrap4グリッドシステムデモページ   このデモページでブラウザの画面幅を変えると、その仕組みが...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています   たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!       jquery...