ワードプレスでは、カスタムフィールドを使うと、 特定のページの特定の場所に特定のコンテンツを 表示させることができます。 さらに、コンテンツを編集するのにHTMLの知識を 一切不要にすることが可能です。 お客様に安心して更新していただけるサイトを …

はじめてワードプレスで個人のサイトを 作ることに挑戦しておられる生徒さんと ワードプレスのレッスンを行いました。 ＜目に見えること＞ ・サイトの見た目をどこで変えるのか？ ・テーマによってできることが違うのはなぜ？ ・有料テーマと無料テーマ、メ…

ワードプレスで投稿や固定ページやカテゴリーに 独自のデータを追加できるカスタムフィールド。 その正体は、 データベースの wp_postmeta テーブルです。 このテーブルには、どのページのデータなのかを 表すページIDが付いているので、ワードプレスは 投稿…

ワードプレスで投稿や固定ページやカテゴリーに 独自のデータを追加できるカスタムフィールド。 その正体は、 データベースの wp_postmeta テーブルです。 このテーブルには、どのページのデータなのかを 表すページIDが付いているので、ワードプレスは 投稿…

jQueryはjavascriptを拡張したようなものなので、 オリジナルのjavascriptには無いメソッドや構文が たくさん用意されています。 「覚えるのメンドクサイ」 「新しいこと勉強する時間がない」 という理由で避けてきた方も多いのではないでしょうか？ 私もそ…

昨晩、WebデザイナーさんとjQueryのレッスンでした。 レスポンシブなサイトによくある、スマホメニューを 開いたり閉じたりする動作をjQueryで作成しました。 ボタンをタップするとメニューがふわっと表示され、 もう一度タップするとふわっと消えていくメニ…

ワードプレスのページやカテゴリーにはスラッグという ものがあり、公開ページのURL末尾に自動で付きます。 例）「日本語のスラッグ」というスラッグのページ http://xxxx.com/日本語のスラッグ ブログサイトなどでよく見かけますよね？ ワードプレス自分で…

モバイルファーストとは、モバイルデバイス向けの 最適化を優先したウェブページの作り方を言います。 コーディングにおいては、 モバイルでアクセスしたとき最小限のリソースのみ 読み込むようにすることで、表示速度を無駄に遅く しないという配慮もモバイ…

<img>タグを画面サイズに応じてレスポンシブに切り替え、 なおかつiPhoneのようなRetinaディスプレイの場合は高解像度版の 画像を選択的に読み込ませる方法です。 <picture> <source media="(min-width: 768px)" srcset="images/main_visual_l.jpg"> <source media="(min-width: 320px)" srcset="images/main_visual_m.jpg 1x,images/main_visual_m@2x.jpg 2x"> </source></source></picture>

使ったことがない方はぜひお試しください。buchineko.website プレビューしながらCSSが書けるから、 ピクセル単位の微調整もラクラク。 入力候補が出るので少し文法を忘れてもOK。 愛用しています。

WordPressが他の無料ブログと決定的に違う点は、 自分のサーバーにインストールして使うことです。 その分、間違った変更をするとログインできなくなったり、 サイトが真っ白になることがあります。 真っ白になるのは、そのページを表示するための HTMLが正…

レスポンシブという言葉は浸透してきましたが、 Retinaディスプレイへの対応をするかしないかで 制作の手間が変わることや、Retina対応の必要性を 考えておられるクライアント様は少ないようです。 そんなクライアント様と見積交渉する上で、 Retina対応の必…

WordPressには、お問い合わせなどのCTAを ブログ記事の下に自動で表示することができる プラグインがあります。 CTAの表示内容をプラグインの画面で変更すると 全てのページに一斉に反映されるので便利です。 しかし、お使いのテーマによっては 「投稿」以外…

アイコンをタップするとメニューが表示され、 もう一度タップするとメニューが消える。 レスポンシブなサイトで必ず見かけるスマホメニューを 初めて javascript を学ぶ生徒さんにお教えしました。 きちんと改行しても、 たった10行程度のプログラムで作れる…

在日観光客へのガイドとなるウェブサービスを 立ち上げるべく、WordPressを土台に各種APIの 組み込みに挑んでおられる生徒さん。 いきなりAPIと言っても、ウェブの基本である HTMLやCSS、Javascriptがわかっていなければ 組み合わせるための『発想』が生まれ…

HTML4にあった「marquee」タグを使うと、タグの中に書いたテキストを 右から左へ自動でスクロールさせることができます。ホームページの「新着情報」などによく使われていますね。しかし、「marquee」タグは元々、IE（インターネットエクスプローラー）独自…

某スイーツショップのECサイトで 複数エリアへの配送に対応するように プログラムをカスタマイズしています。 プログラムは考え方１つ間違えると どこかで必ず不具合が起こるので、 通常のパターンだけ動作確認してOKでも 安心できません。 プログラムが想定…

サイト構築案件についてクライアント様から 評価をいただきました。良くも悪くも、直接 自分への評価を頂けるのは、フリーランスの 醍醐味ですね。 感謝☆☆☆☆☆

最新記事のサムネイルが２列（２カラム）で表示される テンプレートをカスタマイズして、３列（３カラム）に なるようにスタイルシートを追加しました。 ２カラムのレイアウトでは、 １つ１つのサムネイルが、50％ずつの表示幅を持つよう スタイルシートが記…

今日は生徒さんからワードプレスのページで 不具合があるとご連絡をいただきました。 とあるプラグインを入れたあと、 プログラムが正しく動かなくなったのです。 でも、そのプラグインを停止しても症状は 変わらないので、何が原因なのかわからない 状態で…

某Web学習サービスのフロントコーディング。 大きな山場を超えて明日、納品予定です。 BootstrapをCSSのグリッドシステムだけでなく、 アイコン（ウェブフォント）やナビゲーション、 スライダー、モーダルなど各種コンポーネントを ふんだんに活用したサイ…

仕事で出会った便利なカレンダープラグインをご紹介します。日別にイベントを挿入できるjQueryのカレンダーです。ビューや日付のレンダリング完了イベント（コールバック関数）が 用意されているので、動的にカレンダーの中身を書き換え可能です。イベントデ…

お待たせしました。WordPressの本がいよいよ発売です。 『WordPressのツボとコツがゼッタイにわかる本』 出版社：秀和システム 定価：２４００円（税別） 約３８０ページの大ボリュームです。 全国の書店には来週ぐらいに並ぶと思います。 Amazonなら今すぐ…

jQueryでチェック状態に応じて処理を分けたいとき $.prop("checked") $.is(":checked") $.attr("checked") どっちだったか迷ったときの道しるべ。 http://taneppa.net/jquery-prop/ 要するに、attr() はDOMの属性にアクセスするもの。 だから、DOMが変化しな…

画像でもCSSでもどちらでも可能ですが、 吹き出しなどの先端を中央寄せする方法。 <親要素> <子要素> </子要素> </親要素> のように、吹き出しの枠に相当するボタンなどを 親要素とし、その内側に子要素を配置して先端を 表示するタグの役目を負わせます。 親要素の位置を基準…

スマホユーザー層を取り込むために、 Webのアプリやシステムのフロントを レスポンシブにする需要が多い模様。 必然的に、スマホでの操作に反応して スライドやメニューを動かす「動作」を 組み込むことも求められています。 かつての、デザイン通りの「静止…

HTMLでタグを構造化したあと、 その構造を外側から内側に向かって過不足なく 辿りながら、CSSのセレクタを書き出します。 そうすると、 「あ！ここもスタイル付けなきゃ！」 「えっと、ここはどういうセレクタがいいかな？」 とか、行き当たりバッタリに悩む…

達成率を表すとき使われるプログレスバー。 バーの表示原理は意外とシンプルです。 ・背景色の違う２枚のボックスを重ねる ・手前のボックスに style="width:80%;" のように 横幅をパーセントで指定する これだけです。 バーの幅をCSSファイルに記述しないの…

苦労して探してやっと見つけたテンプレート。 でもヘッダー画像が入る場所がありません。 WordPressのテンプレートを探していて、 希望通りのパーツが全部揃ったものが見つかる ことはまずありません。 オリジナリティを求めれば求めるほど、 テンプレートと…

こんなページがあったとします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ヘッダー ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <section>ブロックA</section> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ←ここ <section>ブロックB</section> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ←ここ <section>ブロックC</section> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ←ここ <section>ブロッ</section>…