2015-09-10

パスファインダーで文字を型抜きする

illustrator

illustratorのパスファインダーで文字を型抜きする方法。

1.文字選択

2.書式→アウトラインを作成

3.レイヤー２つとも選択

4.パスファインダー→ALT+前面オブジェクトで型抜き

2015-09-10

乗算とスクリーンの違い

Photoshop

乗算とスクリーンの違いが覚えられないのでメモ用にまとめました。

乗算・・・白が透明になる。

スクリーン・・・黒が透明になる。

2015-05-20

list-style-imageを使ってリストのマークを画像に変更

CSS

list-style-imageを使ってリストのマークを画像に変更する方法を紹介します。

html

<ul>
    <li><a href="#">日常</a></li>
    <li><a href="#">買い物</a></li>
    <li><a href="#">ダイエット</a></li>
    <li><a href="#">コスメ</a></li>
</ul>

css

ul {
  list-style-image: url(./images/arrow.png);
}

li a {
  text-decoration: none;
  color: #000000;
  line-height: 2em;
}

※ list-style-imageを使わないでリストマークを画像に変更する方法はコチラ

2015-05-20

list-style-imageを使わずに、リストのマークを画像に変更

CSS

list-style-imageを使わずに、リストのマークを画像に変更する方法を紹介します。

liにbackground-imageを使って画像を出力している。
liごとに別のclass名をつければ、それぞれ別の画像を表示することが可能。

html

  <ul>
    <li class="orange"><a href="#">日常</a></li>
    <li class="blue"><a href="#">買い物</a></li>
    <li class="orange"><a href="#">ダイエット</a></li>
    <li class="blue"><a href="#">コスメ</a></li>
  </ul>

css

li.orange {
  background-image: url(./images/orangeArrow.png);
}
li.blue {
  background-image: url(./images/blueArrow.png);
}
li {
  list-style: none;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 1.5em;
}
li a {
  text-decoration: none;
  color: #000000;
  line-height: 2em;
}
}

cssのbackground-imageで画像を表示させる。
background-position: left center;で左寄せの中央揃えにする。
padding-leftで左側に余白を作り、そこに画像が入るようにする。

※list-style-imageを使う方法はコチラ

2015-05-20

初心者がはまりやすいポイント

WordPress

index.phpとhome.phpの違い

index.php

トップページ、カテゴリー一覧ページ、タグの一覧ページなど、該当するPHPテンプレートがなければ、このindex.phpに内容が表示される。

home.php

サイトのトップページのテンプレート。
home.phpはindex.phpより優先される。トップページのデザインやレイアウトを変えたい時に使う

※home.phpをトップページにし、カテゴリー一覧、タグの一覧などをindex.phpでレイアウトを管理すると便利だった。(何も設定しなくても、category.php、tag.phpがなければindex.phpが適用される。)

ページの種類

投稿 → ブログ向きの機能
固定ページ → 固定的なページ向きの機能(サイトについて、お問い合わせ、プロフィール...)

ファイルの命名ルール

投稿

トップページ
home.php (index.php)

カテゴリーページ
category.php

タグ
tag.php

個別ページ
single.php

固定ページ

サイトについて、お問い合わせ、プロフィールなど
page.php

固定ページごとにレイアウトを変えたい場合

各固定ページの管理画面から、テンプレートを変更することができる。
例えば、お問い合わせのページのみ、page.phpではなくcontact.phpを適用することができる。
contact.phpをカスタムテンプレートと利用するためには、下記のように一番最初にテンプレート名を指定する。

<?php
/*
Template Name: コンタクトページ用のテンプレート
*/
?>

2015-05-20

基本のテンプレートタグ

WordPress

WordPressでよく使うテンプレートタグ

WordPressの管理画面の設定や固定ページ、投稿した記事の内容は、テンプレートタグを使ってページに出力する。

管理画面で入力した内容をテンプレートタグで出力

ブログ名を出力する
<?php bloginfo('name'); ?>

ブログの説明を出力
<?php bloginfo('description'); ?>

トップページのURLを出力
<?php echo home_url(); ?>

style.cssのURLを出力

スタイルシートのURLを出力
<?php bloginfo('stylesheet_url'); ?>

//例
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>">

テーマフォルダのURLを出力

テーマフォルダにアップした画像などを指定するときに使用する。
複数のスタイルシートを読み込ませたいときは、テーマフォルダのルートからたどる。

<?php bloginfo('template_url'); ?>

//例 スタイルシートの読み込み
<link href="<?php bloginfo('template_url'); ?>/css/style.css" rel="stylesheet">

記事のタイトルと本文を表示する

「ループ」と呼ばれるテンプレートタグは、ループの中に記述した処理を繰り返し実行する。
ループは記事と記事に関するデータを取得し、記事ごとにループ内に記述した処理を実行する

<?php if(have_posts()): while(have_posts()): the_posts(); ?>

ここにループしたいテンプレートタグを記述

<?php endwhile; endif; ?>

ループの中に以下のタグをいれると、繰り返しの処理が実行される。

記事のタイトルを出力
<?php the_title(); ?>

記事の本文を出力
<?php the_content(); ?>

記事の個別ページのURLを出力
<?php the_permalink(); ?>

//例　記事タイトルに個別ページのリンクをつける

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

記事の投稿日時とカテゴリー

記事の投稿日を出力
<?php echo get_the_date(); ?>

記事の投稿時間を出力
<?php the_time(); ?>

記事が属するカテゴリーを出力
<?php the_category(); ?>

画像を出力する

テーマフォルダのURLを出力
<?php bloginfo('template_url'); ?>

//例 imagesフォルダに格納されているsample.pngを出力

<img src="<?php bloginfo('template_url'); ?>/images/sample.png" alt="サンプル画像">

古い記事・新しい記事のリンクを出力

古い記事のページへのリンクを出力
<?php next_posts_link(); ?>

新しい記事のページへのリンクを出力
<?php previous_posts_link(); ?>

管理者のメールアドレスを出力

<?php bloginfo('admin_email') ?>

//例 コピーライトにメールアドレスをリンク

<adress>Copyright &copy; <a href="mailto:<?php bloginfo('admin_email'); ?>">Westhill</a>
 All rights reserved.</adress>

パーツテンプレート

パーツテンプレートは、ヘッダーやフッターといったパーツを管理するためのテンプレート。
home.phpやindex.phpのようにページの生成を行うテンプレートに読み込んで利用する。

ヘッダー
header.php
<?php get_header(); ?>

フッター
footer.php
<?php get_footer(); ?>

サイドバー
sidebar.php
<?php get_sidebar(); ?>

検索フォーム
serchform.php
<?php fet_serch_form(); ?>

カスタム
aaa.php
<?php get_template_part('aaa'); ?>

2015-05-15

floatで横並びさせた時に、最後のmarginを消す方法

CSS

3カラムレイアウトを行った際に、margin-rightで余白をつけたのですが、最後の余白を消す方法がわからずドツボにハマりました。
いろいろ調べたのですが、以下の方法がRWDにした際にも影響がなく一番良かったのでメモとして残して置こうと思います。

floatで横並びさせた時に、最後のmarginを消す方法

html

<div id="content">

  <div class="post"> … 略 … </div>
  <div class="post"> … 略 … </div>
  <div class="post"> … 略 … </div>

</div>

css

#content {
  overflow: hidden;
}
.post {
  float: left;
  width: 280px;
  margin-right: 50px;
}

.post:last-child {
  margin-right: 0;
}
//IE7、IE8対策
.post + .post + .post {
  margin-right: 0;
}

.post:last-child { margin-right: 0;}
3つある同名の.postクラスの最後の部分のmargin-rightを無効にする。