KYO

Sassの基本

2018年8月3日

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

CSS

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

2018年8月2日

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

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日

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