前回に引き続き、SVG関連の記事です。
svgは使い方が様々あり、
・imgタグとして使う
・cssのbackground-imageとして使う
・svgタグとして使う
といった使い方がありますが、今回はimgタグとして使った時に表示崩れが起きる問題についてです。
一昔前、iPadやiPhoneなどといったRetinaディスプレイが世に出た頃、Web制作の世界では通常サイズと2倍サイズの2種類の画像を書き出し、javascriptなどを使って表示を出し分けたりしていかに画像やアイコンを綺麗に見せるかといった技術が出回っていました。
現在ではブラウザやスマートフォーンの進化のおかげで、イラストレータで作ったSVG(オブジェクト)が画像と同じように使えるようになってきて、同じ画像を2倍で書き出したりといった手間が減ってきています。
私も案件によってはsvgを多用したり、svgタグをjavascriptで動かしたりとsvgの恩恵を受けていたのですが、、、
コーダーが嫌ってやまないInternet Explorer。
こやつでsvgタグを使うとheightが横幅に対して自動で設定されず、表示が崩れるといった問題に遭遇しました。
今回はjavascriptで解決できたので方法をご紹介。
WordPressに限らずブログを書いている方の多くは「目次」を作りたい!
と思ったことが一度はあるのではないでしょうか。
ただ目次を手動で作ってしまうと後日記事を編集した際に目次の箇所を直し忘れた、、、
なんて経験をされた方、多いのではないでしょうか?
筆者はなどかそんな経験があります。
そこでWordPressを使っている方に朗報です!
WordPressのプラグイン「Table of Contents Plus」を使えば自動で目次を作ってくれるので、導入方法をご紹介。
サイトの作りによってはiframeを使うことは今でもあると思います。
iframeの使用用途としては、
・自分で作ったページをiframeで読み込む
・外部サイトの動画などを読み込む
といった使い方があると思います。
そんな中、今回は自分で作ったページをiframeで読み込んだ際に、
MacのSafariの時に要素が透明化され表示されないといったバグに遭遇したので、
回避方法をご紹介。
WordPressでサイトを制作していると、ここはカスタム投稿で作って登録した方が楽だな〜
っと制作者サイドでなる時があるのですが、お客さんには関係ない・編集させたくない!
になるケースがありました。
お客さんが編集する箇所は投稿者権限だけで十分な場合、発行するアカウントの権限レベルに合わせて「投稿」「カスタム投稿」「コメント」「ツール」などを非表示にする方法があるのでご紹介。
レスポンシブやスマートフォン専用ページでページ内リンクを実装した時に、稀にページ内リンクが効かなくなる時があります。
理想はクリックしたらスムーススクロール(スムーズスクロール)して欲しいのですが、なぜか動作しない。
そんな時は普段使いしてるスムーススクロールのjsを紹介する内容に変更して見てください。
お問い合わせフォームを入力中に5ボタンマウスやトラックパッドを使用している方は間違えてページバック(戻る)を行ったことある方、多いのではないでしょうか。
今回は製作者のちょっとした心遣いで誤操作を防止できるのでそんな方法をご紹介。
XSERVER(エックスサーバー)がついにnginxを導入しました!
nginx待っていた方は多いのではないでしょうか!?
私は今まで仕事やプライベートでオススメのサーバは?
と聞かれた時に必ずと言っていいほど「XSERVER」をお勧めしてきましたが、さらにお勧めできる理由が増えちゃいました。
今回はnginxってなに?
って方にnginxの素晴らしさとXSERVERのすごさをご紹介できればと思います。
WordPressでサイトを作成している際、固定ページはよく使うと思いますがその中で問題になりやすいのが「ビジュアル」「テキスト」のモード切り替えだと思います。
切り替えるたびに自動でpタグなどがついてしまいコーディングの仕方によってはサイトが崩れることも。。。
この問題を解決させるには固定ページでそもそも「ビジュアルモード」が存在しなければいいのだ!
ということで固定ページでビジュアルモードを使用不可にする方法をご紹介
スポンサーリンク