サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
WWDC24
inthecom.net
全面背景動画のjQueryプラグインはよくありますが、今回は特定のdiv内だけに動画を表示させる方法をご紹介します。 完成形 HTML <div class="main-visual"> <img src="★URL★" alt="この画像は動画の上に来ます"/> <video autoplay loop poster="★動画の一番初めをスクリーンショット★" id="bgvid"> <source src="★.mp4で終わるファイルを指定★" type="video/mp4"> </video> </div> 動画の上にキャッチコピーを乗せると良い感じになります。 スマートフォンでは背景動画は自動再生されないので、htmlを変える必要があります。 CSS .main-visual { height: 600px; background-size: cover; text-align:
※2017年1月29日 functions.phpを編集しました(カテゴリー説明にHTMLタグが使えるようになりました) この記事はこちらのサイト様の記事を「HTMLをWPテーマ化する時の手順リスト」大変参考にさせていただき作成しております。 最近、DreamweaverなどでHTML・CSS・imageファイルでサイトを組み立ててWordPressテンプレート化して使用しています。 今更ですがWordPress内で最初からサイトを構築すると効率が悪いことに気づきました。 準備として以下のようにローカルでHTMLベースのサイトを作成しておきます。 いつでも戻れるように、HTMLベースのフォルダをコピーして「WP用フォルダ」を作成し、以下の手順を行ってください。 WordPressテンプレート化の手順をご紹介します。 imageファイルを紐付るローカルで作成すると以下のように画像が相対パスに
スマホの画面表示が綺麗になっていくにつれて、従来のJPGやPNG形式の画像ファイルだと粗が見えてくるようになりました。 特にサイトの印象を決める「ロゴ」がPNGだとスマホでにじんで見えることがあってカッコ悪い。 今までSVGファイルを使用してこなかったので、作成方法から導入方法まで分かりやすく解説します。 SVGファイルの作り方 SVGファイルはIllustratorで作成します。 アウトライン化をかけて、「ファイル」⇒「別名で保存」でSVG形式で保存します。 WordPressでSVGファイルをアップロードできるようにしよう functions.phpに以下のコードを足してください。 そうすると「メディア」からJPG・PNGのように追加できます。 //svg function my_ext2type($ext2types) { array_push($ext2types, array('
今回のテーマは、WordPressで作成したサイトのトップページに最新5記事の「タイトル」「日付」「抜粋文章」を取得する良くあるパターンですが、さらに特定カテゴリーを除外したいときに使うコードです。 「お知らせ」カテゴリーのナンバーは”3″です。調べ方はこちら(記事ID・カテゴリIDを確認する方法) お知らせにはカテゴリー”3″を表示して、最新記事にはカテゴリー”3″以外を表示します。 お知らせ欄のコード <h2 class="title">最新のお知らせ</h2> <ul id="newscarousel" class="jcarousel-skin-tango"> <?php query_posts('posts_per_page=2&cat=3&paged='.$paged); ?> <?php if ( have_posts() ) : while ( have_posts() )
ゆっくり変化させるとそれだけでリッチに見えます。 リンクにhoverを追加してそれをゆっくり変化させるCSSをご紹介。 文字リンクをゆっくり変化させる a{ color:#006898; text-decoration:none; color:#006898; text-decoration:none; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } 画像をゆっくり変化させる a:hover img { opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.
簡単に言うと、table th部分をスマホで幅100%にして見やすくするというもの。 HTML <table class="shokai"> <tbody> <tr> <th>店名</th> <td>海鮮戸ばた えびす丸</td> </tr> <tr> <th>ジャンル</th> <td>魚介料理・海鮮料理、居酒屋、郷土料理</td> </tr> <tr> <th>TEL・予約</th> <td>0952-29-6120</td> </tr> <tr> <th>住所</th> <td>佐賀県佐賀市中央本町2-7 <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3336.4908031500313!2d130.301833!3d33.25364099999999!2m3
※2015年6月4日に最新情報へ更新しました。 先日大量のGmailアカウントを独自ドメインアドレスにする作業があったので、その作業内容を公開します。 内容は ムームードメインで独自ドメインを取得していて、ロリポップサーバーで管理してる状態 Gmailを使用していて@gmail.comを@独自ドメインに変更したい Googleの独自ドメインアドレスのサービスは有料なので、なんとか無料でやれないものか 独自ドメインのメールアドレスを取得する これはロリポップ公式サイトでマニュアルとしてあります。 ロリポップでの独自ドメインメールアドレス作成方法 Gmailアカウントに独自ドメインのメールアドレスを追加する まずロリポップのユーザー専用ページにアクセスして、左側にある「メールツール」→「メール設定 ロリポップ!webメーラー」をクリックします。 画面はそのままにしておいて、Gmailアカウン
賃貸・売買サイトではとにかく情報を分かりやすく、詳しく、問い合わせしやすいようにすることが大切です。 そのためには物件画像は最低10枚以上必要ですし、今からは紹介動画も物件ごとに用意する必要があります。 そんな中、GoogleMapsのストリートビューの導入は非常に重要です。不動産屋に合う前にサイトで周辺環境・物件の中身を確認できて、あとは現地にいってちょっと確認するだけ、ってことになったら素晴らしいじゃないですか。 実体験として、私は事務所を借りるときに10件近く物件を見まわりました。サイトで詳しく載ってたら行かなかったのに!というところが半分くらいあって、サイトの充実というのは訪問者にとってものすごく重要だと感じています。 今回紹介するのはストリートビューのレスポンシブサイト導入方法です。 GoogleMapsのコードを取得する H27.4.24に確認したところ以下の方法でコードが取得
GoogleMapはほとんどのサイトに設置してあって、スマートフォンからでも簡単に見れて分かりやすい。 埋め込みはiframeを使うのでレスポンシブに適用させるためにはレスポンシブ用のCSSが必要です。 新しいGoogleMapを埋め込んでみよう! トップページにいって、表示したい住所を打ち込み、右下の「地図を共有/埋め込む」をクリック 「地図を埋め込む」のタブをクリックして、iframeコードをコピーしてサイトの表示したい場所に埋め込むだけ GoogleMapをレスポンシブサイトに対応させてみよう! まずdivでiframeを囲みます。 HTML <div class="ggmap">iframeのコピーしたコード</div> CSS .ggmap { position: relative; padding-bottom: 56.25%; padding-top: 30px; heigh
ホームページを作り上げていく際にはまず イラストレーター・フォトショップで全体をデザインを固める フォトショップでスライスして画像でいくところとCSSでいくところを分ける ローカル環境でコーディング という段階でやっているんですが、ウェブ上でやると少し時間がかかるのでMAMPっていうmac用のローカル環境を使うことが多いです。 なのでローカル環境からサーバーへアップロードして公開する手順を踏む必要があります。 ドメイン・サーバーはムームードメインとロリポップ 作成しているサイトのほとんどは「ムームードメイン」でドメインを取得して、「ロリポップ」で保管しています。 この環境とは違う方だともしかすると迷ってしまうかもしれません。 事前準備 ロリポップのユーザー専用ページの左サイドバーの「WEBツール」>「データベース」をクリック。 データベースがない方は新しく作成,既存のデータベースを使っても
このフォームのポイント 入力しやすいデザイン AjaxZipを実装して郵便番号から自動住所入力 スマホ対応(レスポンシブに対応しています) html,cssチートシート まずContactform7をインストールして、html部分に 以下のTextをtextに変換してご使用ください。 <table class="table table-bordered table-striped table-contactform7"> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">お名前</span></th> <td>[Text* your-name akismet:author watermark"例:山田 太郎"] </td> </tr> <tr> <th><span c
今回は特定の固定ページだけヘッダーを変える方法をご紹介します。他にも特定の投稿・特定の記事のサイドバー・特定カテゴリーのサイドバーを変える方法などかなり幅が広がりますよ〜 特定の固定ページのヘッダーを変えるphpコード <?php if (is_home()) {?> <p>ここにトップページに書きたいコード</p> <?php } else if (is_page('19')) { ?> <p>ここに固定ページID19に書きたいコード</p> <?php } else{ ?> <p>ここにトップページ・固定ページID19以外に書きたいコード</p> <?php } ?> これは固定ページID19のコードを変更したいときに書きます。 数字はurlに書いてあります。urlの吐き出し方をカスタマイズしている方は番号を調べるために方法があります。 特定複数の固定ページのヘッダーを変えるphpコー
弊社のウェブ制作はご紹介制となっております。 代表の石橋を知っている知人の方の紹介、既存お客様の紹介のみ初回打ち合わせさせていただいております。
このページを最初にブックマークしてみませんか?
『佐賀のホームページ制作なら株式会社イン・ザ・コム』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く