関連記事を表示するプラグインを使用することもできますが、あまり融通が利かなかったり、CSSの調整が面倒だったりなので、制作に慣れている方であれば、自分でゼロから設定してしまった方が早い場合があります。 今回は、カスタムフィールドを追加するプラグインを使用して、各投稿ごとに関連記事を設定できるようにします。関連記事という使い方ですが、記事は手動の選択制で、1つめが未設定であればランダム表示するだけなので厳密に言えば関連記事ではありませんが、サイト内を周回させたいだけであれば […]
AMPとは？ 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示速度を調べる際は、GoogleのPageSpeed Insightなどにサイトをかけると思いますが、AMP対応前と後では大きく評価が改善したりします。特にモバイルでの評価が顕著です。 「TO […]
受託案件でWordPressを使用したサイトを構築する際、そのまま納品すると管理画面が分かりにくいことがあります。 慣れない方が更新されることも考慮して、細やかな部分ですが、配慮してあげると更新時のストレスがぐっと減ります。 例えばイベント情報を投稿するサイトを作成した場合、メインループの「投稿」の表記を「イベント情報」に変えておくと、一目見てどこを更新すればいいのか分かります。 やり方 テーマの function.php に、以下の記述を追加します。 ※「イベント情報」とな […]
キャンセルの方法 スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。 利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。 予約システムなどであれば、電話番号の入力や電卓機能を独自のテンキーを実装できると入力しやすいですね。 ただreadonly属性を付与しただけだと単純にソフ […]
マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。 シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。 書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。 [ 公式JSファイルのDLはこちらから ] [ 私が作った簡単なデモはこちら ] 使い方 01 […]
WordPressのログイン画面は、デフォルトの状態ではログイン画面のURLが全て同じです。 以下の2つのアドレス、ドメイン部分を変更してブラウザでたたくと、ログイン画面にアクセスできてしまいます。 https://ドメイン.com/wp-login.php https://ドメイン.com/wp-admin/ WordPressの乗っ取りやスパムを防ぐため、ログイン画面のURLを変更して、セキュリティの対策を行いましょう。 [手順1]wp-login.phpの代わりとなるP […]
ご縁がありまして、セクシー男優の吉村卓さんの似顔絵イラストと、WEBサイトのデザインを担当させていただきました。 そこで似顔絵イラストのグッズを制作したとのことで、ご厚意でアクリルキーホルダーと消しゴムを頂きました。ありがとうございます！ こちらのキーホルダーは今私のデスクの上に鎮座しており、時々笑顔を誘ってくれます。 トレードマークのブリーフ＆仁王立ちポーズが、それらしいとご好評の様子で、「卓ちゃんマン」との愛称で親しまれているそうです。 喜んで頂けて私としても大変嬉しく思 […]
Wordpressでサイトを構築している時、headタグの中身が煩雑でうんざりしますよね。 今回はその不要なタグを取り除いてみましょう。 基本のやり方 使用しているテーマのfuction.phpの末尾に追加で記述していきます。 ※ function.phpはテーマフォルダの直下にあります … /wp-content/themes/使用しているテーマ名/function.php 基本の形 機能名の箇所には、固有の記号みたいなものが入ります。これは後述の各項目を確認してください。 […]
長くDreamweaverを使っている方こそ、意外と知らないこの機能。 最近といっても2017年時点に追加された機能なのですが、マルチカーソルという機能です。 なんとカーソルが伸びる！ Alt を押しながら縦にドラッグで伸びます。始点からしっかり引っ張るのが上手に伸ばすコツです。 増える！ Ctrl を押しながらクリックで好きな位置にカーソルを増殖できます。 Emmetなどは有名なのでみなさんご存じかと思うのですが、細かな機能のアップデートは見逃していたりするのはよくあること […]
最近は働き方改革の手助けもあってか、ブログで副収入を得たり、SNSをきっかけに在宅で働いている方も珍しくなくなりましたね。ブログで数字を稼ぐにあたって、大きく関わってくるのがGoogleの検索順位。アクセスが無ければ広告収入もままなりません。今回はそんな検索順位に関する話です（SEOといいます）。 昨今のSEOの流れ 一昔前のSEOといえば、「ほかのサイトからリンクしてもらう」「keywordタグをいれる」などが有名ですが、もうこれは時代遅れといって差し支えないでしょう。 G […]
WordPressを独自カスタマイズしていたところ、記事の見出しやページのタイトルに使用されているアルファベットが勝手に大文字に置き換えられている現象に悩まされました。 原因：CSSのtext-transform 原因は見出しの要素に適用されていたCSS、text-transform 。 text-transform が uppercase になっていた場合、全てのアルファベットが大文字で表示されます。 単純に入力そのままで表示したい場合は、こちらのCSSを削除すればOKです […]
tax_queryを使用すれば、条件指定して記事を取得することができます。 tax_queryはこんな時に便利 例えばこんな時。 [図A] 図のように、条件に合致する記事だけ取得したりすることができます。 カテゴリで絞り込んだ一覧ページを作ったりする際に便利です。 tax_queryで記事を取得 図Aの例の場合、下記のように記述すると記事一覧を取得できます。 これで、カスタム投稿qaの、カスタム分類 qa_cat のcatXに属する投稿が取得できます。 tax_queryで取 […]
Androidアプリを作成する際に画面密度（dpi）別に画像素材を作るの、とてもめんどくさいですよね。 Androidのmdpiを基準に、xxdpiまで対応するとした場合、4枚の同じ画像が必要になります。 アセット機能って何？ 1つのオブジェクトを倍率違いで複数書き出すことのできる機能です。まさに夢のような機能ですね。 ▲アセットに登録して書き出すと… ▲複数のサイズで書き出されます。 解像度ごとの素材書き出しがなんと一瞬。作業の時間も半分以下に。 アセット機能の使いかた 0 […]
「やめて！そのボタンは連打しないで！」 そのつらい気持ち、よくわかります。 今回はフラグを立てて、ボタン連打の対策をやってみましょう。 jQuery ＜処理のルート＞ cancelFlag という変数を定義しておき、値が「0」の場合は処理開始、「1」の場合は処理キャンセル、という判定を追加するだけです。意外とシンプル。 上記の例だと、クリックイベントが着火した直後に cancelFlag に「1」を代入、フラグを立てます。 そして処理が終了する際に「0」を代入し、フラグをおろ […]
使用できるパラメーター（2018年10月現在） それぞれのパラメータですが、ブラウザによって効いたり効かなかったりします。 また、スマートフォン端末では、端末仕様によって動作に制限がある場合があります。（例：必ず全画面表示の状態で再生されてしまう、など） ※パラメータの使い方はこちら ※各パラメーターのデモはこちら 「全画面表示」ボタンを非表示に パラメータ 説明 デフォルト値 使用例 fs 全画面表示ボタンを非表示にする。0で非表示、1で表示。 1 ?fs=0 Youtub […]
Web制作の書籍ではあまり書かれない、制作現場における支払いトラブルや瑕疵、著作権についての書籍が再出版となります。 以前、レクシスネクシス・ジャパン社より出版された「Web業界 受注契約の教科書」「Web業界 発注制作の教科書」の改訂版として、第一法規社より再出版されました。 前回に引き続き、両書の装丁デザインを担当致しました。 デザインに対する要望 今回、書名が変更になったため、書名の入れ替えと 書店に並んだ時に、より目を引きそうなデザインに変更したいとの要望がありました […]
女性の写真のフォトレタッチでよく起こりがちなのが、髪と服の色が似ていて、クイック選択ツールで選択範囲が混ざってしまう現象。 今回は色調補正やトーンカーブを使用して、パーツごとに選択できる小技を紹介します。 例えば、この女性の写真の髪の色を変更してみましょう。 1.調整レイヤーを作成し、色の差を作る 考えてみれば実は簡単なことで、髪と服の色の差をつければ選択しやすくなります。 「色調・彩度」と「トーンカーブ」をあてて、色の差をつけていきます。 ※後で画像を基の色に戻す必要がある […]
Webサイト制作の現場において、スマートフォン向けサイトは、もはや欠かせない存在となっています。スマートフォンの所有率はなんと76.0%（出典:総務省/2016年）。今後もニーズはさらに高まっていくでしょう。 既存のPCサイトをレスポンシブ化したい！というご相談が増えつつある 一から制作するよりも費用が抑えられるうえ、期間も手短に済むため、ご要望として多くあります。 元となるPCサイトの組みかたによって対策がまちまちなため、制作前に気づかなかった落とし穴にはまることがあります […]
PhotoshopのCameraRAWというフィルターの使い方を紹介します。 本来はカメラのデータ形式「RAW」を取りあつかうためのものなのですが、JPGなどの画像データにも適用することができます。 画像のトーンや明度彩度、シャープ、コントラト、レンズのゆがみ、色かぶり、モアレの解消…etc 様々な効果がこのフィルターひとつで調整できるため、作業の時短に有効です。 例えば、こんな風に色を補正することが可能です。 寒そうな廃屋の写真を、黄身っぽいカラーに変換しました […]
Photoshopでmp4データを扱える 実は、Photoshopで、mp4の簡単な編集なら行うことが可能です。ご存知でしたか？ トリミングやほかのフェードインフェードアウトくらいのエフェクトなら使用できるので、GIFアニメーションを作る際にはとても便利です。 スマートフォンで撮った動画や、画面キャプチャ動画なんかも簡単に素材として取り入れることが可能です。 ブログで解説の記事を書く際や、シネマグラフ手法を取り入れたデザインを作る時などにも大変役立つのでぜひ覚えてくださいね。 […]
UI/UXデザインがラクラク！カンプデータが簡単に作れる Adobe XD サービスを立ち上げる時、まずは、画面の仕様や動作遷移の確認に、画面の設計を行うと思います。 いわゆるプロトタイプですね。（より完成品のイメージがしやすいよう、紙芝居のようなものを作ります。） iPhoneアプリ Andoroidアプリ Webサービス など… AdobeXDは、プロトタイプが簡単に作成できるアプリケーションです。 操作が非常に直感的で、画像をドラッグドロップするだけでマスク […]
皆様はプロジェクト開発の情報共有に、どんなツールを使用中でしょうか。 今お使いのツールが使いにくいと感じたことはありませんか？ バグ管理ツール（BTS）は、プロジェクトの理想的な進行管理に際し、必須と言っても過言ではないと思います。 本記事では、理想的なプロジェクト進行管理のため、 簡単に各サービスのポイントをおさえながら、おすすめを紹介していきます。 そもそもバグ管理ツールとは？ バグ管理ツールとは、以下の手順を踏んで、プロジェクトのバグを潰していくためのものをいいます。 […]
今回はIllustratorでスクリーントーンのようなアミカケを作ってみましょう。 応用で斜線や複雑な柄のパターンも登録できます。（Illustrator CCを使用して解説していきます。） アミカケを登録 パターンを使用する時は、スウォッチに登録します。 01.パターンを作る まずは1pxのアミカケを作ってみましょう。今回は長方形ツールを使用します。 実際に作る時は、作成したいパターンに合わせて好きなパスツールを使用してください。 02.作ったパターンをスウォッチパネルに登 […]
構造化マークアップもSEO的に無視できなくなりつつある昨今ですが、イベント情報の構造化データをサイトで使用している方は要再チェックです。 Googleのガイドラインに、イベント情報の構造化データに「割引クーポン」を追加するのは違反であるとの記述が明確にされました。（2017年11月末） その他にもイベントと関係ない情報をイベントとしてマークアップすることをやめるように書かれています。 場合によっては、Google側からの手動対策の対象となるため、早めの修正が必要となります。検 […]
hreflangというタグ、ご存知でしょうか？実はこのタグ、多言語サイトを作る時に重要な動きをしてくれるタグなんです。 どうして必要なの？ 機会損失を防ぐ 例えば日英の2言語に対応しているサイトがあったとして、英語圏のユーザーがサイトを訪問した際に日本語が表示されてしまい、読めずに離脱してしまう…そんな状況。 そこでhreflangタグの出番ですが、このタグの作用は検索結果の画面で現れます。検索を行ったユーザーが使用する言語に合わせて、検索結果が返されるようになります。英語圏 […]
運営会社:株式会社8bit
制作サービス
運営サービス
