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

webかたつむり

ウェブデザインを勉強中

font を加工する

illustratorアピアランス」でフォントを加工する。

 

最初は、エッジをギザギザにする。

「パス」「パスの変形」「ラフ」を使用する。

パラメータの値を変えて、2度ラフをかけると、より複雑な味わいになる。

フォントの種類によって効果が変わってくる。

f:id:ohta-felica:20170407224946p:plain

 

 次は線の太さ(相似形にはならない)を変えてみます。

今回は「パス」「パスのオフセット」を使用します。

f:id:ohta-felica:20170407231214p:plain

シアン(下)「パスのオフセット」「+0.1」「-0.25」

レッド(上)「パスのオフセット」「+0.5」「-0.5」「+0.1」「-0.25」

重ねてみると、、、

f:id:ohta-felica:20170407231512p:plain

 こんな感じです。最初に同じ値だけ「+」してから「ー」すると結果が微妙に変わります。特に水平方向。

「レッド」に「ラフ」を追加してみる。

f:id:ohta-felica:20170407231825p:plain

 

 ガリ版刷り風、、、邪道ですか???

 

元ネタです。参考になりました。

日本語フォントの角を丸くしてイメージを変えてみる | 鈴木メモ

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

 

 

ポラロイド写真をスキャンして、フレームだけを利用する。

このとき外側の透明部分が必要ないので削除したい。

 

f:id:ohta-felica:20170305103629j:plain

 

 

「ctrl」+「サムネール」でフレームだけを選択する。

 

f:id:ohta-felica:20170305103906j:plain

 

 

「イメージ」「切り抜き」

 

f:id:ohta-felica:20170305104004j:plain

 

これで切り抜けます。

 

f:id:ohta-felica:20170305103629j:plain

 

wacom for photoshop

photoshop用にwacomを設定する

wacomには説明書がないから不便、、、

youtubeにあるチュートリアルを参考にペン、面倒。

Five Photoshop Tips for Wacom Tablet Beginners - YouTube

 

 

ペンのupperbuttonに「一つ戻る」、lowerbuttonに「右クリック」を設定する。

 

f:id:ohta-felica:20170304072844p:plain

 

 

f:id:ohta-felica:20170304073333j:plain

 

 

複数のカスタマイズした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 = new google.maps.Map(document.getElementById("map_canvas_01"), myOptions_01);
var marker = new google.maps.Marker({
position: latlng_01,
map: map_01
});

var latlng_02 = new google.maps.LatLng(34.680533, 135.510132);
var myOptions_02 = {
zoom: 17,
center: latlng_02,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_02 = new google.maps.Map(document.getElementById("map_canvas_02"), myOptions_02);
var marker = new google.maps.Marker({
position: latlng_02,
map: map_02
});

var latlng_03 = new google.maps.LatLng(35.003861, 135.751226);
var myOptions_03 = {
zoom: 17,
center: latlng_03,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_03 = new google.maps.Map(document.getElementById("map_canvas_03"), myOptions_03);
var marker = new google.maps.Marker({
position: latlng_03,
map: map_03
});

var latlng_04 = new google.maps.LatLng(35.625393, 135.061006);
var myOptions_04 = {
zoom: 17,
center: latlng_04,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_04 = new google.maps.Map(document.getElementById("map_canvas_04"), myOptions_04);
var marker = new google.maps.Marker({
position: latlng_04,
map: map_04
});

var latlng_05 = new google.maps.LatLng(35.982359, 139.963494);
var myOptions_05 = {
zoom: 17,
center: latlng_05,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_05 = new google.maps.Map(document.getElementById("map_canvas_05"), myOptions_05);
var marker = new google.maps.Marker({
position: latlng_05,
map: map_05
});

var latlng_06 = new google.maps.LatLng(34.887385, 135.744679);
var myOptions_06 = {
zoom: 17,
center: latlng_06,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_06 = new google.maps.Map(document.getElementById("map_canvas_06"), myOptions_06);
var marker = new google.maps.Marker({
position: latlng_06,
map: map_06
});
}
initialize();

 html 地図をレイアウトする場所に記述する内容

<div id="map_canvas_01" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_02" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_03" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_04" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_05" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_06" class="googleMaps" style="width:700px;height:300px;"></div>

 

bodyの閉じタグの前に記述

<!-- googlemaps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="js/outline.js"></script>

 

wacomの設定

コントロールパネルでする。

f:id:ohta-felica:20170214233524p:plain

 

 

初期設定は以下の通り

f:id:ohta-felica:20170214233949p:plain

 

まず、ペンのボタンに割り当てる機能を変更する。

f:id:ohta-felica:20170214234530p:plain

 

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' +  dst ); →ここが2行目

hanoi (disc -1 , aux, src, dst); →ここが3行目

}

};

 

この処理のプロセスを追いかけてみる。

hanoi(3, 'SRC',' AUX',' DST');

 

まず1行目

hanoi(2, src, dst, aux);

    hanoi(1, src, aux, dst);

        hanoi(0, src, dst, aux);→disc = 0 だからここで終わり

        move disc 1 from src to dst

        hanoi(0, aux, src, dst);→disc = 0 だからここで終わり

    move disc 2 from src to aux

    hanoi(1, dst, src, aux);

        hanoi(0, dst, aux, src);→disc = 0 だからここで終わり

        move disc 1 from dst to aux

        hanoi(0, src, dst, aux);→disc = 0 だからここで終わり

そして2行目

move disc 3 from src to dst

最後に3行目

hanoi(2, aux, src, dst);

    hanoi(1, aux, dst, src);

        hanoi(0, aux, src, dst);→disc = 0 だからここで終わり

        move disc 1 from  aux to src

        hanoi(0, dst, aux, src);→disc = 0 だからここで終わり

    move disc 2 from aux to dst

    hanoi(1, src, aux, dst);

         hanoi(0, src, dst, aux);

        move disc 1 from src to dst

        hanoi(0, aux, src, dst);

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

 

pathはローカルの場合は「C:\xampp\htdocs\xampp\example/」。
サーバの場合は「/var/www/html/example/」といった感じになります。

関数解説出力
ABSPATH インストールされた場所のパス C:\xampp\htdocs\xampp\example/(ローカルの場合)
/var/www/html/example/(サーバの場合)
admin_url() 管理画面のパス http://www.example.com/wp-admin/
content_url() wp-contentディレクトリのパス http://www.example.com/wp-content
get_attachment_link( $id ) 添付ファイルのIDを渡すと添付ページの URI を返す http://www.example.com/?attachment_id=$id
get_author_posts_url( $author ) 投稿者別のアーカイブページへのリンク。投稿者名を入力する http://www.example.com/?author=0
get_bloginfo( $show ) デフォルトはnameでサイト名が返ってくる。変数による違いは以下の通り。 http://localhost/xampp/example
$show = ‘admin_email’ admin@example.com
$show = ‘atom_url’ http://www.example.com/home/feed/atom
$show = ‘charset’ UTF-8
$show = ‘comments_atom_url’ http://www.example.com/home/comments/feed/atom
$show = ‘comments_rss2_url’ http://www.example.com/home/comments/feed
$show = ‘description’ Just another WordPress blog
$show = ‘home’ http://www.example.com/home (DEPRECATED! use url option instead)
$show = ‘html_type’ text/html
$show = ‘language’ en-US
$show = ‘name’ Testpilot
$show = ‘pingback_url’ http://www.example.com/home/wp/xmlrpc.php
$show = ‘rdf_url’ http://www.example.com/home/feed/rdf
$show = ‘rss2_url’ http://www.example.com/home/feed
$show = ‘rss_url’ http://www.example.com/home/feed/rss
$show = ‘siteurl’ http://www.example.com/home (DEPRECATED! use url option instead)
$show = ‘stylesheet_directory’ http://www.example.com/home/wp/wp-content/themes/largo
$show = ‘stylesheet_url’ http://www.example.com/home/wp/wp-content/themes/largo/style.css
$show = ‘template_directory’ http://www.example.com/home/wp/wp-content/themes/largo
$show = ‘template_url’ http://www.example.com/home/wp/wp-content/themes/largo
$show = ‘text_direction’ ltr
$show = ‘url’ http://www.example.com/home
$show = ‘version’ 3.5
$show = ‘wpurl’ http://www.example.com/home/wp
get_category_link( $id ) カテゴリーアーカイブページヘのリンク http://www.example.com/?cat=0
get_day_link( $year, $month, $day ) 日別アーカイブページのリンク。デフォルトは現在の日。 http://www.example.com/?m=20150313
get_edit_user_link( $user_id ) ユーザー情報編集画面用のパス http://www.example.com/wp-admin/profile.php
get_feed_link() FeedのURLを取得 http://www.example.com/?feed=rss2
get_month_link( $year, $month ) 年別アーカイブページのリンク。デフォルトは現在の年度。 http://www.example.com/?m=201503
get_page_link( $id ) 固定ページのパーマリンクを取得 http://www.example.com/?page_id=$id
get_permalink( $id ) $idを入力するとURLのスラッグを返す。パーマリンク設定によって異なる http://www.example.com/?p=$id
get_post_type_archive_link( $posttype ) カスタム投稿タイプのアーカイブページを返す。get_post_type_archive_link( get_post_type() )など http://www.example.com/$posttype
get_stylesheet() 現在適用されているテーマ(スタイルシート)のディレクト twentyten-child
get_stylesheet_directory() 現在適用されているテーマ(スタイルシート)のディレクト /var/www/html/example/wp-content/themes/twentyten-child
get_stylesheet_directory_uri() 現在適用されているテーマをURI表記で返す http://www.example.com/wp-content/themes/twentyten-child
get_stylesheet_uri() 現在適用されているテーマ(スタイルシート)のパス /var/www/html/example/wp-content/themes/twentyten-child/style.css
get_tag_link( $id ) タグアーカイブページヘのリンク。IDで指定してスラッグで返ってくる。 http://www.example.com/?tag=wordpress
get_template_directory() 親テーマのディレクト /var/www/html/example/wp-content/themes/twentyten
get_template_directory_uri() 親テーマのURI http://www.example.com/wp-content/themes/twentyten
get_term_link( $id ) カスタム分類アーカイブページヘのリンク。タクソノミーが無いとWP_Error Objectを返す http://www.example.com/custom-taxonomy
get_theme_root() テーマのディレクト /var/www/html/example/wp-content/themes
get_theme_root_uri() 親テーマのディレクト http://www.example.com/wp-content/themes
get_year_link( $year ) 年別アーカイブページのリンク。デフォルトは現在の年度。 http://www.example.com/?m=2015
home_url( $path, $scheme ) $pathにはホームURLからの相対パス。$schemeはhttpかhttpsもしくはrelative(相対パス http://www.example.com/$path
includes_url() wp-includesのディレクトリを返す http://www.example.com/wp-includes/
plugin_dir_path( __FILE__ ) 現在のファイルのディレクトリを返す。pluginファイルに書けばプラグインのパスを返すが、必ずしもpluginのディレクトリを返すとは限らない /var/www/html/example/wp-content\themes\twentyten-child/
plugins_url() プラグインディレクトのパス http://www.example.com/wp-content/plugins
site_url() サイトのアドレスを表示。スラッシュは付かない http://localhost/xampp/example
the_permalink() 現在のページのパス http://www.example.com/
WP_CONTENT_DIR wp-contentディレクトリのパス /var/www/html/example/wp-content
wp_get_shortlink( $id ) 短縮URL、ショートリンクを表示する。パーマリンク設定で長いスラッグにしている場合に外部プログラムへ短いURLを渡したい場合などに使う http://www.example.com/?p=$id
WP_LANG_DIR languagesディレクトリのパス /var/www/html/example/wp-content/languages
wp_login_url() ログイン画面のパス http://www.example.com/wp-login.php
wp_logout_url() ログアウト用のパス http://www.example.com/wp-login.php?action=logout&_wpnonce=0000000000
wp_lostpassword_url() ログアウト用のパス http://www.example.com/wp-login.php?action=lostpassword
WP_PLUGIN_DIR プラグインディレクトのパス /var/www/html/example/wp-content/plugins
wp_registration_url() ユーザー登録用のパス http://www.example.com/wp-login.php?action=register
wp_upload_dir($time) アップロードディレクトリ URL。配列で返ってくる。$timeはデフォルトはnull。$time = ‘path‘ /var/www/html/example/wp-content/uploads
$time = ‘url‘ http://www.example.com/wp-content/uploads
$time = ‘subdir‘  
$time = ‘basedir‘ /var/www/html/example/wp-content/uploads
$time = ‘baseurl‘ http://www.example.com/wp-content/uploads
$time = ‘error‘ bool(false)

 

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

画像やリンクのパスをどのように指定するのがよいのか?

1月15日に考えたこと、、、

functions.phpに関数を追加する

  • 以下のコードをfunctions.phpに追加する。
  • 絶対パスの、「ホスト名」部分を省略して記述する段取り。

function delete_host_from_attachment_url($url) {  $regex = '/^http(s)?:\/\/[^\/\s]+(.*)$/';  if (preg_match($regex, $url, $m)) {    $url = $m[2];  }  return $url;}add_filter('wp_get_attachment_url', 'delete_host_from_attachment_url');add_filter('attachment_link', 'delete_host_from_attachment_url');

1月22日にあらためて考えたこと

  • phpを使って、絶対パスを読み込む方法。
  • <img src="<?php echo content_url(); ?>/themes/asteria-lite/images/######.jpg" alt=""  class="alignnone size-full wp-image-921" />のような指定方法。
  • あるいは、「theme」「asteria-lite」「images」に画像ファイルを置いて、相対パスで指定するか。
  • phpを使って絶対パスでリンクを指定する方法だと、backgroundをurlで指定するときにうまくいかない。
  • backgroundを使うこともあるだろうから、とりあえずは「images」フォルダーに画像ファイルを入れておこうと思う。

 

固定ページのテンプレートを作る

  1. 「page-」+「ページ内容が分かる名前」+「.php」つまり、page-#####.php、というファイルを作る。
  2. このファイルを、「wordpress」「wp-content」「themes」「asteria-lite」の直下に置く。
  3. 必要なページ分あらかじめ作っておく。

固定ページ用テンプレートのソースコード

  1. 冒頭は、wordpressに固定ページのテンプレートであることを宣言する記述が必要になる。(1-5行目)
  2. このテーマ(asteria-lite)のphpファイルには必ず「<?php global $asteria;?>」と記述されているので、それに準じる。
  3. ヘッダーを読み込む。

<?php
/*
Template Name: ##### page
*/
?>

<?php global $asteria;?>
<?php get_header(); ?>

 

 ダッシュボードで入力できる部分を作る

  1. この場合以下のソースコードを、入力した内容が表示されたい個所に記述する。
  2. このソースは、asteria-liteにあらかじめ用意されている「page-fullwidth」テンプレートからコピーしてきた。

制約事項

  • ダッシュボードから追加できる箇所は、1ページにつき一か所となる。
  • クラス名の命名規則は共同で開発する場合には規定しておいた方がいい。

wordpress theme "asteria lite"

wordpress ページの種類と、ファイル名の関係

f:id:ohta-felica:20170114215853p:plain

 asteriaテーマフォルダの中身 

f:id:ohta-felica:20170114214246p:plain

  •  黄色い部分が固定ページのテンプレートファイル。
  • page.phpソースコードは以下。

<?php global $asteria;?>
<?php get_header(); ?>

<!--Content-->
<div class="fixed_site">
<div class="fixed_wrap singlefx">
<?php if*1{ ?>
<div class="page_tt">
<div class="center"><h1 class="postitle"><?php the_title(); ?></h1></div>
</div>
<?php } ?>

<div id="content">
<div class="center">
<div class="single_wrap<?php if ( !is_active_sidebar( 'sidebar' ) ) { ?> no_sidebar<?php } ?>">
<div class="single_post">
<?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<?php if ( is_user_logged_in() || is_admin() ) { ?><div class="edit_wrap"><a href="<?php echo get_edit_post_link( ); ?>"><i title="<?php _e('Edit This','asteria'); ?>" class="fa-edit"></i></a></div><?php } ?>

<div class="single_post_content">
<?php if*2 { ?>
<div class="comments_template">
<?php comments_template('',true); ?>
</div>
<?php }?>
<!--COMMENT END-->
<?php endif ?>

</div>

<!--PAGE END-->


<!--SIDEBAR START-->
<?php if ( is_active_sidebar( 'sidebar' ) ) { ?><?php get_sidebar();?><?php } ?>
<!--SIDEBAR END-->
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

<?php
/*
Template Name: Full Width Page
*/
?>
<?php global $asteria;?>
<?php get_header(); ?>

<!--Content-->
<div class="fixed_site">
<div class="fixed_wrap singlefx">
<?php if*3: ?><?php while(have_posts()): ?><?php the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<?php if ( is_user_logged_in() || is_admin() ) { ?><div class="edit_wrap"><a href="<?php echo get_edit_post_link( ); ?>"><i title="<?php _e('Edit This','asteria'); ?>" class="fa-edit"></i></a></div><?php } ?>

<div class="single_post_content">
<?php if*4 { ?>
<div class="comments_template">
<?php comments_template('',true); ?>
</div>
<?php }?>
<!--COMMENT END-->
<?php endif ?>

</div>

<!--PAGE END-->
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

 

  •  style.cssの共通部分

body{ background:#f7f7f7; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#999;}
.center{ margin:0 auto; width:85%;}
a{ text-decoration:none;}
p, .widget_wrap{line-height: 26px;}

/*Full width pages*/
body .no_sidebar{ width:100%;}

 

 

*1:$asteria['page_type_id']) == '1' || !get_option( 'asteria'

*2:$asteria['page_type_id']) == '2'){ ?><h1 class="postitle"><?php the_title(); ?></h1><?php } ?>

<div class="thn_post_wrap"><?php the_content(); ?> </div>
<div style="clear:both"></div>
<div class="thn_post_wrap"><?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?></div>
</div>
</div>
<?php endwhile ?>
</div>
<!--COMMENT START: Calling the Comment Section. If you want to hide comments from your posts, remove the line below-->
<?php if (!empty ($asteria['post_comments_id']) || !get_option( 'asteria'

*3:$asteria['page_type_id']) == '1'){ ?>
<div class="page_tt">
<div class="center"><h1 class="postitle"><?php the_title(); ?></h1></div>
</div>
<?php } ?>

<div id="content">
<div class="center">
<div class="single_wrap no_sidebar">
<div class="single_post">
<?php if(have_posts(

*4:$asteria['page_type_id']) == '2'){ ?><h1 class="postitle"><?php the_title(); ?></h1><?php } ?>
<div class="thn_post_wrap"><?php the_content(); ?> </div>
<div style="clear:both"></div>
<div class="thn_post_wrap"><?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?></div>


</div>



</div>
<?php endwhile ?>
</div>
<!--COMMENT START: Calling the Comment Section. If you want to hide comments from your posts, remove the line below-->
<?php if (!empty ($asteria['post_comments_id']

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

f:id:ohta-felica:20170114210509p:plain

 

  •  固定ページを新規で追加する。

f:id:ohta-felica:20170114210606p:plain

  •  このときにプルダウンメニューで表示されるようなテンプレートの作り方。

f:id:ohta-felica:20170114210653p:plain

ファイルの格納場所と、ファイル名について。

  • 例えばaccessのページであれば、page-access.php
  • profileのページであれば、page-profile.php
  • このように、「page-#####.php」とする。
  • ファイル名の接頭辞に「page-」をつければよい。
  • こうして作ったファイルを、「wordpress」「wp-content」「theme」「テーマ名のフォルダ」の直下に置く。

f:id:ohta-felica:20170114211129p:plain

  •  ファイルの冒頭は「テンプレート」である宣言をしなくてはいけない。
  • 以下のように記述する。
  • <?php
    /*
    Template Name: #####
    */
    ?>
  • 現在制作に使っている「asteria」というテーマは、どのページも「<?php global $asteria;?>」から始まっているので、以下のようになる。

<?php
/*
Template Name: #####
*/
?>

<?php global $asteria;?>
<?php get_header(); ?>

  •  これに引き続いてページのコードを書いていく。
  • そして、ソースの最後は、<?php get_footer(); ?>

 こうしておけば。固定ページのテンプレートメニューに表示される。