Xcodeで好きなフォントを追加したい！ということがあると思います。 最初は戸惑うかもしれませんが覚えると結構簡単に追加できます。 目次1 まずはフォントをダウンロード2 フォルダにフォントを追加3 Infoにフォントを登録する4 実際に使ってみる まずはフォントをダウンロード まずはフォントをダウンロードします。 今回はGoogle Fontsの中の『Noto Sans Japanese』をインストールしてみます。 フォルダにフォントを追加 ダウンロードしたらXcodeで今 […]
Wordpressの管理画面から、不要なメニューを削除しましょう。 目次1 不要なメニューを非表示にする1.1 コメントメニューを非表示にする1.2 複数のメニューを非表示にする1.3 権限で表示を切り替える2 YoutubeChannelのご紹介 不要なメニューを非表示にする 不要なメニューを非表示にするには、「functions.php」を編集します。 functions.php は、テーマのファイルがまとめられているフォルダの中にあります。 コメントメニューを非表示にす […]
PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます！ 目次1 どんな機能？2 使い方2.1 手順1：被写体を選択する2.2 手順2：フィルターを適用する2.3 完成3 YoutubeChannelのご紹介 どんな機能？ 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にし […]
Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 目次1 「画像トレース」機能の使い方1.1 画像トレースパネルを開く1.2 スキャンしたデータをトレースする1.3 不要な部分を削除する2 YoutubeChannelのご紹介 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]＞[画像トレー […]
こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 目次1 PC表示の時2 スマートフォン表示の時3 ソースコード4 ポイント5 YoutubeChannelのご紹介 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html [cray […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 目次1 Hover.css2 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次3 CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 154 CSSのみで実装するキャプションエフェクト 205 イケテルオリジナルマウスオーバーCSS3アニメーション […]
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The V […]
口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML [crayon-61ed44101582a2 […]
スクロールバーを装飾したい・safariで見た際に常にスクロールバーを表示させたい…という時、手軽に実現させる方法として『::-webkit-scrollbar』があります。 装飾した表示はChromeとsafariのみになってしまいますが、数行のCSSを加えるだけで簡単に実現できます。 目次1 HTML2 CSS2.1 ::-webkit-scrollbar2.2 ::-webkit-scrollbar-track2.3 ::-webkit-scrollbar-thumb […]
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 目次1 Boxer（Lightbox）2 Remodal3 animatedModal4 Magnific Popup5 Swipebox Boxer（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Li […]
PhotoshopCCのver23.0から搭載された新機能「風景ミキサー」を紹介します。 AIを使用したフィルター機能で、写真の背景をクリックするだけで簡単に変更できます！ 目次1 どんな機能？2 使い方2.1 手順1：被写体を選択する2.2 手順2：フィルターを適用する2.3 完成3 YoutubeChannelのご紹介 どんな機能？ 左が元写真で、右がフィルター適用後です。 あくまで元の画像の構図や要素は崩さずに、雰囲気をガラリと変えてしまいます。 どんな雰囲気の背景にし […]
Illustratorの「画像トレース」という機能を使用すれば、パスデータを作成することができます。 簡単に使えるので、ぜひロゴやイラストを作る時に活用してください。 目次1 「画像トレース」機能の使い方1.1 画像トレースパネルを開く1.2 スキャンしたデータをトレースする1.3 不要な部分を削除する2 YoutubeChannelのご紹介 「画像トレース」機能の使い方 画像トレースパネルを開く まず、メニューから画像トレースパネルを開きます。 [ウィンドウ]＞[画像トレー […]
リーフレットやチラシなどの印刷物を作る時、長文をカラム分けすると文章が読みやすくなります。 このカラム分けされたテキストボックスは互いにリンクされており、片方で改行などの編集をすると、溢れたテキストが自動で次のテキストへ送られるようになっています。 領域を作ってリンクするだけなので、非常に簡単です。ぜひ習得してください。 目次1 やり方解説1.1 手順1：四角オブジェクトを配置する1.2 手順2：四角オブジェクトをテキストボックスに変換する1.3 手順3：複数のテキストボック […]
レイアウトを組むのに便利な『flexbox』。 今回は『flexbox』と『margin: auto;』を使用していい感じにレイアウトを組んでみましょう。 目次1 左に3つの要素、右に1つの要素を置きたい2 左に1つの要素、右に3つの要素を置きたい3 左右と中央、それぞれに要素を置きたい 左に3つの要素、右に1つの要素を置きたい このレイアウトだと左側の3つをさらにdivなどで囲み『justify-content: space-between;』を一緒に指定する方法などが考え […]
jQueryでアコーディオンを実現したい、ということはよくあると思います。 実現したいときは単純に『slideToggle』を使うのが早いです。 ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。 そんな時にちょっとだけ悩んだのでメモがてら書いておきます。 目次1 『slideToggle』を使ったアコーディオン2 『toggleClass』を使ったアコーディオン（ただの表示・非表示）3 『togg […]
2021年現在、新規でWebサイトを作成する際はレスポンシブ対応するのがほとんどかと思います。 そんな時PCだけまたはスマホだけでjavascript(jQuery)の読み込みを行いたい時があるかと思います。 実はファイルに何行か追記するだけで簡単に切り分けができます。エラー回避やサイト軽量化のためにもやってみましょう。 目次1 ①画面サイズで切り分ける方法2 ②端末（UA）で切り分ける方法 ①画面サイズで切り分ける方法 $(function () { if (window. […]
ここ最近いろいろな意味で話題になっているLINEですが、とはいえ便利なSNSツールであることは間違いないところです。 ここでは情報セキュリティ的な部分は置いといて、LINEのAPIを利用したbotやリッチメニューを作っていきます。 目次1 事前に行うこと1.1 LINE for Business でアカウントを開設する1.2 LINE Developers からログインする1.2.1 チャンネル設定から「新規チャンネル作成」を選び、チャンネルを作成1.2.2 作成したチャンネ […]
目次1 LINEを使ったキャンペーン？1.1 Messaging APIとは1.2 利用料金は？2 最後に LINEを使ったキャンペーン？ 今何かと騒がしいLINEではありますが、スマホを持っていればお手軽かつ複数アカウントを作りづらい仕様のため、B2Cとしては非常に使いたくなるプラットフォームです。 インスタントウィンに関しては弊社で構築したプレゼントキャンペーンサイトがありますので、こちらをご確認いただければと思いますが、TwitterではなくLINEを利用 […]
目次1 なんでSSL通信が必要？2 Chocolateyをインストールする3 mkcertをインストールする4 それぞれの環境ごとに証明書を発行4.1 Visual Studio Codeのターミナルから以下のコマンドを打つ4.2 nuxt.config.jsに追記する4.3 .gitignoreに追記する5 Firefoxで見た場合 なんでSSL通信が必要？ 位置情報を利用する際、数年前からSSL通信じゃないと取得できなくなったことで、ローカル環境でもSSL通信が必要になり […]
Wordpressの管理画面から、不要なメニューを削除しましょう。 目次1 不要なメニューを非表示にする1.1 コメントメニューを非表示にする1.2 複数のメニューを非表示にする1.3 権限で表示を切り替える2 YoutubeChannelのご紹介 不要なメニューを非表示にする 不要なメニューを非表示にするには、「functions.php」を編集します。 functions.php は、テーマのファイルがまとめられているフォルダの中にあります。 コメントメニューを非表示にす […]
Wordpressで記事を書いているときに『目次』が必要になることがあると思います。 そんな時はタイトルタグがあれば自動で目次を生成してくれるプラグイン『Table of Contents Plus』が便利です。 目次1 『Table of Contents Plus』を使ってみよう2 『Table of Contents Plus』の設定をしてみよう2.1 位置2.2 表示条件2.3 以下のコンテンツタイプを自動挿入2.4 見出しテキスト2.5 階層表示2.6 番号振り2. […]
Wordpressで記事を複製したい、ということありますよね。 そんな時はプラグインの『Duplicate Page』を使ってみましょう。 Duplicate Pageをインストールして使ってみる まずはプラグインの新規追加画面でプラグインを追加します。 『Duplicate Page』をインストール・有効化します あとはたったこれだけで記事の一覧画面に『複製』が表示されます！ 『複製』を押すと下書きの状態で記事が複製されるので、編集が完了したら『公開』をしましょう！ ちなみ […]
目次1 AMPとは？1.1 高速化のための厳しい制約2 劇的に改善！Google PageSpeed Insightでの評価Before／After2.1 AMP対応前2.2 AMP対応後 AMPとは？ 近年、Googleが推奨しているAMPをご存じでしょうか。 AMP対応しているページを事前にGoogleがキャッシュしておくことによって、閲覧者がページリクエストした際に、Googleが持っているキャッシュを表示するため、素早く表示できるという仕組みです。 通常、ページの表示 […]
2020年4月現在、リモートワーク/テレワークでお仕事されている方も多いのではないでしょうか。 そんな時役立ちそうなツールをまとめてみました。参考になったらうれしいです。 ※料金は人数の規模によって異なりますので、公式サイトをご確認ください。 ※会社によってはセキュリティの関係上ツールの使用が難しい場合もあるので、ご確認いただいた上で導入してください。 目次1 コミュニケーションツール系1.1 ChatWork1.2 Slack1.3 Skype1.4 ZOOM1.5 Mic […]
皆様はプロジェクト開発の情報共有に、どんなツールを使用中でしょうか。 今お使いのツールが使いにくいと感じたことはありませんか？ バグ管理ツール（BTS）は、プロジェクトの理想的な進行管理に際し、必須と言っても過言ではないと思います。 本記事では、理想的なプロジェクト進行管理のため、 簡単に各サービスのポイントをおさえながら、おすすめを紹介していきます。 目次1 そもそもバグ管理ツールとは？2 ツール紹介2.1 Wrike2.2 producteev2.3 Jira Softw […]
Xcodeで好きなフォントを追加したい！ということがあると思います。 最初は戸惑うかもしれませんが覚えると結構簡単に追加できます。 目次1 まずはフォントをダウンロード2 フォルダにフォントを追加3 Infoにフォントを登録する4 実際に使ってみる まずはフォントをダウンロード まずはフォントをダウンロードします。 今回はGoogle Fontsの中の『Noto Sans Japanese』をインストールしてみます。 フォルダにフォントを追加 ダウンロードしたらXcodeで今 […]
今回は初心者用にAndroid studioで縦並び・横並びで整列させるレイアウトの仕方をご紹介します。 主に使うのはLinerarLayoutです。 目次1 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう1.1 横並びにする場合1.2 縦並びにする場合 LinerarLayoutで縦並び・横並びで整列させるレイアウトを実現しよう 今回は『デザイン』タブベースで進めていきます。 まずは新しいファイルを開きましょう。 見た通り何もないファイルなので […]
前回のエントリーでアプリ内課金について簡単にまとめましたが、今回は実際にGoogle Play ConsoleやApp Store Connectでアプリ内課金のアイテム登録をおこないます。 大前提としてGoogle Play ConsoleまたはApp Store Connectにログインしてアプリ登録が出来ることとなります。 必ずしもアプリが公開されている必要はありませんが、必ずアプリをアップロードしている必要があります。 また、Google Play Console、A […]
ご時世柄なかなか人を集めることができない中、WEBセミナー・オンラインセミナーへの需要が高まっています。 もしかしたらまだ一歩を踏み出せていない方もいらっしゃるかもしれませんが、WordPressで構築したオウンドメディアであれば、あまりHTMLの知識があまりない方でも手軽にセミナーの募集ができます。 目次1 WEBセミナー・オンラインセミナーの募集画面の一例1.1 登録画面1.2 一覧画面1.3 詳細画面1.4 セミナー申し込み画面2 どのように作るの？ WEBセミナー・オ […]
ご縁がありまして、セクシー男優の吉村卓さんの似顔絵イラストと、WEBサイトのデザインを担当させていただきました。 そこで似顔絵イラストのグッズを制作したとのことで、ご厚意でアクリルキーホルダーと消しゴムを頂きました。ありがとうございます！ こちらのキーホルダーは今私のデスクの上に鎮座しており、時々笑顔を誘ってくれます。 トレードマークのブリーフ＆仁王立ちポーズが、それらしいとご好評の様子で、「卓ちゃんマン」との愛称で親しまれているそうです。 喜んで頂けて私としても大変嬉しく思 […]
最近は働き方改革の手助けもあってか、ブログで副収入を得たり、SNSをきっかけに在宅で働いている方も珍しくなくなりましたね。ブログで数字を稼ぐにあたって、大きく関わってくるのがGoogleの検索順位。アクセスが無ければ広告収入もままなりません。今回はそんな検索順位に関する話です（SEOといいます）。 目次1 昨今のSEOの流れ2 「記事の更新」以外でできること3 Googleが「順位ダウンの対象」としているもの4 1.スマートフォンに対応していないサイト5 2.ページの読み込み […]
運営会社:株式会社8bit
制作サービス
運営サービス
