かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

FC2テンプレート「Diary_1column」カスタマイズ

FC2テンプレートのカスタマイズの記事をちょうど1年前に書いていますが、フリーブログの中でも動作が安定しておりユーザーも多いことからよく検索されているようです。

今回は以前ご紹介した公式テンプレートのレスポンシブデザイン「Diary_1column」でサイトを作る機会があり、いくつかカスタマイズしたので備忘録的にご紹介します。レスポンシブデザインは、PCとスマホ同じスタイルを簡単に実現できるので、ぜひ挑戦してみてください。

続きを読む

Bootstrap表示・非表示class

新年明けましておめでとうございます。今年はどんなHPトレンドが来るのでしょうか、楽しみですね!


栄枯盛衰、流行りは必ず廃るもの。わたしは服は数年着るので流行りのデザインは買わないのですが、アパレル同様Webデザインも流行ったものをいつまでも使用していると流行遅れに見えてしまいます(;´Д`)。ホームページの制作を検討されている方は、「2~3年は安定して使い続けられるデザイン」を提案してくれる制作会社さんを選ばれてくださいネ!

本日のエントリーはタイトルの通りですが、新年なのでまず昨年わたしが廃ったと感じているものをご紹介。

続きを読む

Bootstrapコードを速く書く

わたしはレスポンシブデザインに大事なグリッド構造を、Bootstrapを利用して組んでいます。

css・jsともにあらゆるデバイスにフィットするWebサイトを構築するのに必要なものがパッケージされたとても便利なフレームワークで、SoyCMSとの相性も最高にいいです!

今年最後のエントリーとして、Bootstrapの構造と、簡単に複雑なBootstrapのレイアウトコードが書ける便利なサイトをご紹介していきます。

続きを読む

画像はJPGですか?それともPNG?

画像のファイル形式はjpgがいいのかpngがいいのか…あなたはどうやって決めていますか?

なんとなく写真はJPG形式、透過ありのロゴやアイコンはPNG形式なんていう方は多いのではないでしょうか。あるいはWebセーフカラーならGIFにしている方もいるかもしれませんね。

今更な感じもしますが、モバイルファーストの時代、軽量化をポイントに保存形式について考えてみました。わたしが愛用している画像軽量化サイト「TinyPNG」も紹介します。

続きを読む

カードベースデザインとグリッドシステムとflexbox

冗長なタイトルになりました(笑)


カードベースデザインについては6 Web Design Trends for 2015 | TrackDuckの「Card-based design」の項目に詳しいです。

先日、このカードベースデザインの思わぬところでつまずきました。いろいろとやった揚げ句結局flexboxで書いたのですが、その際にいろいろと気づきがあったので備忘録的に書いていきたいと思います!


※flexboxの書き方については、よい記事を書かれているブログが多いので、そちらをご参照ください。

続きを読む

モバイルフレンドリーテストのリニューアル

「モバイルからもストレスなくウェブサイトは閲覧できるべきだ!」と強力にウェブサイトのモバイル対応を推進するGoogleの提供する「モバイルフレンドリーテスト」が出てから約2年。今夏リニューアル(正確には新しいツールが登場)されました。

Google検索結果の順位に影響を与えるモバイルフレンドリー。あなたのサイトは大丈夫?ぜひモバイルフレンドリーテストで、Googleのチェックを通過するか確認してみましょう!

続きを読む

FC2のレスポンシブテンプレートカスタマイズ

Web制作していて分からないことがあると、ネットで検索すればどなたかがブログに書いてくれています。Web関係のブログは「備忘録」とは言いながらも、誰かが同じ目にあって時間を無駄にしないように…というささやかな親切で成り立っています。わたしも、困った方がいらっしゃった時にそのご恩返し…と思いこのブログを書いています。もしあなたがブログを持っていないなら、ぜひ今年は始めて見ませんか?


無料で開設できるフリーブログ、わたしは色々な所で建ててみましたが、カスタマイズのしやすさ・管理画面の使い勝手・過密時間のサーバー負荷など総合的に見ると、FC2ブログが好きです。そこで今回は、今必須のスマホ対応・レスポンシブのテンプレートが2015年8-9月にFC2公式から公開になっているので、その簡単なカスタマイズのご紹介です。ぜひブログが古いテンプレートのままの方や、まだ持ったことのない方は始めてみましょう!

続きを読む

レスポンシブデザインの表

表、つまり<table>タグ。もちろんここで言うのはテーブルレイアウトではなく、表としてのtable使用のことです。


レスポンシブデザインはPCが横長のデザインに対して、スマホサイズでは縦長のデザインとなります。よって横長の表はスマホに収まりにくく、逆に縦長の表はPCでは無駄なスペースが多く出来てしまうというなんとも困ったコンテンツなのですが、どうしても表でなければ効果的に伝えられない情報も実際にありますよね。


今回のエントリーは、表のレスポンシブについてです。

続きを読む

2015年「上に戻る」ボタン4パターン

多くのホームページの右下やフッターに「上に戻る」ボタンがあるのをご存知ですか?

3年ほど前でしょうか、jqueryを使った「ぬるっと上に戻るボタン」が発表されてからいっきに広まりました。わたしもモバイルだとどうしても縦長のサイトデザインになるため、フッター固定で設置することが多いです。

今回のエントリーは、レスポンシブデザインのサイトにおける「上に戻る」ボタンのパターンのご紹介と、このホームページのボタンをSVGで作り直しましたのでざっくりとご紹介します。


続きを読む

レスポンシブとアクセシビリティ

久々の「大手サイトに勉強させてもらったシリーズ」です。やはりWebデザインといえば海外が先行しているので、わたしは海外サイトをザッピングします。

今回「レスポンシブとアクセシビリティ」というタイトルをつけたのは、少々内容からすると皮肉めいています。

Webサイトはデバイスサイズがあまりにも多岐化しているため縛られてきている部分が少なからずあります。しかしこのサイトを見たとき、今後面白い方向に進む足音が聞こえた気がしました。「閲覧する権利」ではなく「閲覧する資格」を、閲覧側も積極的に持つ努力をすべきだ、というある意味強気のスタンスです。国の文化の違いもあろうと思いますが、いくつかのヒントを見つけていただければ幸いです。


続きを読む

ここは2ページ中1ページ目です

   << 1 2 >>