サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.doe.co.jp
早期アクセスの頃と比べたらフォントの読み込みスピードは改善されたとは言え、まだまだページ表示速度のボトルネックとなることが多い Google フォントですが、このスタイルシートの中身を調べてどのようにフォントの読み込みがされているのかを知って、可能であればページ表示速度改善のヒントにしたいです。 Google フォントを使う方法はいくつかありますが、最もメジャーなのは<head>内に以下のコードを追加する方法です。 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+San
WP REST API で呼び出す投稿データの数が数千件や数万件になりそうなら、API のデータをキャッシュしたほうがいいです。 この記事では WP REST API の独自エンドポイントを追加する方法と、キャッシュを保存する方法を書いていきます。 API のキャッシュの保存には『WP REST Cache』というプラグインを使用します。 WP REST Cache は一度キャッシュに登録しておくと、投稿の更新や削除をした時に自動でキャッシュの内容が更新されて便利です。 独自エンドポイントの追加方法 register_rest_route() 関数でエンドポイントを設定します。 以下のコードでは /wp-json/vendor/v0/post をエンドポイントに指定しています。 function prefix_register_custom_route() { ///wp-json/ven
大量の写真を指定した横幅にリサイズしたい時ってありませんか? ホームページ制作に限らず、大量の写真をPhotoshopで画像加工する例はたくさんあると思います。 そんな時に役立つのが、Photoshopの機能である『ドロップレット』。 ドロップレットはPhotoshopのアクションをアプリケーション化したもので、ドロップレットに画像をドラッグ&ドロップすることでアクションを実行してくれます。 大量の画像でも一括処理してくれますので、作業効率が格段に上がります。 1枚1枚手動で画像を読み込んでは画像加工して保存する・・・全く同じ動作を何十・何百回も行うと時間がかかりますし、何より気が滅入りますよね。 今回紹介するドロップレットを使って、少しでも作業効率アップに繋がることができれば幸いです。 ※この記事では、Windows版Photoshopのバージョン19(Photoshop CC 2018
これまではフレームワークっぽい仕様の CMS を設計するときは、「この部分に表示されるテキストはこのカスタムフィールドを使う」というような一方通行な設計になりがちだったのですが、この間なんとなく参加した WordCamp Tokyo 2017 で聴いたセッションで、投稿画面でカスタムフィールドを自由に生成して並び替えたりしていて、これはマネしなくてはと思いました。 そのセッションではフレームワークを使っていて導入が大変そうだったので、似たような機能を探したら Advanced Custom Field Pro に付いている『Flexible Content:柔軟コンテンツ』というアドオンで似たようなことができると分かりました。 ページビルダー系プラグインとの比較 カスタムフィールドのように管理画面からページを作成するのではなく、デザインが適用されたページでコンテンツを作成していく WPBa
やっぱり GUI ツールを使いたい コーディング作業には単調な繰り返し動作がたびたびありますが、それを変数や関数を駆使して効率化しようとするのはエンジニアのあるべき姿勢ではないでしょうか。 最近では gulp のような「タスクランナー」と呼ばれるツールや、Webpack のような「ビルドツール」がノンエンジニアでも始められるという触れ込みでよく取り上げられています。 たしかに Hello World! を表示するのは誰でも出来ますが、実際に運用していくためにはやはりいくつかハードルがあります。 なぜかというと、これらは CUI ツールだからです。 コマンドを打って、操作する、アレだからです。 GUI で操作できるコンパイラ『Prepros』 CUI ツールは「ちゃんと理解してないと動かない」ことが多く、直感的な操作をしたい人やマニュアル化してチームで共有したい人は敬遠しがちではないでしょう
横浜のホームページ制作会社DOEはサイトリニューアルやサイト更新のご依頼を承っております。 DOEは神奈川県の会社ですが、神奈川以外のWeb制作実績も豊富です。 品質が高くリーズナブルな価格でホームページ制作のおすすめプランをご案内いたします。是非お気軽にお問い合わせください。
レスポンシブデザインのサイトでは、PCサイズとSPサイズで別々のサイズの画像を切り替える場面が出てきますが、HTML5.1の新要素であるpicture要素を使えば効率よく切り替えることができそうです。 picture要素とは? picture要素は、HTMLでレスポンシブイメージを扱う仕組みのことです。 通常、レスポンシブイメージを扱うにはCSSのメディアクエリを使う方法が一般的ですが、picture要素を使うとHTMLソースのみでレスポンシブイメージが扱えるようになります。 picture要素を使うとこのようにPCサイズとスマホサイズで別の画像が表示されます。 具体的には、ブラウザサイズが600px以下ならスマホサイズの画像を、600px以上ならPCサイズの画像が表示されています。 使い方 picture要素は以下のように使います。 <picture> <source media="(m
Google Chromeのデベロッパーツール(=chrome devtools)の使いそうな機能についてまとめました。 デベロッパーツールはWEB制作者にとって役に立つ機能が詰まっているのでぜひマスターしたいところです。 今回の記事ではWindows版のChromeをもとにしているので、Mac版のChromeとはショートカットキーなど誤差があります。 要素の色を調べる スタイルパネルの右下に出てくるアイコンをクリックすると、 カーソルがスコープっぽくなって色を調べられます。 Hover状態で適用されるCSSを固定する エレメントパネルで右クリックしてメニューを表示させます。 そして [:hover] を選択するとDOMの左側にオレンジのアイコンが追加され、hover時のCSSが適用されます。 この方法はjQueryなどのjsによるhoverイベントには効きません。 DOMエレメントをHT
Summaryカード TwitterではSummaryカードを設定することで、Twitter上での記事のプレビューを設定できます。 Facebook sample https://www.facebook.com/sharer/sharer.php?u=###url### OGP設定 OGPを設定することでFacebookでリンクをシェアしたときのプレビューを設定できます。 OGPを設定するためにはFacebook Developersでの新規アプリの作成と、metaタグの設定をします。 参照:Open Graph story - シェア機能 OGP設定はFacebook以外でも有効になる場合があるようです。(Google+、Linkedin等) Google+ ※Google+ は2019年にサービス終了しました。 sample https://plus.google.com/share
get_terms関数を使ってカスタムタクソノミーのリストを表示させることがしばしばあると思います。 そのリストを任意の順番で並べ替えたい(ソート)ときは、カスタムタクソノミー設定時の「説明」に番号を振っていくことで実現することができます。 図のように東京の説明に000、神奈川に001等を設定し、任意の順番でソートをかけることができるようにできます。ただし次のコードでは動きません。 $terms = get_terms($taxonomy, array( 'parent' => 0, 'orderby' => 'description' ) ); ソートが効くようにするために、WordPressフォーラムにあるように次のようなコードをfunctions.phpに追加する必要があります。 function taxonomy_orderby_description( $orderby, $ar
これまではホームページで明朝体を使いたいときは、従来のようにWindows用、Mac用と別のフォントを指定して、別のフォントとして表示させてきた気がします。(例えばWindowsではHGS明朝E、Macではヒラギノ明朝 Pro W6など) WEBフォントを使うとこういった異なるフォントを表示させるということもないのですが、筆者が知っている実践で使えそうな日本語WEBフォントといえばGoogleが提供しているNoto Sansフォントくらいで明朝体のWEBフォントは知りませんでした。 ということで明朝体の日本語WEBフォントについて調べてみます。 WEBフォントを探してみる 以下はいくつかの明朝体フォントをまとめて提供しているサイトです。 TypeSquare 明朝体だけでも19種類から選ぶことができます。 無料で登録ができ、月間1万PV、ドメイン1つ、フォント1つという制限はありますが、通
参考 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> ロールオーバーは考えない スマホサイトはオンマウスによってhoverやロールオーバーの効果が使用できません。 jQueryなどを用いてタップした時にボタンの色を変える演出は可能です。 画像表示 CMSの利用でPCサイトで使う画像をそのままスマホサイトにも使用せざるを得ない時、幅が画面をはみ出してしまうのを回避する為、下記をCSSに記載します。 img { max-width:100%; height:auto; } 画像は写真以外はどんどんPNGを使用する スマホは問題なくPNGが表示される上に、PNG-8であればGIFよりも軽く書き出すことができる。 アイコンなどの画像は倍のサイズで作成しているはずなので、コーデ
制作したホームページをお客様に納品する際に、固定ページはカスタムフィールドだけ表示させたかったのですが、エディター部分を非表示にする方法がなかなか見当たりませんでした。 以下の方法を使えば【スタイルシート】によりエディター部分を非表示にすることができます。 方法は以下コードをfunctions.phpに追加するだけです。 function post_output_css() { $pt = get_post_type(); if ($pt == 'page') { //投稿の場合はpost $hide_postdiv_css = '<style type="text/css">#postdiv, #postdivrich { display: none; }</style>'; echo $hide_postdiv_css; } } add_action('admin_head', 'po
カスタムフィールドに画像を登録すると、基本的にはその時点で4種類のサイズの画像が保存されます。 WordPressの管理画面『設定>メディア』で設定していた3種類のサイズと、カスタムフィールドに登録した画像そのもののサイズです。 サムネイルのサイズ 中サイズ 大サイズ フルサイズ(登録した画像の元の大きさ) 上記、上から3つの画像サイズは自由に設定できます。 例えば次のような設定が可能です。 サムネイルのサイズ:100 × 100 中サイズ:300 × 300 大サイズ:700 × 700 フルサイズ(登録した画像の元の大きさ) 事前に生成されていないサイズの画像を表示したい ここで、カスタムフィールドに設定した画像を、上記のいずれのサイズにも当てはまらないサイズ、例えば『200 × 200』で表示させたい場合はどうすれば良いでしょうか? スタイルシート、もしくはimgタグにサイズを記述し
WordPressのマルチサイト機能を使用すれば、複数のブログを効率よく管理できます。 特に、似たようなデザインのサイトが複数ある場合は、『子サイト』を作成することで、親サイトのデザイン(テンプレートやスタイルシート)を引き継ぐことができるため大変便利です。 しかし、例えば『header.php』に関しては親サイトと若干デザインが異なる場合などはどうすれば良いでしょうか? 2つの選択肢があります。 親サイトのheader.phpを引き継がず、子サイト専用のheader.phpを用意する 親サイトのheader.phpの中で条件分岐させる 基本的なレイアウトが同じであれば上記(2)の方法のほうが管理的にも優れていると思います。 今回は、この条件分岐の方法について説明します。 『ブログのID』を取得して条件分岐 条件分岐させるためにはまずブログのIDを取得する必要がありますが、それはWordP
Advanced Custom FieldsはWordPressでカスタムフィールドを利用するときに必ずインストールしているプラグインです。ただ、このカスタムフィールドの値でソートをかける方法が意外と見当たらなかったので苦労しました。 分かれば単純なのですが、以下の記述でOKです。 $args = array( //ソート 'orderby' => 'meta_value', 'meta_key' => 'e_date', //ここにソートの対象となるカスタムフィールドの名前を入れる! 'order' => 'DESC' ); $my_query = new WP_Query( $args );
一般のホームページ制作会社では制作後、大した確認をせずに納品してしまうケースがあります。その結果「リンク切れ」「不十分なスペース取り」「別のブラウザでの表示エラー」「不十分なSEO対策」「使いにくいCMS」「コピー&ペーストミス」等でお客様に不満が残ってしまう場合があります。 DOEでは納品を行う際に下記の項目を必ずクリアするようにマネジメントしておりますので安心です。
WordPressを導入しているホームページでマルチサイトを使用していて、『Aブログ』に、『Bブログ』の投稿内容を表示させるパターンはよくあり、『switch_to_blog』を使用すればほとんどの場合問題なく『Bブログ』の内容を引っ張ってくることができます。 しかし、wp_query等の引数に『カスタムタクソノミー』を与えて投稿内容を絞り込むようなケースが動作しないことがありました。 WordPressのバージョンは【3.8.2】でした。 【サンプルコード】 <?php switch_to_blog(2); $arg = array( 'posts_per_page' => '3', 'tax_query' => array( 'relation' => 'AND', array( 'taxonomy' => 'example_taxonomy', 'field' => 'id', 't
カテゴリの一覧を出力したいときに、一番簡単なのはwp_list_categoriesだと思いますが、この関数はシンプルにリストタグ<li>でカテゴリの数だけループして出力するだけです。 もちろん引数で各種設定はできますが、細かなことはできません。 例えばカテゴリによってどんなアイコンを表示させるだとか、<li>の中に複雑なHTML要素を入れたい場合などはwp_list_categoriesだけでは対応しきれません。 get_categoriesでカテゴリのリストを自由自在に。 そこで登場するのがget_categories関数です。 get_categoriesは実はwp_list_categories関数の内部で使用されています。つまりwp_list_categoriesは、get_categories関数を元にして、最終的にシンプルなリストタグを出力しているだけなのです。 従って少し複
既に本体となるWebサイトを運営しており、それに加えて新しいWebサイトを構築することになったときに考えなければならないのが、『独自ドメイン』、『サブドメイン』、『サブディレクトリ』のどのパターンでいくかということです。 仮に本体サイトが【http://www.example.com/】だとすると、次に制作する新サイトは、 『独自ドメイン』…http://www.ABC.com/(上記本体サイトとは全く異なるドメイン) 『サブドメイン』…http://sub.example.com/ (www部分がsubになったドメイン) 『サブディレクトリ』…http://www.example.com/sub/ のいずれかとなります。 Webサイトへの集客を一番に考えた時、どの選択肢がベストでしょうか? それを判断するにはSEOの知識はもちろん、ビジネス視点・ユーザー視点に立った総合的な判断が必要とな
ホームページ更新・修正の随時見積もりプランはご依頼に対して、毎回お見積もり提示をさせていただくプランになります。 お見積もり金額はご依頼に対して作業時間を想定し算出します。 尚、毎回の見積もり対応がご面倒に感じる場合は[定期サポート] ホームページ更新代行・委託プランをお勧めいたします。 また、ZOOMを活用してホームページをリアルタイムに更新するプランも人気です。
ループ内などで、自分のカテゴリに加えて親カテゴリの情報を表示したい場合があると思います。そのようなケースでは以下のようにget_the_category()とget_category()をうまく使えば情報を取得することができます。 <?php //現カテゴリの配列を取得する $cat=get_the_category(); $cat=$cat[0]; //親カテゴリがあるか if ($cat->category_parent) { //category_parentは親カテゴリの「ID」 //親カテゴリの配列を取得する $parent_cat = get_category($cat->category_parent); /*ここでget_the_category()を使わないのは、get_the_categoryは引数を取らないから。任意のIDのカテゴリ情報を配列で取得するにはget_ca
以下はカテゴリに対してカテゴリ名などのアイコン画像をカスタムフィールドで登録している前提で、そのカスタムフィールドの値を取り出すためのサンプルです(ループ内です)。 <?php //カスタムフィールドを読み込むために、カテゴリIDを取得 $cat=get_the_category(); $cat = $cat[0]; $catid=$cat->cat_ID ; $post_id = 'category_'.$catid; /* category_4 のような値をゲットしたい */ ?> <?php $attachment_id=get_field('category_icon_large',$post_id); echo wp_get_attachment_image($attachment_id,'full'); ?> 「get_field」を使用する際引数に、$post_idとして値を
WordPressのテーマをいろいろいじっていると、「あれ、このページにはどのテンプレートファイルが当たっているんだ??」と分からなくなることがあります。 そんなときはどこかに以下のコードを貼り付けて確認しましょう。 <?php global $template; $template_name = basename($template, '.php'); echo $template_name; ?> 私はfooter.phpに貼り付けておき、普段はコメントアウトをしておいた上で、調べたい時だけコメントアウトをはずすようにしています。
WordPressの子テーマを使ってこのブログを構築していた際、子テーマの中の「images」ディレクトリを参照したかったので何も考えず「boginfo(‘template_url’)」で参照しに行ったところ、親テーマのimagesディレクトリの中を見に行ってしまっていました! 子テーマのテンプレートでは、親テーマのディレクトリを見に行く書き方と、子テーマ自身のテーマディレクトリを見に行く書き方は分ける必要があるのです。 ちなみに親テーマのフォルダは上述の通り「boginfo(‘template_url’)」で見に行けますが、これも非推奨の記述のようです。 まとめると以下が正しい記述方法になります。 ややこしいですね。 ●子テーマから親テーマのテーマディレクトリを見に行く場合 <img src="<?php bloginfo('template_url'); ?>/images/sampl
このページを最初にブックマークしてみませんか?
『ホームページ制作のDOE【横浜】 ~手を抜かず最大のパフォーマンス~』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く