カテゴリー: クリエイティブ・制作

主に制作・創作に関すること。Web制作に関することやコンテンツ・表現などのデジタル制作物が主な話題。

    HTML+CSSでfocus時にoutline(外枠)を表示しないようにする方法

    inputタグやスライダーなどを選択している時に表示される外枠。こちらはoutlineというプロパティ。デフォルトだと表示される設定になっているが、見せたくない場合もある。そういった時はnoneとしてあげることでリセットできる。 inputのCSS 例 input:focus{ outline: none; } :focusという擬似クラスがあるので、設定すると気になるアウトラインが消せる。 *:focus{ outline: none; }

    WordPressのfunctions.phpを使ってパーマリンクを半角数字や英語に変換する方法

    パーマリンクを半角数字または、英語のタイトルなら半角英語に設定する a-z,0-9以外のものが入ってきたら、post_IDとなるので注意。 function post_slug_change( $slug, $post_ID, $post_status, $post_type ) { if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) { $slug = utf8_uri_encode( $post_type ) . '-' . $post_ID; } return $slug; } add_filter( 'wp_unique_post_slug', 'post_slug_c...

    Dreamweaverの便利な、これは使えるかもしれないショートカット

    Dreamweaverの便利な、これは使えるかもしれないショートカット コードに関するショートカット DreamweaverはプレビューができるWebコーディング・制作用のツールだが、やはり真価が問われる機能はコードの入力をミスなく効率的に作成していけるかというところ。 コードの候補(タグの補助)、自動インデントなど便利な機能は標準で備わっているが、コマンドを打ったり設定しないと使わないものも。 便利な機能は...

    futureshopのcommerce creatorでWordPressの固定ページをJavaScriptで表示したものを外部参照しトップページに表示する方法

    HTML 設置したいパーツにJavaScriptを記述する。 <script type="text/javascript" src="/blog/news/"></script> news.php WordPressの固定ページ機能を使って、テンプレートファイルを作成し、以下のようなコードで、他のパーツからJavaScriptとして参照する。 <?php /** * Template Name: ****** * JavaScriptとして出力します */ ?> <?php query_posts( array( 'post_type' => 'post...

    HTML+CSSで高さを揃えて、縦横の中心に表示する方法

    HTML <div class="list"> <ul> <li><a href="#"><span><img src="images/img-1.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-2.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-3.png" alt=""></span></a></li> <li><a href="#"><span><img src="images/img-4.png" alt=""><...

    HTML+CSSでgridを使ったレイアウト方法/サンプル・活用方法

    10×10のグリッドのサンプル例。 HTML <div class="sample-grid"> <div class="grid header">header</div> <div class="grid sub1">sub1 <ul> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> <li><a href="#">list</a></li> </ul> <ul> <li><a hre...

    is_post_type_archiveを使って、特定のカスタム投稿タイプのアーカイブ(一覧ページ)の処理を分岐する方法

    特定のカスタム投稿タイプのアーカイブ(一覧)かどうかという処理結果を使って、処理を分岐させる方法。カスタム投稿のアーカイブで、指定したカスタム投稿タイプ名をもとに処理を分岐することができるので、あとはif文を使って分岐する。 trueかfalseが返ってくる処理 is_post_type_archive( 'item' ) を使います。 if ( is_post_type_archive( 'item' ) ) { // 投稿タイプ:itemの処理 } 例えば、どういった...

    WordPressで本文のタグを除去して、指定した文字でカットして(文字を丸めて)表示

    本文をそのまま表示したり、概要分を使って表示させることもアイデアとしてはあるが、自動的に記事の一覧などに表示させる時に、文字を決められた文字数でカットして表示したい時に、次のようなコードを使うと実現できる。 PHP // 本文を丸める $ex_content = wp_strip_all_tags ( $post->post_content ); if ( mb_strlen( $ex_content ) > 100 ){ $ex_content = mb_substr( $ex_content, 0, 100, 'UTF-8' ); ec...

    futureshopのcommerce creatorで、商品グループ・商品詳細ページに独自コメントを表示するための置換文字

    commerce creatorには、独自コメントというコメント・説明文を入力する枠が、商品グループや商品に存在する。パーツにこの独自コメントを入れることにより、入力した独自コメントの内容を表示させることができる。 商品グループ 独自コメント(1) {% category.comment_1 %} 独自コメント(2) {% category.comment_2 %} 独自コメント(3) {% category.comment_3 %} 独自コメント(4) {% category.comment_4 %} 独自コ...

    futureshopのcommerce creatorで、こんにちはゲスト様・●●様とログイン・ログアウトの表示を切り替える方法

    futureshopのcommerce creatorで、会員登録していない方は、 会員登録している方は、姓名を表示し、 こんにちは!ゲスト様と表示する方法・サンプルコード。 会員情報置換文字を使って、実現します。 下記の通り、fs-clientInfoというクラス名の付与された要素(div等)で囲んだ中に置換文字を入れる。fs-clientInfoが付与されていないと、動作しない。 HTML <div class="fs-clientInfo">置換文字</div> ...