KYO

月別: 2018年7月
LP

ランディングページ(LP)を作ってみた

2018年7月30日

ランディングページについては広告ページくらいの認識でしたが、意味的には訪問者が最初にアクセスしたページらしいですが、ほとんどの場合で商品やサービスを売る為に作られた縦長のワンページのことらしいです。たまに見かけますね。もう型というのが出来上がってるので見た瞬間に「あっ広告サイトや」とわかるあれです。 本物のランディングページを見ると勉強に...

CSS

パーツを組み合わせてレスポンシブなサイトを作った

2018年7月28日

過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。 これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました Bootstrapとフレックスボックスで記事一覧部分のデザインを作る 記事やコンテンツが流れていくスライダーのアレを作ってみた オーバーレイをかけた...

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...

CSS

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る

2018年7月28日

ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。 記事一覧部分を作る まずはBootstrapを使って作るパターンと、Bootstrap...

テーマカスタマイザでカラーコントロールを使って色を指定する

2018年7月27日

ワードプレスの自作テーマを作ってたんですが、テーマカスタマイザというのを最近知りました。 テーマカスタマイザとはヘッダー画像とか設定する「外観」→「カスタマイズ」の部分です。プレビュー見ながらテーマの設定を変更する画面のことです。 これは視覚的にテーマをカスタマイズできるので、初心者でもテーマカスタマイズをしやすくなるというメリットがあり...

Laravel5.6で画像投稿機能を使ったユーザー投稿型サイトを作った

2018年7月25日

Laravelは今アツいPHPのフレームワークです。(私はcakeとか使ったことないですが...)そんなわけでLaravelを使ってユーザー投稿型のサイトを作りました。 コンセプトは猫を救うです。野良猫とか迷い猫とか里親を探している猫とか、そういった猫に手を差し伸べていこうというサイトです。 ユーザーが猫に関する情報を投稿してレスポンスを...

ワードプレスの管理画面に設定項目を追加する

2018年7月16日

今、新しいテーマを作っているのですが、管理画面に値を設定させるフィールドを用意しています。そんなわけで管理画面で独自の値を設定する方法を本投稿で書いていきます。これができると、カスタマイズの幅が広がります。ここはクライアントが入力した値を使いたい!という場面で役に立ちます。 以前も似たような記事を書いたのですが ワードプレスの設定画面に項...

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

2018年7月15日

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

PHP

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

2018年7月10日

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