misallychan.com

雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。


WEB・デザイン

要素が下のリンクを適応させクリックできるようにする方法

下の要素がリンクで、その上に画像をあわせたりした場合などに、リンクが効かなくなる問題を解消します。 最近私が躓いた部分なのですが、あまりにも簡単に解決できて驚いたので、もし、、、万が一・・・悩んでる方がいたらぜひお試しください。

PNG画像を簡単に圧縮して軽くするにはOptimizillaを使おう!

PNG画像ってめっちゃきれいですよね。 フラットデザインが普及して、よりPNG画像を使う機会は増えたのではないでしょうか。 でも、画像が綺麗な分、重くなってしまいがち。 今回はそんなPNG画像を簡単に軽くする方法をご紹介します!

スマホでスクロールがうまくできない!!対処法は簡単一行追加するだけ!

スマホサイトを作成していると、意外とよく起こるのが・・・ 「スクロールがうまくできない!!」 という問題。 今回はこの対処法をご紹介します。一瞬で終わりますが…。

ブラウザによってフォントサイズが変わる問題の対処法

またWEBの記事です。 レスポンシブ関連で最近は書いてきましたが、備忘録としてスマホ含めてたまにあったフォントサイズへの対処法をご紹介します。

スマホとPCで要素の表示順番を入れ替えるには?flexbox「order」を使ってレスポンシブデザインに最適化!

レスポンシブデザインを簡単に説明すると、1つのHTMLを使って、スマホ版やPC版など画面サイズによってデザインを切り替えることを指します。 ですので、レスポンシブデザインで制作していく上で HTMLの構造は変えたくないけど、見栄えの表示したい順番は変…

SVG画像を活用して、どんなデバイスでも綺麗に画像を表示!ベクター画像でレスポンシブ対応

前回ご紹介した記事では、アイコン作るならpng画像よりWEBアイコンフォントだ!というご紹介をしました。 www.misallychan.com ただ、png画像の代わりにもう一つ、レスポンシブでも活用できる画像があります。 それが、SVG画像です。

WEBフォントを使って、どんなデバイスでも綺麗にアイコンを表示!?レスポンシブで使える!

最近はずっとレスポンシブについて書いていますね。レスポンシブサイトの基本設定!?メディアクエリでブレイクポイントを作って簡単スマホ対応! - misallychan.comwww.misallychan.com レスポンシブで%指定したいけど…3分割は割り切れない問題を解決するc…

レスポンシブでも使える!「clearfix」と「box-sizing」style.cssやcommon.css、reset.cssやnormalize.cssなどに追加したい初期設定

最近はレスポンシブデザインについて書いていましたね!! 今回はそんなレスポンシブデザインでも役立つ初期設定をご紹介します。

レスポンシブサイトで、PCだけ表示・スマホだけ表示ってできるの?【PCとスマホで改行位置や画像を切替える方法】

前回、前々回とレスポンシブについての記事を書いています(^^) ここ最近、WEB関係者っぽい・・・(=w=)でも取り扱いがレスポンシブという今更感… もありますが、まだやったことない方とか、これからはじめる方はぜひどうぞ!

レスポンシブで%指定したいけど…3分割は割り切れない問題を解決するclac()!!

%指定で横幅とるときに、3分割って難しくないですか? width:33.333333%とかしたり。margin使って割り切れるようにしたり。大変だった… んですが今回はその問題を解決するclac()ファンクションをご紹介します。

レスポンシブサイトの基本設定!?メディアクエリでブレイクポイントを作って簡単スマホ対応!

久しぶりにWEBデザインの記事。 WEBデザイン関連で書き溜めていた記事が長文になってしまったので、結局一つ一つわけて書くことにしました。笑 今日は今ではすっかり当たり前となった、レスポンシブWEBデザインに関してです。 (なんだか今更ですけど・・・…

WEBデザイナーが参考にしたい!見やすく分かりやすいブログ11選

あけましておめでとうございます。本年もよろしくお願いします。 雑多なブログですが、また今年もWEB系の記事や、おすすめ記事などを中心にあげていきたいと思います。 さて、今回は。。 WEBデザイナーとして常にチェックしている記事などありますよね。 最…

はてなブログ一覧のデザインをカード型に変更しました。

デザインを少し変更しました。 今までのデザインは元のデザインが気に入ってたのですが、トップの一覧ページの見え方がどうしても横長でなくカード型のカラムにしたかったので。。。

font-family決定版。2017最新のフォント指定の仕方【游ゴシック】どんな端末でも表示したい【日本語WEBフォント】

今までWEBのフォントの話として、WEBフォントの利便性や使い方についてまとめさせて頂きました。 どんなデバイスでも表示される!ユーザビリティ抜群の「WEBフォント」て? - misallychan.com 超簡単!1分でできるWEBフォントの使い方【GoogleFonts】WEBの…

SVG画像非対応ブラウザへのフォールバック方法メモ【2017】

SVGってピクセル画像じゃないからレスポンシブデザインにも最適でとっても便利という話を以前しました。 WEBで役立つ画像「SVG」とは【保存形式】 - misallychan.comこちらimgタグで簡単に表示できるんですが、対応していないブラウザがあります。 サポート…

WPでSFTP接続してブラウザ上でプラグインをインストールできるようにする

SFTP接続の場合、WPがプラグインがブラウザ上でインストールできません。 今回はその対策についてです。

ハンバーガーボタンを簡単に設置!Drawer.jsを使って初心者でもクオリティの高いメニューを導入しよう

以前のハンバーガーボタンは自作でしたので足りない点や動きの悪い点もあったかもしれません… またどうしてもブログに合わせてカスタマイズが必要になる場合が多そうでした…そうなると、CSS初心者だったらどうにかできますが、全くの素人さんですと難しい点…

WEBで役立つ画像「SVG」とは【保存形式】

今回はますます使いたい拡張子「SVG」をご紹介します。 劣化するのが当たり前、と思っていたWEB用の画像。 PNGやJPEG・・・それぞれの特性を理解して自分の保存したい画像と照らし合わせれば、いつもより綺麗に保存できますよね。 「SVG」は近年出てきたReti…

【WordPressの検索機能を全網羅】絞り込み検索やカスタム投稿タイプでの検索、カテゴリ除外など検索機能カスタマイズまで!

WordPressで検索機能、よく使われているのを見かけるし、よく使いたい場面に出会います。 今回は、シーン別でWordPressの検索機能設置方法をご紹介します。

「アイコンが変わらない!」原因はキャッシュ。safariのブックマークアイコンが更新できないのまじなんなの。

faviconやアアップルタッチアイコンを設定していて先日から気になってはいたものの、本日「safariのブックマークアイコンまじなんなの」が爆発しました! その原因や解決策をご紹介します。

WordPressで指定の親カテゴリに当てはまる子カテゴリ名を表示したい!!【子カテゴリ名を呼び出す方法】

私ね、WordPressをずっと使ってきていつもいつも困ってたことがあったんです。。。 それが、カテゴリー問題。 親カテゴリ・子カテゴリとか指定しても、カテゴリ名を表示させるときに親子関係なくID順に全てが並んでしまうこと。

超簡単!1分でできるWEBフォントの使い方【GoogleFonts】WEBのフォント

前回、WEBフォントとは何か、そのメリットをお伝えしました。 そこで本日は「WEBフォント」を誰でも簡単にできる使い方を解説しちゃいます。本日の議題 6つのステップで、初心者でもあっという間にWEBフォントを設置できちゃいます。Google Fontsなら難しい…

「LINEで送る」シェアボタンで直接アプリを起動させる方法

今回は「LINEで送る」ボタンを押したらアプリが立ち上げられる記述をご紹介します。

どんなデバイスでも表示される!ユーザビリティ抜群の「WEBフォント」て?

本日の議題ブランディングにも最適!ユーザビリティ抜群。見やすく、美しいフォントをWEBでも実現する「WEBフォント」とは? ブランディングにも最適!ユーザビリティ抜群。見やすく、美しいフォントをWEBでも実現する「WEBフォント」とは? そもそもWEBフォ…

WordPressにお気に入り機能を追加!WP Favorite Postsをカスタマイズする方法とは?会員制サイトにぴったり。

前回ご紹介したWP-Membersで作る会員制サイトですが、そこに「お気に入り機能」がついていたらもっと便利じゃないですか? 今回はWPにお気に入り機能を追加できるプラグインWP Favorite Postsの使い方をご紹介します。 前回の記事はこちらから misallychan.h…

イベント・フェア情報を発信するのにぴったりな色分け営業日カレンダー機能!WP Simple Booking Calendarをカスタマイズ

式場のサイトを納品する際に、カレンダー形式での「フェア情報」を発信する必要がありました。 結婚式場のサイト制作、フェア情報をカレンダーで発信している企業って多いんですよね。 でもこれ、式場だけじゃなくて、他にもイベント情報を発信するのにぴっ…

query_postsは非推奨?代わりにget_postsで条件指定!投稿を取得する方法【WordPress】

投稿のループで、カテゴリを指定や除外したり、表示順や表示数を変更したりするなら…get_postsを使いましょう! 非推奨?のテンプレートタグ「query_posts」 query_postsの代わり使える?テンプレートタグ「get_posts」 条件の因数、入力例 1ページに表示さ…

WP管理画面、ユーザーごとに権限をカスタマイズ!【最優秀CMS・WordPressで複数ユーザー管理の場合】

WordPressで構築したHP管理をお客さん側で管理する場合。 リテラシーの低いお客さん側でもストレスなく更新できるような仕組みを作る必要がありますよね。 そこで今回は、納品前にしておいたほうが良いWPのカスタマイズ方法をご紹介します。 ユーザーの追加 …

スムーズスクロールが自由自在。アンカーリンクを使いこなす!scrollsmartly.jsが神がかってる。

スムーズスクロールはjavascriptとかjQueryを使うことが多いと思うのですが、他のjavaとの兼ね合いとか、なんかうまくいかない部分があったりしますよね。 そこで出会ったのが、scrollsmartly.js。

超便利!カスタム投稿タイプが簡単に作れるCustom Post Type UIの使い方と表示方法を解説!

今回はWP「カスタム投稿タイプ」について徹底解明! 複雑なシステムを要するサイトを作成の場合、使いこなせればとーっても便利な機能です。ぜひお試しを! カスタム投稿タイプを使おう!! カスタム投稿タイプって? カスタム投稿はこんな時に便利 クライア…