WEB DESIGN BOX

フリーランス・リモートワークの仕事情報

テイクアウトサイトのUI/UXデザイン

【 概要 】
当方、テイクアウトサービスのまとめサイトを新規設立します。
今回、ウェブ(PC・SP)デザイン制作をお願いします。

【 依頼内容 】
・依頼工程:デザインのみ/動的なサイト制作も可能な方がいらっしゃいましたらお伝えください。
・作業ボリューム:10ページ程度

【 提供素材 】
・ワイヤー、ラフ案:あり
・画像、文章等:画像はshutterstockを自由に使用していただけます。文章は参考がございます。

【 デザインイメージ 】
・イメージ:食べログtakeoutのウェブ版のようなイメージ
・参考サイト: https://tabelog.com/takeout_feature

 

固定報酬制
100,000円 〜 300,000円
掲載日
2020年09月16日
応募期限
2020年09月22日

この仕事の詳細を見る

webデザインスクールのオンライン講師のお手伝い

【 お仕事の概要 】

このたび、弊社でwebデザインスクールを立ち上げることになりました。
そこで、オンライン講師を募集したいと考えております。

必要なスキルはWEBデザインのスキルのみです。(特にPhotoshop)
立ち上げにあたって、運営に携わってくれる方・お手伝いしてくれる方も募集しております。

【 依頼内容 】

・スクール参加者のサポート業務・・・チャット1回300円/zoom1回2000円

サポート業務
生徒の質問にチャットやzoomで答えていただきます。

作業量に対して報酬が見合うよう、生徒数が増えるにつれて報酬も上げていく予定です。
作業内容は基本的にマニュアルがありますのでご安心ください。


【 歓迎するスキル 】

・デザイン力
・フリーランスとしての営業力
・web制作スキル

 

固定報酬制
100,000円 〜 300,000円
掲載日
2020年09月16日
応募期限
2020年09月19日

この仕事の詳細を見る

はてなブログでgoogle adsenseのモバイルアンカー広告を設定する方法

f:id:m152:20180901080646p:plain

 

こういうやつ。

 

google adsense側の設定

「広告の設定」- 「自動広告」

(鉛筆マークで設定変更 自動で出したい広告のみチェックを入れる)

保存、キャンセルで前のページに戻り、

「自動広告を設定」でコードをコピー

 

はてなブログ側の設定

「設定」- 「詳細設定」

「headに要素を追加」でコピーしたコードをペースト

 

数分したら反映されます。

 

CSSでborder色を途中で切り替る

サンプル

f:id:m152:20170916101521p:plain

sass

h2

  padding-bottom: 8px
  position: relative
  border-bottom: 1px solid #dcdcdc
  &:after
  content: "."
  line-height: 0
  display: block
  overflow: hidden
  position: absolute
  bottom: -1px
  width: 10%
  border-bottom: 1px solid #db5767

 

css

h2 { margin-right: 20px; text-align: left; padding-bottom: 8px; position: relative; border-bottom: 1px solid dcdcdc; }

h2:after { content: "."; line-height: 0; display: block; overflow: hidden; position: absolute; bottom: -1px; width: 10%; border-bottom: 1px solid #db5767; }

pug 書き方

[pug]
p TOP
br
a(href="") テキストあああ

 

[html]
<p>TOP</p><br><a href="">テキストあああ</a>



[pug]
div.test
|ああああああ
br
|ああああ

 

[html]
<div class="test">ああああああ<br>ああああ</div>



[pug]
- var list = ['link', 'image', 'text']

for item, index in list
p #{item + index}

 

[html]
<div class="test">ああああああ<br>ああああ</div>
<p>link0</p>
<p>image1</p>
<p>text2</p>


[pug]
ul
- var n = 1;

while n < 11
li #{n}
- n++

 

[html]
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>


[pug]
ul
li: a(href="#") Top
li: a(href="#") About
li: a(href="#") Works
li: a(href="#") Contact
li: a(href="#"): span Links

[html]
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#"><span>Links</span></a></li>
</ul>


[pug]
header.header
h2.aas pugテスト

 

[html]
<header class="header">
<h2 class="aas">pugテスト</h2>
</header>


[pug]
main.main
h3.aase ああああ
div.red copyright

 

[html]
<main class="main">
<h3 class="aase">ああああ</h3>
<div class="red">copyright</div>
</main>


[pug]
- var title ="テキスト"
h1 #{title}

 

[html]
<h1>テキスト</h1>

 

Windowsでnpmモジュールを削除する方法

ローカルにインストールしたフォルダを削除しようとしても、node_moduleディレクトリ配下のファイルパス名が長すぎて削除できない場合の対処法。

 

プロジェクトフォルダを丸ごと削除して長すぎてうんたらかんたらとエラーが出たら、スキップし、残ったプラグインのみ

 

npm uninstall パッケージ名

 で削除する。