CSSだけでカルーセルを実装する
IEがお役目を終えるということで、CSSでスクロールスナップが使用できるようになります。 これを使用すると、CSS数行で簡易的なカルーセルを実装できるようになります。 特にスマートフォンなどのタッチデバイスではJSでの実装とほとんど変わらないような操作感を実現できます。 ＜JSを使用しないスクロール例＞ スクロールスナップさせる スクロールをスナップさせるには、scroll-snap-typeとscroll-snap-alignを使用します。 なんとこれだけで、子要素の横スク […]
【CSS】乗算・やオーバーレイなどのブレンドモードで要素を重ねる
Photoshopなどのグラフィックソフトで使用する乗算やオーバーレイなどのブレンドモードですが、CSSでも使用することができます。 mix-blend-mode ブレンドモードを使用するには、前面に重なる要素に、CSSで mix-blend-mode を追加するだけでOKです。簡単ですね。 ＜HTML＞ ＜CSS＞ 画像と背景が重なるように配置し、div.background には背景色を付けました。 multiply で乗算表示になります。 ブレンドモード一覧 15種類の […]
【WordPress】管理画面の不要なメニューを非表示にする
Wordpressの管理画面から、不要なメニューを削除しましょう。 不要なメニューを非表示にする 不要なメニューを非表示にするには、「functions.php」を編集します。 functions.php は、テーマのファイルがまとめられているフォルダの中にあります。 コメントメニューを非表示にする まず、コメントメニューを非表示にしてみましょう。ファイルの末尾に、下記を追加します。 remove_menu_page()のカッコの中には、ページのパスを記述します。 ＜ページの […]
【Photoshop】クリックするだけ!? AIで風景を置き換える新機能”風景ミキサー”の使い方
PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます！ どんな機能？ 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にしたいか選択でき、昼夜の時間帯や、季節の具合などを調整できます。 使い方 手順1：被写体を選択する では、早速使ってみましょう。 被写体はそのままにしたい […]
【Illustrator】手書きのスキャン画像をパスデータにする
Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]＞[画像トレース] スキャンしたデータをトレースする スキャンしたデータをIllustratorで画像オブジェクトとして開きます。 配置した画像を選択ツールで選択すると、画像トレースパネルがア […]
【Illustrator】長文をカラム分けして読みやすくする方法
リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 やり方解説 手順1：四角オブジェクトを配置する まず、カラムを作成したい領域を決めて、四角形オブジェクトを配置します。 手順2：四角オブジェクトをテキストボ […]
【写真の副業】WEBデザイナーの私が思う”使いやすい写真素材”とは？
最近、副業としてPIXTAなどで写真素材を販売する方が多いとの話を聞きました。 スマホで撮影した写真があれば手軽に始められるので、人気の副業のようです。 では、素材サイトヘビーユーザーのデザイナー目線で素材として使いやすく、ダウンロードしたい素材とはどんなものでしょうか？ 実際に写真をダウンロードして使う側の私が思う、使いやすい写真素材の特徴をまとめてみました。 その1.ピントがあっている これはマストです。ピントが合っていない・ブレている写真は、加工でもどうすることもできま […]
【工数節約！】レスポンシブサイトにおける一番楽なフォントサイズ指定
年々増えていく、フォントサイズを指定する単位。 「px」を基本として、「vw」と「vh」が使えるようになったと思ったら、気が付くと「rem」という単位もあったり、煩雑としてきました。 今回は私がレスポンシブサイトを構築する際、一番楽だと思うフォントサイズ設定を紹介します。 決め手は「rem」と「vw」 CSSでまずは基準となるフォントサイズを決めます。下記のように設定します。 そして、個々のCSSを記述していく際、すべてのfont-sizeで「rem」単位を使用します。 PC […]
CSSでvideoタグを切り抜いて好きな形に表示する
今日はvideoタグを好きな形に切り抜きしてみましょう。 実際に表示するとこんな感じです。 ＜円形に切り抜いた場合＞ どうやって切り落とす？ これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。 ＜CSS＞ circleは円形です。 他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。 ジェネレーター 手打ちで数値を調整してもいいのですが、ジェネレーターを使ってしまった方が簡単です。 Clippy: https:/ […]
【WordPress】セキュリティ対策 6選
WordPressサイトのセキュリティを強化するにあたって、「ログインページのURLを変更する」というのはよくある手法ですが、その他にもできることを忘備録として一覧にしました。 SSLによる ログインと管理画面へのアクセスを強制する ログイン画面や管理画面へアクセスする際、強制的に暗号化通信にします。 ＜編集するファイル＞ wp-config.php ＜方法＞ ファイルに下記を記述します。 ＜詳細参考＞ https://wpdocs.osdn.jp/%E7%AE%A1%E7% […]
【AMP対応】結局どうやるの？はじめてのAMP対応
私が初めてAMP対応に着手しようとした時、複数のサイトを渡り歩いて情報を集めながら進めていかなければならない状態でした。「で、結局どうすればいいの」となったので、忘備録も兼ねてまとめていきたいと思います。速くなる仕組みなどは今回は省略します。 作る前に知っておいてほしい仕様 項目が多くなってしまったのですが、着手する前にAMPの制約を確認しましょう。 作成方法にお急ぎの方はジャンプ AMPの公式仕様に沿ってタグを記述する必要がある AMPの公式仕様はこちらのサイト（https […]
AMP非対応のJSをiframeで使用する
昨今、SEOで絶対に無視できないのがAMP。 表示速度を爆速にする分、様々な制約が設けられていますが、Google Chartsなどの部分的なものであれば同ページ内に表示が可能です。 部分的なJS表現をiframeで追加する 分かってしまえばやり方は単純。AMP非対応の箇所のみiframeを使用します。 下記は弊社で運営している飲み会マッチングサービスのノミトモ。飲み会の募集が下にするする流れていくようなアニメーションを採用していますが、オリジナルで組んだJSアニメーションな […]
ふわふわの泡の背景を作成できるJS「bubbly-bg.js」
ページのbackgroundにふわふわと泡が漂うような表現ができる「bubbly-bg.js」を紹介します。 公式デモサイト 使用してみたところ、仕様は以下のようです。 ・背景は固定。スクロールのある縦長のページでも、100vw、100vhでfixed。 ・スマートフォン端末でも動作。（とりあえず手元のiPhoneXとiPadで動作確認しました。） ・泡の個数、色、向き、速さ、大きさ、ぼかし具合、アルファ値、背景グラデーションなど細かなカスタマイズが可能 ・背景のグラデーショ […]
【WordPress】特定のカスタム投稿の一覧画面表示件数を変更する
通常の投稿は10件ずつ表示したいけど、とあるカスタム投稿の一覧ページはデザインを変えて8件ずつ表示したい…そんな時、以外と簡単に件数の調整が可能です。 functions.phpに記述 下記をfunctions.phpに追記してください。 これだけです。投稿タイプや件数は変更してください。 あとは一覧のPHPファイルや、CSSを修正調整すれば完成です。
【WordPress】カスタムフィールドを使って投稿ごとに「関連記事」を設定する
関連記事を表示するプラグインを使用することもできますが、あまり融通が利かなかったり、CSSの調整が面倒だったりなので、制作に慣れている方であれば、自分でゼロから設定してしまった方が早い場合があります。 今回は、カスタムフィールドを追加するプラグインを使用して、各投稿ごとに関連記事を設定できるようにします。関連記事という使い方ですが、記事は手動の選択制で、1つめが未設定であればランダム表示するだけなので厳密に言えば関連記事ではありませんが、サイト内を周回させたいだけであれば […]
自社サービス「ノミトモ」をAMP対応！劇的に改善するPageSpeed Insightでの評価Before／After
AMPとは？ 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示速度を調べる際は、GoogleのPageSpeed Insightなどにサイトをかけると思いますが、AMP対応前と後では大きく評価が改善したりします。特にモバイルでの評価が顕著です。 「TO […]
【WordPress】管理画面の「投稿」表記を変更する カスタマイズ
受託案件でWordPressを使用したサイトを構築する際、そのまま納品すると管理画面が分かりにくいことがあります。 慣れない方が更新されることも考慮して、細やかな部分ですが、配慮してあげると更新時のストレスがぐっと減ります。 例えばイベント情報を投稿するサイトを作成した場合、メインループの「投稿」の表記を「イベント情報」に変えておくと、一目見てどこを更新すればいいのか分かります。 やり方 テーマの function.php に、以下の記述を追加します。 ※「イベント情報」とな […]
スマホやタブレットのソフトウェアキーボードを表示させないようにする
キャンセルの方法 スマホやタブレットなどのタッチデバイスで、ソフトウェアキーボードが立ち上がるのをキャンセルしたい場合、inputに「readonly=”readonly”」属性を追加すると、キーボードが非表示になります。 利用シーンとしては、iPadでツールを作成したい場合などに使えると思います。 予約システムなどであれば、電話番号の入力や電卓機能を独自のテンキーを実装できると入力しやすいですね。 ただreadonly属性を付与しただけだと単純にソフ […]
jquery.balloon.js をタッチデバイスとPCの両方に対応する書き方
マウスホバーするとフキダシでテキストが表示される「jquery.balloon.js」。 シンプルで大変使い勝手の良いJSですが、単純に呼び出しただけではタブレットやスマートフォンなどのタッチデバイスで動作がうまくいきません。 書き方を少し工夫して、スマートフォンやタブレットのタッチデバイスに対応させます。PCではマウスホバー、タッチデバイスではタップで表示非表示するようにします。 [ 公式JSファイルのDLはこちらから ] [ 私が作った簡単なデモはこちら ] 使い方 01 […]
【WordPress】ログイン画面のURLを変更してセキュリティ強化
WordPressのログイン画面は、デフォルトの状態ではログイン画面のURLが全て同じです。 以下の2つのアドレス、ドメイン部分を変更してブラウザでたたくと、ログイン画面にアクセスできてしまいます。 https://ドメイン.com/wp-login.php https://ドメイン.com/wp-admin/ WordPressの乗っ取りやスパムを防ぐため、ログイン画面のURLを変更して、セキュリティの対策を行いましょう。 [手順1]wp-login.phpの代わりとなるP […]
【実績紹介】吉村卓さんのイラスト・WEBデザインを担当させて頂きました。
ご縁がありまして、セクシー男優の吉村卓さんの似顔絵イラストと、WEBサイトのデザインを担当させていただきました。 そこで似顔絵イラストのグッズを制作したとのことで、ご厚意でアクリルキーホルダーと消しゴムを頂きました。ありがとうございます！ こちらのキーホルダーは今私のデスクの上に鎮座しており、時々笑顔を誘ってくれます。 トレードマークのブリーフ＆仁王立ちポーズが、それらしいとご好評の様子で、「卓ちゃんマン」との愛称で親しまれているそうです。 喜んで頂けて私としても大変嬉しく思 […]
【WordPress】headタグ内の余分な記述を取り除く
Wordpressでサイトを構築している時、headタグの中身が煩雑でうんざりしますよね。 今回はその不要なタグを取り除いてみましょう。 基本のやり方 使用しているテーマのfuction.phpの末尾に追加で記述していきます。 ※ function.phpはテーマフォルダの直下にあります … /wp-content/themes/使用しているテーマ名/function.php 基本の形 機能名の箇所には、固有の記号みたいなものが入ります。これは後述の各項目を確認してください。 […]
カーソルが増える！？Dreamweaverの意外と知らない機能
長くDreamweaverを使っている方こそ、意外と知らないこの機能。 最近といっても2017年時点に追加された機能なのですが、マルチカーソルという機能です。 なんとカーソルが伸びる！ Alt を押しながら縦にドラッグで伸びます。始点からしっかり引っ張るのが上手に伸ばすコツです。 増える！ Ctrl を押しながらクリックで好きな位置にカーソルを増殖できます。 Emmetなどは有名なのでみなさんご存じかと思うのですが、細かな機能のアップデートは見逃していたりするのはよくあること […]
WEB初心者ができるSEO対策（検索順位）の話
最近は働き方改革の手助けもあってか、ブログで副収入を得たり、SNSをきっかけに在宅で働いている方も珍しくなくなりましたね。ブログで数字を稼ぐにあたって、大きく関わってくるのがGoogleの検索順位。アクセスが無ければ広告収入もままなりません。今回はそんな検索順位に関する話です（SEOといいます）。 昨今のSEOの流れ 一昔前のSEOといえば、「ほかのサイトからリンクしてもらう」「keywordタグをいれる」などが有名ですが、もうこれは時代遅れといって差し支えないでしょう。 G […]
【WordPress】見出しのアルファベットが勝手に大文字になってしまう
WordPressを独自カスタマイズしていたところ、記事の見出しやページのタイトルに使用されているアルファベットが勝手に大文字に置き換えられている現象に悩まされました。 原因：CSSのtext-transform 原因は見出しの要素に適用されていたCSS、text-transform 。 text-transform が uppercase になっていた場合、全てのアルファベットが大文字で表示されます。 単純に入力そのままで表示したい場合は、こちらのCSSを削除すればOKです […]
運営会社:株式会社8bit
制作サービス
運営サービス
