zono note

zono note

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

webデザイン

Photoshopでwebデザイン

 

デザイン    幅1200PX 高さ1500PX

 

コンテンツ      幅980PX

 

レイヤ分け   ・header

                             ・navi

                             ・content  グループ

        ・footer

           ・main-img

文字間を詰める  alt  + 左右キー

クリッピングマスク

f:id:zonozonox:20201128204504p:plain

オブジェクトの上に配置したい写真を上に持ってくる

オブジェクトと写真の間(赤枠内)でalt+クリック

その後、ctrl+Tでオブジェクト指定後、写真のサイズを調整する。

 

 

               

 

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

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

 自社の見込み客に対して価値のあるコンテンツを定期的に提供することで

 ユーザーをファン化させ、商品を買ってもらう一連の手法 

 

● コンテンツマーケティングが注目される理由

 これまで、マスメディアなど、企業側から一方的に情報を伝えることが主だ

 ったが、ユーザーが能動的に情報を取得し、さらに発信までできるように

 なったのが要因

SEO対策①

[1] サイトの「タイトル」は、検索ページのタイトルとして重要な部分な為、良く考えて付ける。

  サイトの「タイトル」が検索結果に反映されい原因として、サイトの内容とタイトルが似つかわしくなく、GOOGLE側で判断されてタイトルが変えられてしまう。

 

[2]   各ページ毎にタイトルを付け、タグにキーワードを仕込み

 

[3]  サーチコンソールにサイトマップを登録して、クローラーの巡回がスムーズにいくようにする。

 

[4]  パンくずリストを付ける

 

[5]  外部のサイトからの被リンクを増やす

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

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

 

上記の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> <a style="color: #AACADE; " href="#" >PUSH</a></div></div>

<div style=" width: 200px; margin:  10px 10px; background: #8b0000; font-weight:  bold; padding: 8px 16px 8px 16px"> <div class="wrapper"><!-- 文字--><div class="item">テーブル・デスク</div> <a style="color: #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color: #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color: #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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">キャラクター・動物・ぬいぐるみ・TOY</div> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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">工業系・メタル・オイル缶・ツールBOX・工具</div> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>

<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">ウッドBOX・木箱・トランク</div> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>
<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div>
<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> <a style="color:  #AACADE; " href="#" >PUSH</a></div></div></div>

</code>