bamboo_nのブックマーク - はてなブックマーク

[Sass] 横幅/高さ、margin/padding、絶対位置などの px（ピクセル）値指定を %（パーセント）値に変換して指定する mixin スペニット

横幅やマージンなどを % で指定したい場合、親ボックスの横幅などから % の値を計算する必要があります。複数の値を % 値で指定するとなると計算がめんどくさく、また計算ミスの可能性も出てきます。そこで、Sass の mixin 機能を使えば簡単に変換することができて便利かなと思い px 値を % に変換して指定する mixin を考えてみました。

bamboo_n 2016/11/15

sass

リンク

jQueryの短いコードでコンテンツをフェードインしながらふわりと読み込む方法

コードの細かい解説が参考記事にあります。とても参考になりました！サンプルを作りました。（サンプルデモ→”fadein｜memocarilog demo”）使い方ヘッド内で以下のようにjQuery本体とコードを読み込みます。読み込む時間とフェードインの時間を指定できます。 <script type="text/javascript" src="http://ajax.google apis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $('#フェードインしてくる要素').hide(); }); var i = 0; var int=0; $(window).bind("load", function() { var int=setInt

bamboo_n 2016/05/15

リンク

[CSS3] rgba() 値が使えない IE8 でも背景のみを透過できるクロスブラウザな背景の透過方法

要素の背景のみを透過したい場合は background-color に rgba() で背景色と透明度を指定しますが、いつものことながら IE8 は rgba() の色指定に対応していません…。そこで、IE8 にも対応したクロスブラウザで背景色の透明度を指定する方法をご紹介します。 IE8でも背景のみを透過するサンプルとそのコード背景に透明度0.4の黒を指定したdivと、全く透明でない黒背景のdivを比較の為におきました。上の div は IE でも背景のみ透過されて表示されます。（CodePen のインラインフレームだと IE8 では正常に表示されないようです…） See the Pen ie8でも背景を透明にする by Saomocari (@Saomocari) on CodePen. このサンプルでは、背景を透明にしたい要素に対し以下のように指定しています。 div{ filte

bamboo_n 2016/04/08

リンク

WordPressでwp_enqueue_script()を使ってJsファイルを読み込む時の注意点

WordPressでwp_enqueue_script()を使ってJsファイルをヘッダーなどで読み込む際の注意点です。 WordPressにはjQueryなどのライブラリが同包されており、それを wp_enqueue_script() というタグを使用して呼び出す事ができます。（WordPressで外部ファイルに置いたjQueryスクリプトを使う | memocarilog）ハンドル名を記入する事が必須となっていますが、そのハンドル名で使えないものがあるので注意が必要です。上記の参考記事にもありますが、wp_enqueue_script()で読み込まれたスクリプトは一旦グローバル変数 $wp_scripts に入るようなのですが、この $wp_scripts にはデフォルトで登録されているスクリプトがいろいろある為、デフォルトと同じハンドル名を付けた場合は wp_enqueue_scr

bamboo_n 2016/03/25

リンク

[WordPress] カスタムメニューのコードから余計なタグやクラスを削除しスッキリさせ、かつカレントクラス機能を付ける

カスタムメニューを使うとオリジナルのメニューを管理画面で簡単に作れて便利ですが、カスタムメニューで生成されるコードは余計な div や id、class が入ってしまいます。この余分な部分を削除して、カレントクラス表示の機能は残す方法です。カスタムメニューをデフォルトのまま表示したコードは以下のようになっています。これをスッキリ必要なものだけにしていきます。具体的には、ul 要素を囲っている div 要素を削除し、ul と li 要素に付与されているID、クラスを削除します。ただ、現在開いているページメニューに付けられる current-menu-it em クラスは便利なので、それと同じように表示中ページの li には current のクラスを付けるようにします。メニューを囲っている div要素と、ul要素に付与されているID・クラスを削除するカスタムメニューは表示したいテンプ

bamboo_n 2016/03/15

リンク

レスポンシブWebデザインにする為に行った事のまとめ

ブログのデザインを変えました！（IEでの確認未）以前からモバイル対応もしたいと思っていたので、これを機にレスポンシブWebデザインを取り入れてみました。今のところ800pxと480pxでデザインが変わる様にしています。忘れないうちにMedia Queriesの書き方、スマートフォンへの対応方法など、このブログでレスポンシブにする為に行った事をまとめてみました。参考記事 edia Queriesの使い方やスマートフォンへの対応方法など下記の記事を参考にさせて頂きました。 Media Queriesの書き方 Media Queriesの書き方は3種類あります。このブログでは2.のスタイルシート内で画面サイズ事のスタイルを適用するようにしました。 1. スタイルシートをサイズごとに用意するスタイルシートをサイズごとに用意し、HTMLのヘッドを読み込む時に画面サイズによって適用するスタイルシ

bamboo_n 2015/10/23

リンク

WordPressのカスタム投稿タイプの作成と表示

カスタム投稿タイプの作成と表示方法です。カスタム投稿タイプを使うようにするにはregister_post_type()タグを使います。 <?php register_post_type( $post_type, $args ) ?> $post_typeには投稿タイプの名前が入ります。 $argsに配列で細かい設定を入れて行きます。 function.phpに下記のように記入すると、ダッシュボードに”テクスチャ”という項目が追加されてカスタム投稿ができるようになります。これは最低限のコードです。 register_post_type( 'texture', array( 'label' => 'テクスチャ', 'public' => true, ) ); ‘label’にはダッシュボードで表示される名前を入れます。 ‘public’ => true　にすると以下の値を設定した事になります