はてなブックマーク

Visual Studio Code、軽量で拡張性があって非常に使いやすい無料のコードエディターですが、初心者の方には少しとっつきにくい印象があります。 インストール直後は英語設定 プレビュー機能がない Microsoft製なのでWindowsのイメージ 個人の主観かもしれませんが、MicrosoftのOfficeに通じるような、少し事務感のあるエンジニアっぽいお堅いイメージです。 ▼AtomとVScodeの公式ダウンロード画面。Atomかわいオシャレに対して、VScodeはものすごく普通。 ただ、２、３年前くらいに巷でやたらと 「VScodeに乗り換えました！」 「VScodeがサクサク」 など、やたらとVScode推しの声が聞こえてくるようになり、私は当時愛用していたAdobeのBracketsからVScodeに移行しました。 たしか遊びのゲーム制作に用いたUnitiyでC#の標準エデ

PCの買い替えなどで、新たにソフトを入れなおして一つ一つ再設定していく作業… 面倒ですよね。 私事ですが、つい先日M1チップ搭載のMacbook Airを購入して、まさに環境移行に時間を費やすという状況がありました。 そこで何かいい方法がないかと調べたところ、クラウド同期による便利な方法を見つけた次第です。 という事で、今回は表題の通りVScodeの設定をそのまま同期して拡張機能や設定を自動で揃える方法をご紹介したいと思います。 OfficeやAdobeのソフトなども何でもクラウドでデータ同期などが当たり前の昨今、こういった環境移行が簡単に行えるというのはまさにクラウドの恩恵ですね。 Windows/Mac問わず移行できるので、同じようにVScodeの環境移行に困ってる方は是非ご参考頂ければ幸いです。 ではやっていきましょう。 VScode標準の機能で設定の移行が可能 今回の環境移行の方法

前回に引き続きWordpressのマルチサイト機能をご紹介したいと思います。 ▼前回Part.1ではマルチサイト化におけるメリット・デメリットをご紹介しています。 webabc.hatenablog.jp Part.2の今回は実際に導入する手順を解説していきます。 Wordpressの多言語対応などでマルチサイト化しようと今から実践・検討される方の参考になれば幸いです。 ではやっていきましょう。 プラグイン無しでのWordpressマルチサイト化手順 ▼有料プラグインを使って簡単にマルチサイト化する方法もあります。 All-in-One WP Migration Multisite Extension プラグインは有料だったり、利用しすぎると動作に影響が出て重くなったり、最悪エラーが出てしまうというデメリットもあるので、今回はプラグインを使わない方法を解説していきます。 wp-config

Wordpressには標準でいくつもサイトを運営できるマルチサイトの機能が備わっています。 通常は無効化されているこのマルチサイト機能を使うと、ひとつのWordpress本体データと、ひとつのデータベース内に異なるサイトを複数持つことが出来ます。 今回はとあるご相談者がサイトのの多言語対応をしたいというご要望だったので、マルチサイト化による方法をとらせて頂きました。 マルチサイトはこれまであまり触ってこなかったので、今回調べてわかった導入の手順など記しておこうと思います。 手順以外にまずPart.1ではメリット・デメリットなど考察もしていきますので、マルチサイト化について検討されてる方のお役に立てれば幸いです。 ではやっていきましょう。 Wordpressマルチサイト化のメリット・デメリット考察 マルチサイト機能を使うと、Wordpressのコアファイルやデータベースを共通しながら複数サイ

Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。 その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。 多言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい時に役立つ情報かと思いますので、ご参考頂ければ幸いです。 ではやっていきましょう。 カスタムフィールドを使う プラグインなどの対応方法もあるかと思いますが、一番シンプルにプラグイン無しでカスタムフィールドを使った実装方法を解説していきます。 ①functions.phpに処理を記述 Wordpress管理画面からは「外観＞テーマの編集＞functions.php」で編集して保存。 または、FTPソフト等用いてファイル管理されている方はそのまま編集してサーバーへ反映してください。 functions.php(最終行の?>より前、PHPの記述内

このところWebデザイン入門用の記事を多く書いてきました。 模写コーディングの超初級サイト3選記事など、厳選してみて思ったのが、もっと入門用に最適なサイトはないかという事。 シンプルでミニマルかつ、自然と頻出タグなどが身につくようなサイト。。。 ▼なるべく入門者に適したサイトをピックアップした記事です。 webabc.hatenablog.jp 探してみましたがご紹介したサイト以上のものはなかなかありませんでした。 そこで、無ければ作ってしまおうと。 今回はWebデザイン入門に最適なコーディング練習用のサイトデザインテンプレートを作成してみましたので、ご紹介します。 是非練習用にお役に立てれば幸いです！ Webデザイン入門コーディング練習用オリジナルテンプレート では今回作成したPCサイトのコーディング練習テンプレートをどうぞ。 ▲上記画像を右クリックから「名前をつけて画像を保存」等してご

動作が軽快かつ、様々な拡張機能が使えて便利なコードエディタ「Visual Studio Code」、通称VScode。 とても使いやすいですが、たまに予期せぬ動作で困ることもあったりします。 今回はGitLensがサイドバーから消えて困った時の対処法です。 少し調べてすぐに解決しましたが、忘れないうちにメモ。 コマンドパレットから> Gitlens:Show Welcome View コマンドパレットの呼び出しは「表示>コマンドパレット」かショートカットで 「Ctrl(MacではCmd)+Shift+P」 そして入力欄に 「Gitlens:Show Welcome View」 と入力。 途中で候補で表示されるので選択すればOKです。 これだけでサイドバーにGitlensが復活したはずです。 非常に簡単ですね。 それでも復活しない場合 まだ復活してないよという方はWelcomeページで 下の

SEOのひとつに、サイトのURLの正規化というものがあります。 サーバーによって初期設定では同じ内容で別のURLが混在してしまっているので、wwwの有無、SSL接続の有無を統一することを言います。 http://サイト名.com https://サイト名.com http://www.サイト名.com https://www.サイト名.com 上記のように1つのページに対していくつものURLが存在する状態のままだと、検索エンジン評価が分散してしまい、SEOに悪影響となってしまいます。 URLの正規化とはこういった同じ内容のページのURLを統一することを指します。 今回はこのURLの正規化の方法について、解説していきたいと思いますので、ご参考頂ければ幸いです。 URLの正規化の方法 URLの正規化はサーバーによって方法が微妙に異なります。 基本的には「.htaccess」というファイルを使っ

多くの方がご愛用の「Googleマップ」。 お店のサイトなど、直接足を運んでもらうような集客が必要なサイトでは是非アクセス案内として掲載しておきたいですよね。 このGoogleマップの埋め込みについては非常に簡単な方法と、Googleの提供している「Google Maps API」を使った少し手順のかかる方法の2種類があります。 後者のGoogle Maps APIを使用する方法だと、デザインをサイトに合わせて編集出来たり、複数の場所を一度にマーカー表示させたり、様々なカスタマイズが可能ですが、こういったAPIの利用に慣れていない方には少し手もかかり難易度が高くなります。 今回は前者のシンプルなGoogleマップの埋め込み方法について解説したいと思います。 Googleマップの共有からコード取得し、iframe埋め込み 見出し通りの流れではありますが一つ一つ手順を追って解説します。 Goo

サイトを印象付ける方法としてアニメーションが用いられているのをたまに見かけると思います。 ページをスクロールさせると、その場所に来たタイミングでふわっとタイトルや画像がフェードインしてきたりするアニメーション等ありますよね。 こんな感じにふわっと表示 ↑今回ご紹介するのはこの動きの実装方法です。 ただ単にアニメーションさせる方法としてはCSSでも可能ですが、スクロールに合わせてとなるとJavaScriptが必須です。 そこでJavaScriptに苦手意識がある人も簡単安心なプラグインでの導入を紹介したいと思います。 jQuery不要、超簡単ふわっと表示系JavaScriptプラグイン「AOS」 いくつか使用した事のあるプラグインの中で最近ちょうど使っている 「AOS (Animate On Scroll Library)」というjQuery不要のJavaScriptプラグインを解説します。

ウェブサイトではトップ画面などによくスライドショー/スライダーを見かけますよね。 でもHTML/CSSだけではスライダーは実装出来ません。 なるべく簡単に実装できるよう、私もよく利用するSlick.jsやbxSliderなどのプラグインがありますが、jQuery必須だったりします。 jQueryはJavaScriptを拡張したものです。 JavaScariptもままならないのにjQuery？？という方、、、困りますよね。 今回はできる限り素のJSを利用したいという方や、HTML/CSSと学んで次にスライダーをとにかく実装できるようになりたいという方にjQuery不要の「Swiper.js」導入方法を解説したいと思います。 プラグインとは何か？jQuery？ まだHTML/CSSしか学んだことがないという方であればまずプラグインとは何？というところかもしれません。 簡単にいうと、追加で機能を

各SNSのサイト埋め込みは、Webデザイナーさん、ブロガーさんの需要が非常に高い内容だと思います。 ▼Twitter埋め込みやWordpressプラグインを用いる方法など、前回までの記事はこちら 【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.1「Twitter編」 - ABC ウェブエンジニアblog 【Wordpress】TwitterやInstagramウィジェットをワードプレスに埋め込む方法 Part.2「Instagram編」 - ABC ウェブエンジニアblog 元はWordpressのレッスンでの質問を受けての記事でしたがTwitterや今回のInstagram埋め込みの方法は、はてなブログなどHTMLを記述出来るサービスであれば適用できます。 はてなブログ読者さんも是非お役に立てて頂ければ幸いです。 ▼インスタによ

Wordpressでブログを始めた or やってる方、 「ブログとSNSをうまく連携させたい」 今の時代の当然の願望ですよね。 ちょっと前、生徒さんでWordpressにTwitterのツイートやInstagramの写真なんかを埋め込みたいという方がいたのでご案内しました。 すごく簡単ですが一応記事にして少し解説しておきます。 WordpressではなくHTMLが埋め込めるブログツールであればはてなブログ等でも応用効くので是非ご参考ください。 Twitterタイムラインをサイトに埋め込む方法 Wordpressにはウィジェットというサイドバーやヘッダー/フッターなど色んな場所に任意のパーツを配置できる機能があります。 このウィジェットにまずはTwitterの最新ツィートウィジェットを埋め込んでみましょう。 ↓実は公式でウィジェット提供されていてヘルプに詳しく掲載しています help.twi