ー webp（ウェッピー）とは…？ 米Googleが開発しているオープン標準の静止画像フォーマット。ファイルの拡張子は「.webp」。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPE…
※GitHubのアカウントとGitをインストールしていることが前提となります。 Gitをインストールしたら、「Git Bash」がちゃんと表示されるか要確認…！まずはPCとGitHubの紐づけを行います。＜VSコード＞ 1）VSコードを開きます、上のバーの中から「ターミナル」…
ヘッダーなどナビをhover（ホバー）すると英語⇔日本語に変更させるやり方を紹介します。 cssのdisplay:none;を使用！ 今回はナビで使うように簡単に記載いたします。＜html＞ <nav> <ul> <li><a href="#"><span class="1">Home</span><span class="2">ホーム</span></a></li> <li><a href="#"><span class="1">Menu</span><span class="2">メニュー</span></a></a></li> </ul> </nav> ＜css＞ ul li a .2{…
今回はサイトに例として、「東京タワー」のマップを埋め込みする方法です。１）まずGoogleマップで目的地を調べます。 https://www.google.co.jp/maps/?hl=ja２）左上のハンバーガーメニューを開き、「地図を共有または埋め込む」をクリック ３）「地図を埋…
お勧めのサイトは「Convertio」です。convertio.co変換できるファイルの種類も多く、 ログインや会員登録も不要で、そのままアップロードして変換してくれるのでお勧めです。ただし、100MB以下のサイズのみのようなのでそこがデメリットではありますが クラ…
サイトに動画を載せる場合、そのまま載せるとサイズが大きく読み込みに時間がかかるのでサイトが重くなる原因となります。 そのためサイトに載せる際は圧縮したほうが良いです。圧縮方法は色々ありますが、よく使うサイトは「VideoSmaller」です！ www.video…
SNSでサイトのURLを共有・シェアされることが多くなってきたかと思います。 その際にURLだけでなく、画像と一文が表示されますがその画像と一文の設定が「OGP」です。①画像の制作 だいたいコーポレートサイトやお店のサイトだとロゴを使うことが多いです。 …
例えばこちらのハート♥の画像を繰り返しで背景に使いたい（パターン化）とします。 ①画像単品のファイルを開き⇒編集の中にある「パターンを定義」をクリックします。 ②パターン名を入れてOKをクリックします。 ①、②でパターンの登録は終了したのでサイズの大…
〇円以下だと決済には進めないようにする設定ですが、デフォルトにはありません。 【結論】 下記サイトの「答え」部分のアクションフックをfunction.phpに追記する方法が一番のようでした。 A minimum total purchase amount of %s is required to checkout.…
こんにちは！ 未経験のwebサイト制作の勉強にアクセスいただきありがとうございます。見ていただいている方は未経験の方が多いでしょうか。 または私同様に未経験からweb制作をしている方でしょうか^^BLOGの記事テーマに悩んでいるのもありますが、 皆様が気…
cssでギザギザの境界線を作るやり方です。⇊⇊ギザギザとは、こういう感じ⇊⇊ 境界線にひと手間加えるだけでPOPになります！ html <div class="gizagiza"></div> css .gizagiza { position: relative; width: 100%; height: 40px; background: transparent; filter: drop-shadow(0 0 0 rgba(…
まずは公式サイトからファイルをDLしてリンクします。 getuikit.comDLしたファイルの中で必要なのは、下記3つです。 <link rel="stylesheet" href="css/uikit.min.css" /> <script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script> Ulkitのメディアクエリは4つに設定されております。 変えたい場合はuikit.min.cssの数字を置換するしかないですね… クラス名 uk-hidden@s</link>…
Word pressのメニューを表示、非表示に設定できる便利なプラグイン「Admin Menu Editor」 お客様に引き渡す際に操作してほしくない項目を非表示にしてからお渡しするなど便利に活用ができます。＞＞こちらで分かりやすく説明がされていたので参考にしました…
WordPressを使用する上で便利なプラグインをご紹介いたします。 Post snippets サイト内でよく使用する文章や単語 例えば、「電話番号」「社名、店名」など…を登録しておくことで 各ページでいちいち入力しなくてもコードで読み込むことができます。 ja.word…
Photoshopで簡単な画像加工をしましょう♪ まずは画像を用意して背景からレイヤーに変更します。 次にレイヤー→新規調節レイヤー→明るさ・コントラスト OKをクリック そうするとこういう風な画面になりますね。 明るさとコントラストを調整します。 加工なし …
以前にプラグインのご紹介をいたしましたが、名称が変わったようです。プラグインはこちら↓↓ ja.wordpress.org使い方↓↓ https://wind-mill.co.jp/instagram-gallery-smash-balloon/簡単にInstagramを埋め込むことができるのでお勧めです！！
Wordpressで便利なプラグインを紹介します。 Duplicate post Wordpressの固定ページを複製できるプラグインです。 ja.wordpress.org Public Post Preview 公開していない下書き状態の固定ページを 他人に見せれるようにURLを発行してくれるプラグインです。 …
「Instagramフィード」というプラグインを使用しています！ 分かりやすいサイトを見つけたので参照してください。www.smilevision.co.jp blastfactory.jp ※注意点はパスワードを変えてしまうと表示されなくなってしまうので注意です。 パスワード変えたタイ…
css3でテキストグラデーション、ボーダーグラデーションをかけましょう！ テキストグラデーション html記述 今回はh2をグラデーションにします <h2>タイトル</h2> CSS記述 h2{ color: #ff69b4; /*cssが効かない時のために必須です*/ background: -webkit-linear-gradi…
WPではプラグインを使用すれば簡単にfaviconやタッチアイコンを設置できます。使用するプラグインは、 RealFaviconGenerator ja.wordpress.org 簡単なのは、260px×260px以上の正方形の画像を作って（png、jpgで） メディアにその画像を入れておきます。 プラ…
仕事を始めて、毎日Photoshopやillustratorを使用していますが 一番使うものは「クリッピングマスク」だと思います。Photoshopとillustratorでは操作方法が異なりますが、 少しでもデザイン（バナー制作など）をする方は絶対に覚えたほうが良いです。 illust…
bxsliderを使用して自分のサイトにあったカスタマイズをしましょう！！ bxslider.comまずは、bxsliderの公式サイトに行き、GitHubのダウンロードからzipファイルをダウンロードしてください。 ダウンロードしたzipファイルには色々入っておりますが、その中…
就活について書きたいと思います。私は、６ヶ月間の職業訓練校に通っておりましたが 学校を卒業してすぐに就職したかった為 ５ヶ月目の１週目までにwebと紙のポートフォリオを作成しました。紙を作っていない方も多かったですが、私的に紙のポートフォリオも…
divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく比較的自…
<style> .container { position:relative; } .box { position:absolute; } </style> </head> <body> <div class="wrapper"> <div class="box"></div> </div> </body>
定義型リスト 定義型リストとは「ul」、「ol」リストと少し違い、 「dt」= 用語の指定 「dd」= dtで指定した用語の定義 「dl」= 「dt」「dd」を挟む例 <dl> <dt>レモン<dt><dd>酸っぱい黄色い果物</dd> <dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd> </dl> 以下の文を定義型リストを使ってマー…
https://codepen.io/ CODEPENとは？ 「CODEPEN」とは、HTML・CSS・JSなどのソースコードを保存・公開・共有できるWEBサービスです。他の人が作ったソースをその場で編集できたり、プレビューで確認出来、動作確認などにも使えて非常に便利です。ソースをブロ…
remを使ったフォントサイズ まずはremを使ったフォントサイズの指定を覚えましょう。 「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相…
レスポンシブWebデザイン（RWD）の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…
レスポンシブデザインとは？ レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…
