TOPページから別ページの指定の箇所に飛ぶアンカーリンクが、Safari（ver5）、スマホがアンカーの箇所に飛ばない場合。 Wordpressのパーマリンク設定を「数字ベース」に変更する。

html５では＜a name=""＞＜/a＞は使えない。 HTML5でアンカーリンクを設定する場合、要素に関わらすid属性を指定することでアンカーリンクを設定できる。 <div class="problem" id="01"> <div class="problem" id="02"> <div class="problem" id="03"> <a href="priority#01">priorityページの01へ</a> <a href="priority#02">priorityページの02へ</a> <a href="priority#03">priorityページの03へ</a></div></div></div>

新着情報を表示してくれるプラグイン[What's New Generator] 日付指定で新着に『NEW』マークを付けてくれる。 設定後 設定画面にあるショートコード[showwhatsnew]をトップ固定ページに張り付ける。 トップページ用のテンプレートファイル [frontpage.php] …

Font Awesome：アイコン型ウェブフォント wpのheader.php に下記記述する。 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> fa-pencil-square 使用する場合 使用するクラス名 fa-lg（ 約1,33倍 ） fa-2x（ 2倍 ） fa-3x（ 3倍 ） fa-4x（ 4倍 ） fa-5x（ 5倍 ） <p class="contact"></p></link>

WPのテーマでCSSが効かない（ページ作者のスタイルシートが優先になっている）等の場合に使用してスタイルを優先させる。 「プロパティ: 値」の後に半角スペースで区切り、!importantを配置する。ただし、「プロパティ: 値」ごとに指定する必要がある。 body…

コードのカラーリングの為の プラグイン「WP-Emmet」設定→コードカラーリング有効化→オプションを保存

表示設定→フロントページの表示→最新の投稿 に設定。表示させたい固定ページを作り、適切な場所にfrontpage.phpに下記記述する。 <div id="pp-afterslider" class="entry-content"> post_content; ?> </div> メニュー編集→全てを表示→ホーム→メニューに追加

その画像の下に文字を入れたいのに、画像の右に文字が配置される場合。 投稿ページの画像タグの後に、下記入れる <div style="clear:both;"></div>

<table class="form"> <tbody> <tr> <th>お問い合わせ項目<span class="required">＊</span></th> <td> [select* your-menu "ご意見・ご要望・ご質問" "サポートについて"] </td> </tr> <tr> <th>お名前 <span class="required">＊</span></th> <td> [text* your-name] </td> </tr> <tr> <th>メールアドレス<span class="required">＊</span></th> <td>[email* your-…</td></tr></tbody></table>

文章の先頭、見出し部分にiconとして画像を表示したい！という場合に利用出来る。 指定した要素の「前”before”」か「後”after”」に画像を挿入することが出来る。 画像の位置をテキストを合わせる為に、positionを指定する。 wpの場合 ul li:before{ content:…

下記両方指定する。 IE用（元々ファビコンはIEが独自に実装していたもの） <link rel="shortcut icon" href="img/favicon.ico" type="image/vnd.microsoft.icon" /> 他のウェブブラウザ用（GIFやPNG画像も使える） <link rel="icon" href="img/favicon.ico" type="image/vnd.microsoft.icon"> 画像のMIMEタイプを指定する type="image/vnd.microsoft.icon" ICO形式の画像を使用する場合 type="image/gif…</link></link>

FlexSlider - The Best Responsive jQuery Sliderからダウンロードする。head内に下記記述する。 <link rel="stylesheet" href="flexslider.css"> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="jquery.flexslider-min.js"></script> head要素にスライダーを動かすスクリプトを追加する。（どっちがいいのかよくわからない…</link>

WordPressのテーマをバージョンアップしたら、Google Analyticsのトラッキングコードを再設定しないといけないので、『Google Analytics for WordPress』のプラグインを導入する。マニュアルでの方法で設定。 管理画面の「設定」から画面左中央あたりの、「M…

『The Responsinator』 iphone・Android・iPad・Kindleの枠にそれぞれWebサイトを嵌めこんで一括で表示してくれる。 縦横表示を同時に見られるので大変便利。 『Responsive Web Design Test Tool』 スマホからデスクトップまで各製品の画面サイズを選択する…

リスティング広告とは 広告を配信して「見込み客」を自社のHPにつれてくることが出来る一つの“集客方法”のこと。 「検索キーワード」をお金を出して入札して購入する。 あらかじめ登録したキーワードと同じキーワードが検索されたときに表示され、クリックさ…

どうにか友人のサイトをOPENしました。 「レスポンシブデザイン」対応のテーマを使用し、PCとスマホ（iphone5simulatorで確認）でCSSを微調整しながら作業したけど、スマホの方を意識しすぎて、PCのデザインがやや単調な感じになったのでまだまだ修正が必要…

ロリポップのＦＴＰサーバーにログインする。 現在のテーマにあるメインディレクトリのfavicon.icoを削除する。 [wp-content] → [themes] → [default] → 新規の[favicon.ico]をダウンロードする。 header.phpのに下記タグを入れる。 <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" /> faviconが表示されてい</link>…

WordPress3.5で(functions.php)等の更新をすると403エラーとなってしまうので、調べたらここのフォーラムに答えがありました。 どうもロリポップでアプリケーションのやり取りにおいて不正侵入を防御することのできるファイアウォールを導入した事が原因らし…

カラーがグラデーションになっていて、同じ彩度や明度の色相も一括で見られて便利！！ relColors

menuとか横に並べるのにdisplay: inline-block;が便利でfloatの代わりに使う。 IE7では縦に並んでしまうので、下記スターハックを指定する。 li { display: inline-block; *display: inline; /*for IE*/ *zoom: 1; /*for IE*/ }

タグ内に下記jsを記述する。 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

「Contact Form7」だと確認画面の表示がないので確認画面が用意されている「Trust Form」を設置。 開発者のブログ「カクニンプラスのweb日誌 / Trust Form-1.2を公開しました」を参考にしながら結構簡単に作れます。と思ったらWordPress 最新バージョン 3.5…

CSS3グラデーションのボタンが簡単に制作出来て、CSSまで書き出してくれる「CssGradientButton」。 オリジナルのボタンを作成するには、「Edit Button」をクリックする。 編集パネルでテキスト入力、サイズ、角丸、余白などの形状や、グラデーションを指定す…

viewportの指定(head要素内に記述)

先月より友人のCDジャケット、POP、サイト制作中。 最近はInDesign入稿が多くなっているようで初めて使ってみる。 複数ページの概念があるから、マスターページをコピーすれば複数のデザインが出来る。 デザインと一緒に画像の加工も同時に出来て便利。 画像…

サイトに関してはスマホでも見れる最近よく聞く「レスポンシブWebデザイン」で・・・と思っていろいろ検索してみたけど、１から作るのはものすごく時間かかりそうなので結局WordPressをカスタムする事に・・・・ 久々に触ると戸惑う事ばかりで、尚かつContac…

先日は終始ひどい内容の話、受け答えで皆様の貴重なお時間をすみませんでした・・・・・ いろいろ話す内容を考えていたつもりでしたが、緊張というか完全な準備不足でありました。 ６ヶ月の訓練の詳細も忘れがちで、見直しをしておくべきだった。 という事で…

モチベーション０（ゼロ）の最近だったが、先日いろいろお話を聞けたこともあり、 せっかくの訓練を無駄にしないよう友人に教えてもらった東京しごとセンターに行ってみた。 登録して担当の人とカウンセリング、求人検索をしてきた。 ハローワークとかぶって…

最終課題を先方と再度打ち合わせしてやっと修正。 横スライドは生かして、ブログ、カレンダーを常に表示するように変更。 店名は雑誌等にも掲載されたりするので「ボンボン・シエル そらのおやつ 」に戻しました。 ファビコン(お気に入りアイコン) 16px × 16…

前回のペースですぐ出来そうと思ったけど、jqueryとタブ切り替え等にものすごく時間がかかってしまった・・・・。 既存サイトのjqueryをまんま解析しようと思ったけど断念。 やっぱりjqueryそのまま使うのではなく、いろいろアレンジしているのかも。 IE6,7…