webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

font を加工する

illustrator 「アピアランス」でフォントを加工する。 最初は、エッジをギザギザにする。 「パス」「パスの変形」「ラフ」を使用する。 パラメータの値を変えて、2度ラフをかけると、より複雑な味わいになる。 フォントの種類によって効果が変わってくる。 …

photoshop 不要な透明部分を削除する方法

ポラロイド写真をスキャンして、フレームだけを利用する。 このとき外側の透明部分が必要ないので削除したい。 「ctrl」+「サムネール」でフレームだけを選択する。 「イメージ」「切り抜き」 これで切り抜けます。

wacom for photoshop

photoshop用にwacomを設定する wacomには説明書がないから不便、、、 youtubeにあるチュートリアルを参考にペン、面倒。 Five Photoshop Tips for Wacom Tablet Beginners - YouTube ペンのupperbuttonに「一つ戻る」、lowerbuttonに「右クリック」を設定す…

複数のカスタマイズしたgooglemapsを配置する(ここでは6つ)

js/outline.jsの内容 // JavaScript Document function initialize() { var latlng_01 = new google.maps.LatLng(35.700122, 139.776031); var myOptions_01 = { zoom: 17, center: latlng_01, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map_01 = ne…

wacomの設定

コントロールパネルでする。 初期設定は以下の通り まず、ペンのボタンに割り当てる機能を変更する。

javascript 再帰関数 / ハノイの塔

ハノイの塔 scr=source aux= auciliary 補助 dst=destination ここから本題、、、 var hanoi = function (disc, src, aux, dst){ if (disck>0){ hanoi(disc -1 , src, dst, aux); →ここが1行目 document.write ('move disc' + disc + 'from' + src + 'to' + …

WordPressでpathやURLを取得するためのタグと出力例まとめ( すぐにリンクするためのメモ)

pathはローカルの場合は「C:\xampp\htdocs\xampp\example/」。サーバの場合は「/var/www/html/example/」といった感じになります。 関数解説出力 ABSPATH インストールされた場所のパス C:\xampp\htdocs\xampp\example/(ローカルの場合)/var/www/html/exam…

wordpress theme "asteria lite" を使ったカスタマイズ作業の段取り

画像やリンクのパスをどのように指定するのがよいのか? 1月15日に考えたこと、、、 functions.phpに関数を追加する 以下のコードをfunctions.phpに追加する。 絶対パスの、「ホスト名」部分を省略して記述する段取り。 function delete_host_from_attachmen…

wordpress theme "asteria lite"

wordpress ページの種類と、ファイル名の関係 asteriaテーマフォルダの中身 黄色い部分が固定ページのテンプレートファイル。 page.phpのソースコードは以下。 <div class="fixed_site"> <div class="fixed_wrap singlefx"> <div class="page_tt"> <div class="center"><h1 class="postitle"></h1></div></div></div></div>

wordpress 固定ページ用テンプレートを作る方法。

固定ページを新規で追加する。 このときにプルダウンメニューで表示されるようなテンプレートの作り方。 ファイルの格納場所と、ファイル名について。 例えばaccessのページであれば、page-access.php profileのページであれば、page-profile.php このように…

wordpress absolute URLs

既存のwordpressサイトの見栄えを含めた改修作業をすることになって、授業でwordpressを教わった時から、トラブルの原因と思われた、絶対パス参照の問題に再びぶちあたった。 そもそも、wordpressの開発者が意図してそのような設計にしているのだから、その…

illsutrator 文字パネル初期設定

javascript object

オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。 nameはalphabet, number, underscoreを使用する。 使用していない場合、および予約語を使用する場合は、doublequotation …

DOM, node について

DOM document object model documentのツリー構造そのものなのか? node DOMツリーにぶら下がっているオーナメント。 それぞれのHTML要素。 nodeとは瘤のこと。

jQuery append prepend

before リファレンスするのは「.vacation」。 このクラスの要素に対して前に配置する、これがbefore。 「.vacation」との繋がりはない。(関係性がない) after beforeの反対。これも関係性はない。 prepend 「first child」として追加する。 「.vacation」…

jQuery selector まとめ

基本形 $(" "); これさえ知っていればあとはCSSと同じ。 $("li"); $("p"); $(#id); $(".class"); $("#id li"); $(".class li"); pseudo selector pseudo 擬似 :first :last :odd :even liのindexは、先頭が「0」(配列と同じ) ゆえにeven(偶数)、は先頭…

アコーディオンメニュー js

function showHide() { var para1 = document.getElementById('news1Paragraph'); var para2 = document.getElementById('news2Paragraph'); para1.style.display = 'block'; para2.style.display = 'none'; var title1 = document.getElementById('news1Tit…

Date(); の復習 / 日付の表示

<body> <h1 id="now" style="color: red; textalign: center; margin: 0 auto; width: 600px;"></h1> <script> function now(){ now = new Date(); year = now.getFullYear()+'年'; month = (now.getMonth()+1)+'月'; date = now.getDate()+'日'; hours = now.getHours()+'時'; minutes = now.getMinutes()+'分'; seconds = now.…</body>

scriptの記述場所

htmlのタグは基本的に上から順番に読み込まれる。 scriptタグがheadタグ内にあり、先に処理されている時点でまだIDを持つタグが読み込まれていないと、getElementById('id');は実行されないでエラーになる。 うまくいかない <html lang="ja"> <head> <meta charset="UTF-8"> <title>display Date</title> <script> var now = new</meta></head></html>…

PDFのファイルサイズを縮小する 02

引き続き、PDFのファイルサイズを縮小するための考察。 「最適化パネル」の「オブジェクトを破棄」が気になった。 そこでテスト。 ケースによるだろうが、元のファイルがどのくらいサイズダウンできるのだろう? ちなみに最適化に際して、「標準」を選択した…

PDFのファイルサイズを縮小する 01

Acrobatヘルプ | PDF のファイルサイズを小さくする方法 (Acrobat DC) このところPDFのファイルサイズについて、いろいろ考えていたが、このADOBEの文書が参考になると思ったので転載。(必要な時にすぐ検索用) PDF文書の構成要素を調査する 「表示」「表…

PDFを画像変換、リサイズしてから再びPDFに変換、、、

渡されたPDFファイル、ページ毎のサイズが違う。 ミッションは、閲覧用にページのサイズを揃えなくてはいけないこと、そしてPDFのファイルサイズを小さくすること。 どのようなワークフローがいいのか、、、 分からないときは実験する。 実験 オリジナルのPD…

クリックすると画像が置換する

クリックすると画像が置換する 3枚の画像をクリックするたびに置換する。 ループにする。 <script> var images = new Array(); images[0]= 'images/d1.jpg'; images[1]= 'images/d2.jpg'; images[2]= 'images/d3.jpg'; var i = 0; function changeImg(){ if(i==2){ i…

更新用タイマー なんとなくよさそうです、、、保証なし

<script> /*URLの配列*/ var url = new Array; url[0] = 'index.html'; url[1] = 'index_new.html'; //変更後のURLを入力する。 /*日付の配列*/ var date = new Array; date[0] = new Date(1970, 00, 01, 00, 00, 0000); date[1] = new Date(2017, 00, 05, 22, 30, 0…

javascript location object

window.location window.location.href window.location.pathname

window.prompt(); window.confirm();の戻り値

window.prompt(); <script> var thisYear = window.prompt('今年は西暦何年?'); console.log(typeof thisYear); </script> テキストボックスに入力しても、しなくても(空文字列でも)戻されるのは。string。入力しない場合はからの文字列。 cancelをクリックすると、戻され…

jsの練習

おみくじ <script> var num; num= Math.floor(Math.random()*100+1); console.log(num); if(num == 77 || num==100){ document.write('大吉'); }else if(num%10==3 || num%10==5 || num%10==7){ document.write('中吉'); }else if(num%10 == 4){ document.write('凶'</script>…

java script練習帳

javascriptは大文字と小文字を区別する。 これを間違えるといっさい動きません。 変数の定義もすべてcamelCaseで記述してみようと思う。 innerHTML = すべて大文字 document内部の各要素には必ず「innerHTML」propertyが存在する。 「Html」と記述して、迷路…

class instance

クラスとオブジェクトとインスタンスの関係 - Qiita からの転記。 クラスとインスタンス クラスは設計図で、インスタンスはその設計図を実体化したもの(実体化することをインスタンス化という)。 例えば、人間という言葉を想像した時に、思い浮かべるものは…

Date object

注意すること getFullYear(); 西暦表示はgetYearではない。 getMonth(); 1月は「0」。配列の一番目。 getDay(); は変換しないといけない。配列の一番目は日曜日。 Date object getYearメソッドは、1900年に対して加減算する。 今年は117つまり1900+…

sp movie

スマートフォンで動画の反省点。同じ轍を踏まないための備忘録 spブラウザーでの使用で、html5 videoタグを使用すると、autoplayにならない。自動再生するためには他の方法を用意しておかなくてはいけない。写真のフェードイン、フェードアウトであれば、代…

発音記号を表示する

下の黄色い部分の発音記号を、htmlで表示するにはどうすればよいのか? そんな時の備忘録 まず基本的な表記の方法について調べる、、 英語を学ぼう - 英文テキスト・発音記号変換 - 変換のルール そして、HTMLでの表記を探します。 発音記号を表示する - 戦…

illustrator 落書きオプション(後日追求しよう、、、)

photoshop 描画色と背景色

photoshopで新規ファイルを作る。 いったい、この「白」はなんなのか?という疑問、、、 長方形ツールを使って、長方形を作る。 描画色は「グレー」背景色は「赤」。 長方形を移動しても、長方形が移動するだけ。なんのこっちゃ?? レイヤー構造はこんな感…

antique taste fontantique

アンティーク風、地図を作るときに使ったフォント。 memorandom!

handwritten stroke illustrator

少しだけ直線をラフにする方法。 「線」を「線」のままではなく、「拡張」して「形」する。 weightを持ったstrokeではなく、「fill」と「stroke」に拡張します。 「オブジェクト」「分割、拡張」 「効果」「パスの変形」「ラフ」 「パラメータ」の意味はよく…

もうちょっと、organic なDrop Shadowがほしいと思った、、、

ドロップシャドーをつけたいレイヤーを選択。 「alt」+「ドラッグ」でレイヤーを複製する。 複製したレイヤーを「選択範囲」にする。その方法は以下の通り、、、 photoshop レイヤーを選択して、クリックするとバウンティングボックスが現れる。 このとき「…

illustrator で作成した、、、

illustrator で作成したレイヤー構造を そのまま photoshop に移植する 「レイヤーパレット」「サブレイヤーに分配(シーケンス)」 いったいどんな英語の邦訳なのか?センスを疑う分かりにくさ、、、 それから「ファイル」「書き出し」書き出し形式を「psd…

photoshop pattern

photoshop の patternを使う、、、 まず web上のリソースを使ってハーフトーンのパターンを登録します。 「.pat」がパターンのファイル。これを選択する。そして「読み込み」。 」 (追記)上の画面で、ファイルをダブルクリックするとプリセットに読み込ま…

confetti vol.2

イラストレーターで紙吹雪のベースを作る。 モノクロで各パーツをグレーの濃淡で塗っておく、ことがポイントらしい、、 手順はvol.1と同じ。 しばらく楽しんだら飽きてしまいそうだね、、、

confetti vol.1

photoshopを開く。 新規レイヤーを作ってその上に「丸」をレイアウトしていく。 2inch*2inch 350dpi RGB or CMYK(出力の用途に応じて) brush tool (hard edge 100%) ブラシツールの直径は「open brackets」で縮小、「close brackets」で拡大できる。 スタ…

brush tool

ブラシを使って描いた線。 「線」なし「塗り」ありにすると、、、 ブラシツールのパターンがなくなってしまう。 元に戻します。 「散布ブラシ」で色を変えるとき、彩色を「なし」にしていると、カラーパレットで色を変えられない。 「彩色」を「淡彩と低明度…

confetti brush illustrator

confetti brush ちいさな丸を描く。小さくかく。大きくすることは簡単だけれども小さくするのは大変。想定サイズの最小で描く。 描画した円を選択した状態で「新規ブラシ」 「新規ブラシ」「散布ブラシ(scatter brush)」 パネルのオプションを変更しないと…

illustrator pentool

pentool4变化 アンカーポイントツール 書き始め、始点の表示。アンカーポイントを打つ前の状態。 「アンカーポイント」→「線」の始点となる「点」 アンカーポイントツールになっている時の表示「v」型 アンカーポイントツールはアンカーポイントに対する操…

dot

「線端」を丸にする。線分を「0」にすれば丸が描ける。 線分に値を入れると下の図のような形状になる 「間隔」ー「線幅」=丸と丸の間の距離

novecento sans wide

typography.synthview.com

hatched shadow

線の準備 shift キーを押したまま、45度傾いた直線を描いた色を指定する。 文字の反対側にも同じく線を引く。線のバウンティンぐボックスが文字にかからないようにする。 2本の線を選択した状態で「ブレンド」「作成」 線と線の間に、指定された数だけ線を…

illustrator brush

パス上にパッターンを作る。 「ウィンドウ」「ブラシ」 パターンにしたい図形を選択して「新規ブラシ」 「パターンブラシ」 コーナーの処理方法を設定できる模様ですが、とりあえずデフォルトの設定で、、 線を引いて、適用したいパターンを選択すると、、 …

fontello

フォントにしたい形を作って、「複合パス」にしてからベタ塗りにする。 「svg」で保存。 オプションは気にしないで進めて大丈夫 Fontello - icon fonts generator 「custom icons」にドラッグする。 「star」は「s」で変換、「free wifi」は「w」で変換でき…

illustrator pattern

ctrl + c ,ctrl + f で同じ位置に重なるようにコピーができる。 下のレイヤーを黒、上のレイヤーを白、白い方は縮小して若干回転させる。 線はなし、塗りだけ。 ctrl + g グループ化する。 拡大or 縮小 ctrl + d