WEBデザインbxsliderオプションの解説と動かない時のチェックポイント
簡単にスライドショーが作れる「bxslider」ですが、オプションを指定することで色々と設定を変えることができます。が、最初にハマったのは、そのオプションの書き方・・・【どこに書くの？】公式ページの解説にある、インストールの仕方に書いてある...
CSS
WEBデザイン
WEBデザインスライドショーが簡単に作れるbxsliderが便利過ぎる
なんか難しそうなスライドショーが、やってみたら超簡単に実現できた！こんな奴ですね。（今どきないと思いますが、当然、javascriptが動かないブラウザでは画像が羅列されるだけとなります。）最近の企業HPのトップページなども、画面いっぱいの...
WEBデザインposition: sticky; やってみたら超簡単で面白かった
近年新たに追加された機能で、「position:sticky;」というのがあるのですが、ちょっと必要に迫られて（いや本当は必ずしも必要というわけではなかったのですが、興味本位で）使ってみました。（こちらにはまだ解説が載っていないですね。）最...
WEBデザインWordPress（Cocoon）の記事入力時に背景を黒にしたいんです
個人的な好みの問題ではありますが、自分の場合、WordPressで記事を書いている時に、背景を黒にしたいのですよね。背景が白っぽい画面に長時間向かっていると目が疲れるのです。。。で、以前、これを実現するために、関数を書き加えるなんて方法を発...
WEBデザインFACEBOOKにシェアされた記事のアイキャッチ画像を変更したい（※fb:app_idはなくても問題ない、というかないほうがいい）
フェイスブックのシェアデバッガーというのがありますシェアデバッガー-FacebookforDevelopersdevelopers.facebook.comここにurlを入れると、自分のサイトがFACEBOOK上でどのように表示されるか確認...
WEBデザイン上下左右の中央寄せ（中央揃え）まとめ覚書
どうしても、忘れてしまって、毎回調べる事になって無駄な時間を使うので、まとめ覚え書き。(1)領域内のコンテンツの中央揃え(1)-b 内側の領域をinline-blockに(1)-c 外側の領域のpaddingで攻める(2)領域の中央寄せ(左右marginを自動設定に)(3)tableを使う(4)display:table-cellを使う(5)Flexboxを使う
WEBデザインCSSでも変数が使える（ただしIE非対応）
CSS内でも実は変数が使えます。書き方はセレクタ{--好きな名前:値;}使う時var(--好きな名前)◆具体例１宣言p{--haba:300px;}使う時p{width:var(--haba);}◆具体例２宣言p{--fname:Huiji...
WEBデザインバナー広告の下にできる余分な隙間をなくすには？
サイドバーに広告ウィジェットを置いていますが、A8やもしもの広告を貼ったら、下に謎の隙間ができてしまうように。まぁ気にするほどでもないと言えばないかも知れませんが・・・・・・気になる～(笑)下に貼ってみます、環境によるかも知れませんが、多分...
WEBデザインCocoon高速化（HTML圧縮）さらにいくつか問題点の修正
Cocoonの高速化機能を実行してみて、いくつか修正しなければならない点がありました。ひとつは、スタイル記述時のコメントアウトの削除HTML圧縮機能をオンにすると、コメントアウトが全て削除されるようです。そのため、bodyタグ内にあるsyt...
WEBデザインiFrameの高さを自動取得する【Javascript】【覚書】
このブログは、上部に"黒板"状のイメージで、「お品書き」を設置しています。このデザインに拘りがあってそうしているのですが、しかし、最初に読み込まれるデータが、その分無駄に多くなるわけで、SEO的には良くないという説もあるわけで。（※例えば検...
WEBデザインCSSのFILTERプロパティのTEST グレーにした画像をカラーに戻せるか？
ちょっと分かってきた、画像編集と一緒で、一度掛けてしまった効果をあとから除去することはできないっぽいですね。一度ボカしてしまった画像を、ぼかしを無効にして元に戻すことができないのと同じか。外側の領域でグレースケール(grayscale(10...
WEBデザイン画像編集ソフトを使わずCSSだけで画像をグレーにできる
存在は知っていたもの、使ったことなかった、CSSのFilterプロパティ使ってみたらめっちゃ面白かった（※でも非対応ブラウザ多し）ブログのデザインをグレー階調にしたくて、デザイン変更をしていたのだけど、画像をグレーにするには・・・と思ったら...