社会人も可！学割でMacやイラレ/フォトショ等Adobeソフトを安く買う裏技

デザイナー必須のイラストレーターやフォトショップなど、Adobe Createve Cloudのソフトウェア群。通称アドビCC。 かなり高額のソフトなので、定価よりなるべく安くなる方法で賢く購入していきましょう。 ▼月額のサブスクリプションの他、12ヵ月版がAmazonで販売されてます。 // Adobe Creative Cloud コンプリート 12か月版 Windows\/Mac対応 オンラインコード版 一年に何度かセールで安く買える時もありますが、それ以上に「学生・教職員向け」の学割版が安かったりします。 そんな事言っても、学生じゃないし、、社会人だし、、と嘆く方に朗報。 今回紹介する…

【BASE/Shopify/カラーミー】ネットショップ開設するならどっち？ASP/オープンソースとは【EC-cube/Welcart】

ネットショップを開きたいという場合、自社サイトに組み込む方法や他社の提供しているサービスと連携する方法など、いくつかパターンがあります。 ショップ開設のご相談の際に、ざっとパターンを比較してお話することもあるので、今回あらためて比較・解説記事としてまとめてみたいと思います。 これからネットショップを開くことに興味をお持ちの方や、ECサイトをどうやって作るかに興味を持たれた方の参考になれば幸いです。 ではやっていきましょう。

HTMLタグ・CSSプロパティの英語の読み方・発音

width、height、align、radius、relativeなど間違いがちなHTML/CSSの読み方を、一般的な読まれ方と実際の英語の発音などと照らし合わせてWeb現場で使えるようまとめて解説しています。

【参考サイト】フリースタイルエンターテイメント

面白いサイトがないかリサーチしていると、ふと、「お！」と目を引かれるサイトがありました。 ▼株式会社フリースタイルエンターテイメントというWeb制作会社のホームページです。 www.freestyle-entertainment.co.jp フリースタイルエンターテイメントさんは、数多くの制作事例があり、リクナビ新卒採用の業界エリア部門4年連続1位を誇る人気企業。 そのフリースタイルエンターテイメントさんのコーポレートサイトがつい先日リニューアルしたということで見てみたのですが、、、

VScodeの設定を同期してWin/Mac拡張機能や設定を揃える

VScodeの設定の同期機能を使えば、拡張機能やUI設定などを、新しいデバイスへまるごと移行出来ます。 簡単便利な機能をキャプチャを交えて解説した記事ですのでお役に立てれば幸いです。

【検証・解説】Youtube埋め込みはサイト評価を下げる恐れ有り！要一工夫、読み込み遅延。

Youtube動画を埋め込む際に、評価スコアへの影響を下げるように動画を読み込ませる方法を解説します。 data属性を利用したjavascriptによる遅延読み込みと、代替画像に置き換えてクリック後に読み込ませる方法を解説しています。

#2プラグイン無しでWordpressのマルチサイト化「導入実装マニュアル・XSERVERでの手順例あり」

前回に引き続きWordpressのマルチサイト機能をご紹介したいと思います。 ▼前回Part.1ではマルチサイト化におけるメリット・デメリットをご紹介しています。 webabc.hatenablog.jp Part.2の今回は実際に導入する手順を解説していきます。 Wordpressの多言語対応などでマルチサイト化しようと今から実践・検討される方の参考になれば幸いです。 ではやっていきましょう。

#1プラグイン無しでWordpressのマルチサイト化「メリット・デメリット考察」

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

【Wordpress】記事ごとにhead内にタグを追加するカスタマイズ方法

Wordpressのカテゴリーで分けた多言語化サイト化のご相談を頂きました。 その際に多言語に対応したメタタグを各記事ごとに挿入する必要があったので、調べた内容を記したいと思います。 多言語化とは関係なく、記事毎にheadタグ内に何かしら記述を挿入したい時に役立つ情報かと思いますので、ご参考頂ければ幸いです。 ではやっていきましょう。

#2 Wordpress独自テーマ作成によく使う関数や記述。「テンプレートタグ一覧」

Wordpressのテーマファイルの各テンプレート内で使う独自の関数をテンプレートタグと呼びます。 例えば記事ループ内で本文を表示させる「the_content()」などもテンプレートタグ。 前回記事で「Wordpressの独自テーマ作成に良く使う関数や記述」ということで、テーマ作成の際のstyle.cssへの記述やfunctions.phpへ書く関数なども取り上げたので、今回は良く使うテンプレートタグのみピックアップして取り上げたいと思います。 ▼前回記事は独自テーマ作成の流れに沿った解説多めの内容となっています。 webabc.hatenablog.jp オリジナルのテーマ作成をしている方…

Wordpress独自テーマ作成によく使う関数や記述。カスタマイズ頻出文

Wordpressの独自テーマ作成時、カスタマイズによくつかう関数や記述をまとめました。 自分もよく何だっけなと調べながら使用する事も多いので備忘録です。 独自テーマ作成の流れに沿って記述しているので、是非テーマの作成の際などお役立て頂ければと思います。

【Webデザイン】#2 コーディングの思考の流れ。スマホサンプルサイト作成【参考】

前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。 ▼#1からご覧になられる方はこちらからどうぞ。 webabc.hatenablog.jp 模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました。 そのサイトデザインの画像データを元に、実際にどういった思考の流れでコーディングしていくかを解説していきまず。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になってますので、高度な事を期待される方はご容赦ください。 では、やっていきましょう。

【Webデザイン】#1 コーディングの思考の流れ。練習サンプルで実際にやってみた。【参考】

以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。 webabc.hatenablog.jp webabc.hatenablog.jp 今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になっているかと思います。 高度な事を期待される方はご容赦ください。 模写含め、コーディングのやり方など最初の一歩につまづく方のお役に立てば幸いです。 では、やっていきましょう。

【Chrome拡張】ココナラビデオチャットに画面共有機能追加出来る拡張機能を開発しました。

ココナラで提供されているビデオチャット機能では現在画面共有の機能がありません。 「得意を売るならココナラ♪」のCMでおなじみ。 ビジネス、趣味、ただ話し相手になりますといったものでも売り買い出来るアプリ・サービス、ココナラ。 私のようなWeb技術のオンラインレッスンにはもちろん、ビジネスの相談、占い、手芸、様々な場面において、画面をシェアして一緒に見ながら話せるのと話せないのは大違いです。 そこで独自にココナラのビデオチャットに画面共有機能を追加するGoogleChrome拡張機能を作成しました！ coconala.com

【PHP】文字の置き換え、str_replace()と正規表現置換preg_replace()

PHPで文字列の置換えを実現する関数、str_replaceと、正規表現を使ったpreg_replace()についての解説記事です。 str_replaceは日本語でも置換え可能です。

【コーディング練習用】スマホサイト版Webデザイン入門オリジナルデザインテンプレート

▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。 webabc.hatenablog.jp 今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。 よくある模写コーディングにおすすめのサイト以上に構造がシンプルになっていますので、是非Webデザイン入門、コーディング初心者の方のスキルアップにご活用頂ければと思います。

【コーディング練習用】Webデザイン入門オリジナルデザインテンプレート

模写コーディングに挑戦する前に、さらにシンプルなhtml/cssでコーディングできる練習用オリジナルデザインテンプレートを作成しました。 非常に簡素な構成なので、初心者の方のWebサイト作成入門に最適です。

【Chrome拡張機能】模写コーディングのやり方が分からない方へ…必須な拡張機能5選＋α

前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。 ▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。 webabc.hatenablog.jp ただそれでも初挑戦するような方はやり方が分からないという人も多いと思います。 今回は模写コーディングをする上で役に立つ、必須ともいえるGoogleChromeの拡張機能を紹介させて頂きます。 これから模写コーディングに初挑戦するという方、行き詰ってる方のお役に立てれば幸いです。 ではやっていきましょう。

難しくない！模写コーディング超初級おすすめサイト3選+α

「模写コーディングって難しい」、「やり方が分からない」 と、HTML/CSSを学んだ次のステップでつまづく方は多いと思います。 まず、模写コーディングとは 「既存のサイトの見た目をそっくりそのまま、自力でHTML/CSS/JSなどコーディングをして再現する」 ことをいいます。 ▼これから独学でWebデザイン入門されるという方にもおすすめの勉強法です。webabc.hatenablog.jp Webデザイン脱初心者の登竜門として、模写コーディングは立ちはだかっています。 その原因として、模写でおすすめされるウェブサイトの多くが、0から入門された初心者にとってはレベルの高いものが多いせいだと思いま…

【CSS】ハンバーガーメニューPart.3「動くアイコン5種、サンプルコード解説」

CSSのみで実装したハンバーガーメニューの動きのバリエーション5種をサンプルコードとともに解説しています。 2本線のメニューアイコンから、定番の3本線ハンバーガー。ステンシル風、ブラインド風の動きなど紹介しています。

【初心者】Webデザイン入門、独学で何から学べばいいか分からない人へ【未経験】

Webデザインを独学で始める方で、まず何から手をつければ良いか分からない方がいらっしゃると思います。 HTML/CSS等のWebデザイン入門系の参考書を手に取って一通り読み終えても、そこから「独学を進めることが出来ない…」という相談も実際のレッスン生の方でいらっしゃいました。 今回はWebデザインを一から学ぶ方向けに、独学で何からどういう手順で学べばいいか、例を挙げてお話したいと思います。

【HTML/CSS】Web制作入門記事まとめ、コーディング基礎固め！

前回、2020年振り返りということで、アクセスの多い記事をまとめてご紹介しました。 webabc.hatenablog.jp 年明け初投稿の今回も、引き続きまとめ記事シリーズ第2弾。 Web制作を学ぶ上で役立つ記事をなるべく学習ステップ順にまとめていこうと思います。 入門したての方や、学習中の方などのお役に立てれば嬉しいです。 是非ご参考ください。 //