はてなブックマーク

※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アカウン

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コー