今日はvideoタグを好きな形に切り抜きしてみましょう。 実際に表示するとこんな感じです。 ＜円形に切り抜いた場合＞ どうやって切り落とす？ これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。 ＜CSS＞ circleは円形です。 他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。 ジェネレーター 手打ちで数値を調整してもいいのですが、ジェネレーターを使ってしまった方が簡単です。 Clippy: https:/ […]
WordPressサイトのセキュリティを強化するにあたって、「ログインページのURLを変更する」というのはよくある手法ですが、その他にもできることを忘備録として一覧にしました。 SSLによる ログインと管理画面へのアクセスを強制する ログイン画面や管理画面へアクセスする際、強制的に暗号化通信にします。 ＜編集するファイル＞ wp-config.php ＜方法＞ ファイルに下記を記述します。 ＜詳細参考＞ https://wpdocs.osdn.jp/%E7%AE%A1%E7% […]
私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。 作る前に知っておいてほしい仕様 項目が多くなってしまったのですが、着手する前にAMPの制約を確認しましょう。 作成方法にお急ぎの方はジャンプ AMPの公式仕様に沿ってタグを記述する必要がある AMPの公式仕様はこちらのサイト（https […]
昨今、SEOで絶対に無視できないのがAMP。 表示速度を爆速にする分、様々な制約が設けられていますが、Google Chartsなどの部分的なものであれば同ページ内に表示が可能です。 部分的なJS表現をiframeで追加する 分かってしまえばやり方は単純。AMP非対応の箇所のみiframeを使用します。 下記は弊社で運営している飲み会マッチングサービスのノミトモ。飲み会の募集が下にするする流れていくようなアニメーションを採用していますが、オリジナルで組んだJSアニメーションな […]
ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーショ […]
通常の投稿は10件ずつ表示したいけど、とあるカスタム投稿の一覧ページはデザインを変えて8件ずつ表示したい…そんな時、以外と簡単に件数の調整が可能です。 functions.phpに記述 下記をfunctions.phpに追記してください。 これだけです。投稿タイプや件数は変更してください。 あとは一覧のPHPファイルや、CSSを修正調整すれば完成です。
関連記事を表示するプラグインを使用することもできますが、あまり融通が利かなかったり、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 様々な効果がこのフィルターひとつで調整できるため、作業の時短に有効です。 例えば、こんな風に色を補正することが可能です。 寒そうな廃屋の写真を、黄身っぽいカラーに変換しました […]
運営会社:株式会社8bit
制作サービス
運営サービス
