KYO

ワードプレスの自作テーマのご案内。プログラミングに関する投稿などを行なっています

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

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

enchantjsでノベルゲームエンジンの作り方チュートリアル

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日 CSS

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...

Vue.jsで、スライドメニューを作る

2018年8月17日 Vue.js

最近Vue.jsを勉強し始めました。 対してjQueryも使いこなせないんですが、Vue.jsってjQueryより使いやすいんじゃね?と思ってしまうほどにハマってしまいました。 というわけで、Vue.jsでサイドメニューを表示させます。   jQueryみたいにクリックした時に、この要素にクラスを付与するみたいなロジックを書かず...

Laravel5.6とAjaxで「いいね」機能を作るチュートリアル

2018年8月5日 Laravel

Laravel5.6で、いいね機能の作り方をチュートリアル形式で解説します。ちなみに中級のチュートリアルを終えたレベルなら作れると思います。 今回はログインしているユーザーが投稿に対して「いいね」を押せる機能を作ります。「いいね」は一度押すともう押せなくして、「いいね」取り消しは不可能にします。ユーザーごとに「いいね」を押しているのかどう...

Sassの基本

2018年8月3日 Sass

Sass(サース)を勉強しています。cssの勉強でcodepenとか見ているとsassで書かれたものが時々出てきます。なんか特別な環境とか必要なのかな?と避けていたんですが、どうやら簡単に導入できてしかも、特別環境とかが必要なわけでもないとのことで早速勉強しました! Sassを使う cssの上位互換的なやつです。 最終的にはcssに変換し...

ERROR: Could not find a valid gem ‘sass’でsassがインストールできない

2018年8月2日 CSS

Mac環境で sudo gem install sass [crayon-5b7b1ef94aede952076285/] みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが [crayon-5b7b1ef94aee3803684850/] を試す [cr...

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

2018年7月30日 LP

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

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

2018年7月28日 CSS

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

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

2018年7月28日 jQuery

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

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

2018年7月28日 jQuery

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

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

2018年7月28日 CSS

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