■過去に投稿した水彩風テクスチャ2種（http://www.pixiv.net/member_illust.php?mode=medium&illust_id=16908791）（http:/

この記事はこんな方のために書いています。 Windowsを使う機会がある毎日開くようなフォルダが複数あるファイルを別フォルダに移動させたり、コピペする作業が面倒だ気が付くとフォルダウインドウをいくつも開いていることがある複数当てはまるという方、Windowsのファイラー (フォルダやファイルを表示するソフトウェア) はエクスプローラーだけだと思ってませんか？ ハッキリ言いましょう。 エクスプローラーなんて使うのは老害だけで十分だ！ (半沢直樹風に) 下の画像みたいに複数ウインドウを開いていた非効率的な時代は、もうとっくに終わっているんです。 今の時代はこんなことする必要など全くありません。なぜなら、 よく使うフォルダは1クリックで全て開くことができるファイルの移動やコピペは1つのウインドウで完結する機能は自分の好きなものを自由に選択して追加できるこれが現代のファイラーです。ファイラーを起動

こんにちは！CX事業本部の片岡です。 エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。 そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！ よく使うショートカットの紹介 拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。 https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings 編集時によく使うショートカット 文字選択 Command + D ：文字を選択（入力するたび選択中の文字を複数選択できます） Command + U ：文字選択のUndo（選択前に一つ戻ります） Command +

普段使用しているエディタはPhpStormですが、PHP以外を書くときはVSCodeはとても便利なので重宝しています。 私が個人的におすすめする拡張機能を紹介します。 他にも良い拡張機能があればコメントにて教えてもらいたいです。 この記事があなたのお役に立てれば幸いです。 VSCode 関連記事 VSCode の初期設定 拡張機能の探し方 マーケットプレイスが用意されているので、ここからお好みの拡張機能を探すと良いでしょう。 Featured: おすすめ、注目されている拡張機能 Trending: 急上昇の拡張機能 Most Popular: 最も人気のある拡張機能 Recently Added: 最近追加された拡張機能 まだ評価されてない追加されたばかりのものが多いので追加する場合はご注意ください 基本 Material Theme VSCodeの数あるテーマの中の一つです。 歯車のアイ

Visual Studio Codeの概要 Visual Studio Code（以降VS Code）はMicrosoftが開発したソースコードエディタです。C#やVisualBasicといったMicrosoft社の開発言語はもちろん、HTML、CSS、JavaScriptといったフロントエンドの言語や、JavaやPython、SQLといった多くの言語をサポートしています。動作環境もWindows、Linux、macOSに対応しており、無料で利用できます。開発者の人気が高く、Stack Overflow 2019 Developer Surveyでは、VS Codeが最も人気のある開発者環境ツールとしてランクインしました。 VS Codeの人気の要因として、コードの自動補完、Emmet、ユーザスニペット、デバッグ、Gitサポートといった豊富な機能や、テーマやキーボードショートカットのカスタ

今日は、常時HTTPS化とドメイン名変更に関する話題を。Web担では10月にこの両方を一気に進めましたが、検索エンジンからのトラフィック減など一切なしに完了しました。そこでやった手順をお届けします。 ドメイン名を変えるなら常時HTTPS化もWeb担では、オープン当時の社名に基づくドメイン名「impressrd.jp」を長らく使っていましたが、すでに会社が「株式会社インプレス」になっているため、全社的な統一性の観点からドメイン名を変えることにしました。 そして、ユーザーログイン機能があるサイトであるため、Wi-Fi環境でのセキュリティ担保なども目的として、常時HTTPS化を行いました。 旧URL： http://web-tan.forum.impressrd.jp/ 新URL（ドメイン名変更＋HTTPS化）： https://webtan.impress.co.jp/ 実は、この移行作業には

サイトのドメインを変更した場合はGoogle Search Consoleのアドレス変更ツールを使うと新しいURLのインデックスをスムーズに促すことができます。サイトのドメインを変更したときのSearch Consoleの設定手順を以下にまとめました。 Google Search Consoleのアドレス変更ツールとは Google Search Consoleのアドレス変更ツールとはアドレス変更時に検索結果にその影響を最小限に抑えるための移行ツールです。 アドレスの変更通知を利用すると、現在の Google 検索の掲載順位への影響を最小限に抑えながら、新しいアドレスの新しい URL をインデックスに登録するために必要な Google での移行プロセスを管理できます。 アドレス変更ツールの使用 – Search Console ヘルプ 新ドメインをGoogle Search Console

Home / ルマーブログ / SEO / 順位変動リスクを回避！ドメイン変更前に必ずおこなうSEO項目 順位変動リスクを回避！ドメイン変更前に必ずおこなうSEO項目 サイトリニューアルによるドメイン変更やサーバー移転など、URLの変更の際には大きなリスクが伴います。 移行に失敗し、ドメイン変更後の順位急落やトラフィック減少など、取り返しがつかない場合もあります。移行前のトラフィックに戻すのに2年～3年とかかってしまうウェブサイトも実際にあるのです。 今回は、そんなドメイン変更によるリスクを回避するために、変更前に必ずチェックすべきテクニカルSEOをご紹介します。DeepCrawlの活用例とともに解説しますので、ぜひ参考にしてください。 ドメイン変更によるSEOへの影響 URLが変更になる場合、SEOに関して大きな影響があります。 クローラーは、URLが変わると別のサイトとして認識します。

はじめに 軽量のCSSフレームワークとして有名なUIkitですが、その新バージョンであるUIkit3(2017-06-19時点でbeta25)も比較的安定していると感じましたので、別案件で使ってみました。 今回の「つくってみた」では、そのインストール方法からレイアウトの方法を中心に、UIkit3の使い方をご紹介いたします。 また、ReactやVueといったリアクティブなjsフレームワークとの親和性が高く、UIkit3のサイト自体がVueで作られていています。 ただ、jQueryが必須となっていますので、そこは妥協が必要かもしれません。 2019.03.13 追記 beta31からjQueryは必要なくなりました。 現在(2019.03.13)は3.0.3が公開されており、off-canvasのhtml構造が変更されてたり、新しいコンポーネントや機能が追加されています。 ピュアなCSSフレー

CSS Grid Layoutは、CSSによるレイアウト手法の1つです。様々なレイアウトをこれ1つで実装することができます。 ただ、覚えなければならないことも多く、初心者の方にとっては少し難しく感じるかもしれません。 そこで、CSS Grid Layoutの重要なポイントに絞って、分かりやすく解説したいと思います。 もう迷わない！CSS Flexboxの使い方を徹底解説 CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法... Web Design Trends

2022年4月27日 CSS 以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2カラム まずは基本の2カラム。CSSグリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2カラム カラムを画面の幅に合わせて伸

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

Webサイトを運用していると、記事などの内容をそのまま複製したいケースが多々、あります。例えば、決まったフォーマットでブログ記事を書いていく場合や商品紹介ページなどがそう。 この場合、いちいちゼロからタグを記述して同じようなコンテンツを書いていくのはとてもめんどくさいですよね。 そこで、こんな煩わしさをたったワンクリックで解決してくれるWordPressプラグイン「Duplicate Post」をご紹介します。弊社も日頃より、バンバン使っているオススメプラグインです！　もちろん、この記事も袖の下はございません。 「Duplicate Post」プラグインの設定 公式ページ（https://ja.wordpress.org/plugins/duplicate-post/）からダウンロードしてインストールする、もしくは管理画面のプラグインページからインストールして有効化します。 以下、プラグイ

通常、WordPressで投稿を複製するためには、コンテンツをコピーした上で新規投稿に保存し直す必要があり、手間がかかる。 しかし、Duplicate Post というプラグインを使えば、投稿一覧画面からクリックひとつで投稿を複製できるようになる。 そこで、Duplicate Post の基本的な使い方と、カスタムページなど上級者向けの設定方法をご紹介する。参考にして頂けると幸いだ。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続けている。 各サイトの成功要因をインタビューしているので、 あなたのサイトに役立てて欲しい⇒25サイトの成功事例インタビューはこちら １．Duplicate Post とはDuplicate Postとは、面倒な設定

パターンブラシの作成方法 についてご紹介。 綱やチェーンなど、連続したひも状のモチーフの制作に役立つ、Adobe Illustratorの「パターンブラシ」機能。 通常の「線（ライン）」オブジェクトが直線や曲線、マルや四角など自由に変形できるように、パターンブラシで変形自由なひも状のオブジェクトを作成することができます。 今回使用するイラストレーターのバージョンはCCですが、それ以前のものでもほとんど同じ要領で作成することができると思います。 例として「綱」をモチーフに作成 こんな感じの「綱」をつくってみましょう。 ー ①元となるオブジェクトを作成する まず、こんな形状のオブジェクトをペンツールでつくる。 それを3つに複製。 次に左のオブジェクトに目印となるポイントを決めて… 左右のオブジェクトの同じポイントにぴったり接するように「塗りなし・線なしの四角」を配置。 その「四角」の高さを調節

この記事について 「GoogleAnalyticsの設定、どうしたらいいんだっけ...」と迷ったときのためのレファレンスです。 新規のサイトを立ち上げる時・GAの再設計がしたくなった時に参照してください。 のちのちアクセス解析しつつ改善していくために、できるだけ汎用的にデータを拾っておく 可能な限り、非コーダーができる作業で完結させる というのをテーマにまとめました。 STEP 0: GTM・GAのアカウントを取得 Googleのアカウントがあれば、驚くほど簡単に取得できます。 GoogleAnalyticsのアカウントを作る GoogleTagManagerのアカウントを作る 基本的には、GoogleTagManager（以下、GTM）経由でGoogleAnalytics（以下、GA）を導入します。GTMの使い勝手がよいのはもちろん、GAをカスタマイズしたくなったときに、コーダーの手を借