サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
tasudesign.com
レスポンシブサイトが主流になっていいる今、わざわざレスポンシブ機能を無効化することがありませんでした。しかし先日BootStrap3を使ったサイトを手がけた際に何とレスポンシブを一旦無効化する必要が出てしまいました。なので改めてレスポンシブ機能のを無効化する方法を調べて見た所ちゃんとありました。邪魔な時に消しちゃいたい時はお使い頂けたらと思います。 レスポンシブ機能の無効化 設定事態は簡単でBootstrapの本体を弄る必要はありません。 記述コードの削除とnon-responsive.cssを使用すれば無効化することができます。 先に下記URLより無効化のCSSファイルをダウンロードして下さい。 non-responsive.css 下記のコードを削除する <!-- 下記のコードを削除する --> <meta name="viewport" content="width=device-w
SEOを設定する時、Wordpressでは大多数の人がプラグインで設定していますよね。実はカスタムフィールドを代用することも出来るんです。今回はfunctions.phpでカスタマイズしたメタ情報とページタイトルを出力する方法をご紹介します。 カスタムフィールドの設定 カスタムフィールドは投稿画面の「投稿」→「表示オプション」→「カスタムフィールド」にチェックを入れると簡単に表示されます。今回はfunctions.phpに記述していきますので、チェックを入れる必要はありません。(表示させるとカスタムフィールドが重複するので注意) カスタムフィールドの追加 それでは「投稿」と「固定ページ」へカスタムフィールドを追加していきましょう。 //----------------------------------------- // 投稿・固定ページ カスタムフィールド追加 //----------
サイトをPC・タブレット・スマートフォンなどの端末に対応するためにナビゲーションメニューをレスポンシブ対応しました。その時採用したjQueryプラグイン「MeanMenu」をご紹介します。 必要なファイルと詳細はコチラ 下記リンク先からJavaScriptファイルやその他ファイルをダウンロードして下さい。 MeanMenu MeanMenuのデモサイトはコチラ ダウンロードファイルの使用方法 ナビゲーションメニューの表示に必要なコードは非常にシンプルです。 header <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <title>MeanMe
Photoshopで制作する時にシェイプを使ってパーツを作ることが多いのですが、上手く型抜きが出来ない!という方にもちょっとした参考になると思うので良ければ実践してみて下さい。 シェイプを型抜きする方法 この方法は通常のパス抜きで上手くいかなかった所から生まれました。今回は四角と丸を重ねて丸の部分をまるごとパス抜きする形式をご紹介します。 手順説明 まず、四角と丸の重ね位置関係を決めます 次にレイヤーウィンドウから丸レイヤーの「ベクトルマスクサムネール」(赤枠)をクリックします。(クリックしてサムネイルに白枠ができると選択された状態です。) 選択できたら「command(?)+C」でパスをコピー。 コピーした状態で四角レイヤーの「ベクトルマスクサムネール」(赤枠)を選択し「command(?)+V」でペーストして下さい。ペーストし終わったら丸レイヤーの表示は非表示にしておきましょう。 同じ
HTML5とCSS3の普及により、表現できる所はなるべくCSSで対応させることにしているのですが、旧ブラウザでは対応していない指定がたくさんあります。その中で、IE8でnth-childを使えるようにするために行った方法をご紹介します。 IE8ではnth-childが使えません 結論から言うとIE8では「:first-child」は使えるのに「:last-child」と「:nth-child」は使えません。はい、困りました! 「:nth-last-child(n)」で表現したい所など、まず上手くいくはずがありません。クラス名を付ければ対応できますが、そうもいかない事案も発生する事もあります。そこで何か手はないものかと調べて見たら、ありました!しかもCSSの記述のみで対応可能という事なので実践してみました。 例えば <div class="list"> <ul> <li>リスト1</li>
backgroundで背景設定を作ると思わぬ所でつまづいてしまったので、その解決方法を記事にしてみました。なお今回はcreative memomemoさんの記事を参考にさせて頂いております。 background指定した画像を拡大縮小する方法 背景画像を可変で表示したいだけなのですが、これが曲者でbackground(背景画像)で指定した画像はheight(高さ指定)の基準がないと表示されない欠点があります。ならば指定すればいいのですが高さを設定をするとウィンドウサイズの拡大縮小時に高さ分の余白残りや画像切れをおこします。 高さ設定した場合、画像のように高さの値はそのままなので余白が残ってしまいます。 height:0;でpadding-topで高さ(余白)を設定 高さが与えられないならばどうしたものかと色々探した結果、paddingでの余白空けという発想に辿り着きました。ポイントはhei
このページを最初にブックマークしてみませんか?
『tasudesign.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く