zono note

zono note

日々の学び、気付きを大切に綴りたい

webデザイン

Photoshopでwebデザイン デザイン 幅1200PX 高さ1500PX コンテンツ 幅980PX レイヤ分け ・header ・navi ・content グループ ・footer ・main-img 文字間を詰める alt + 左右キー クリッピングマスク オブジェクトの上に配置したい写真を上に持ってくる オ…

コンテンツマーケティング

● コンテンツマーケティングは 自社の見込み客に対して価値のあるコンテンツを定期的に提供することで ユーザーをファン化させ、商品を買ってもらう一連の手法 ● コンテンツマーケティングが注目される理由 これまで、マスメディアなど、企業側から一方的に…

SEO対策①

[1] サイトの「タイトル」は、検索ページのタイトルとして重要な部分な為、良く考えて付ける。 サイトの「タイトル」が検索結果に反映されい原因として、サイトの内容とタイトルが似つかわしくなく、GOOGLE側で判断されてタイトルが変えられてしまう。 [2] …

css boxを折り返し

css positionイメージ

css

position 図

トップ画面のメニューを固定表示

css

#masthead { position: fixed;/*ヘッダーを固定*/ z-index: 9999;/*一番前に表示されるように設定*/ top: 20;/*画面一番上で固定*/ width: 100%;/*ヘッダーが横幅いっぱいになるように指定*/ background-color: #ddd;/*背景色を指定*/} 上記のcssを入力する…

オブジェクトの整列 

css

<code> <div style=" display: flex; flex-wrap: wrap; text-align: center; "><div style=" width: 200px; margin: 10px 10px; background: #8b0000; font-size: 16px; font-weight: bold; padding: 8px 16px 8px 16px"> <div class="wrapper"><div class="item">フレーム</div> </div></div></div></code>

css boxをキレイに整列する

css

>IHTMLI ~ フレーム PUSH テーブル・デスク PUSH チェア・ソアー PUSH バフェ・サイドボード・テレビ台・チェスト・ドレッサー PUSH カップボード・キャビネット・ブックケース・ビューロー PUSH ワードロープ・サイドバイサイド・ベッド・その他家具 PUSH …

css ボタンの作成

『ボタンを1つ作成』ボタン コード 『追加でボタンをもう一つ作成』ボタン コード 【作成イメージ】① 箱を作成 ② テキスト作成 ③ 箱を作成 ④ テキスト作成 【ポジション】 position: absolute; left: 25px; top: 50%; position: relative

ポートフォリオ

私が、クラウドソーシングで仕事に応募するときのポートフォリオです。良かったら見て頂けると嬉しいです!https://zoosan0222.jimdofree.com/ 以上

最近のデザイン

① 手ぬぐい ② カード ③ バナー 以上

Photoshop スライスで画像切り抜き

①スライスで切り出したい画像を選択 ②webに画像を保存を選択③jpegで保存 ④設定:カスタマイズ スライス:ユーザー設定 ⑤スライスした画像が全て切り出しされる 以上

Photoshop、背景の消し方

消しゴム ⇒ マジック消しゴム消したい場所を選択する

ロゴマーク 作品集③

AIコーヒーショップ 合板会社 ブランドロゴ

ロゴマーク 作品集②

農園名刺 農園段ボール 貸衣装名刺1 貸衣装名刺2 カナ文字ロゴ 以上!

ロゴマーク 作品集

ホームページ作成の傍ら、ロゴマークも作成しています。採用には至っていないものの、今まで作成したロゴを載せます!野球ロゴ①野球ロゴ②野球ロゴ③クリーニングロゴ①クリーニングロゴ②ブランドロゴ福祉車両ロゴ①福祉車両②手芸ロゴ①手芸ロゴ②ブログロゴ①ブロ…

カスタマイズ CSS

一例 ① #post-120 > div > div > div > div > section.elementor-element.elementor-element-ea732a5.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.elementor-section.elementor-top-section > div > div > …

wordpress ファビコン

wordpress  ボタンタップで自動コール

tel:09900000000というようにリンクに入力する

elementor でボタンの移動

position インライン(auto)Absoluteoffsettで縦横移動

link rel

img src

各要素に画像の情報を記述します。srcには画像のあるURL altに画像の説明文 widthに横幅 heightに高さ borderには境界線の指定

href

▼ hrefの読み方 hrefの読み方は以下の3パターンになります。 ・エイチレフ ・エッチレフ ・英語の略だと、「Hypertext Reference ※ハイパーテキスト リファレンス」となります。元々「href」は「aタグ」とセットになるので、「a href」になります。「a href…

目指せ!LPコーディングマスター

最近は、主に、ロゴマークやホームページ作成について大切な部分を忘れないように記録をしてきました。 多数の案件を見る中で、今の自分にはコーディング(HTML・CSS)の基礎力がないことを痛感して というか、前々から、避けては通れないと分りながらも、「…

wordpress 会員制サイト作成

使用するプラグイン 『Ultimate Member』Ultimate Memberが良いなと思ったところは、ユーザーの権限を細かく設定できるというところ初期設定でするべきことは次の3つ。・各種ページ作成 ・ページブロックの設定 ・会員登録時のメール設定①各種ページ作成 こ…

ロゴマーク納品形式

ファイルはpdfで提案する

ホームページまとめ

種類 ・コーポレートサイト ・サービスサイト ・プロモーションサイト(LP) ・ECサイト ・採用リクルートサイト ・ブランディングサイトミニマルサイトーーー構成する要素(画像や文字)を最低限に絞ったデザイン

ロゴマーク作成へ向けて (クリッピングマスク)

illustratorでクリッピングマスクをする。手順 1、アウトボードに四角の罫線を引き、写真を配置する。 2、罫線を選択する 3、コントロール+X=線が消える コントロール+F=線が出る4、罫線と写真を選択する オブジェクト>クリッピングマスク>作成5、…

ロゴマーク作成へ向けて (オブジェクトの形にテキスト変形)

「魚」のオブジェクトに「fish」のテキストを入れ込む手順1、 オブジェクトの下に、テキストを配置する2、オブジェクトとテキストを選択し 「オブジェクト」 > 「エンベロープ」 > 「最前面のオブジェクトで作成」 オブジェクトの中にテキストが入る

ロゴマーク作成へ向けて (ロゴ台紙作成)

ロゴをカッコよく見せるための、台紙(名刺やロビーなど) に既に文字が入っていた時の消し方Photoshopのスタンプで消す手順 1、素材を選ぶ 2、Photoshopのスタンプを使用する 3、消したい場所の近くから色をとってスタンプする ポイント、上から下に消し…