シンプルなアイコンセット

とにかくアイコンはシンプルに限る。

300 simple line icons

なんといってもこのシンプル感 いいねやRSSはどこかに使いたくなるオーラが!かわいい!

スクリーンショット 2015-05-07 21.34.46

 

Gamecenter Icons Pack

なんともいえない こじんまり感じがいい ミニアイコンのセット。

スクリーンショット 2015-05-07 21.37.02

 

100 Simple Outline Icons

100あるアイコン どれもとてもおしゃれ。買い物かごシリーズはやクラウドアイコンはどこかで使えないかなー

スクリーンショット 2015-05-07 21.38.30

 

48 outline icons

このカチ!とした四角アイコンシリーズがいい。ナビやバナーに入れても幅と高さが同じになるのはありがたいな〜

スクリーンショット 2015-05-07 21.41.41

 

130 simple free icons

シンプルな130のアイコン でもこういうのが本当に使いやすい。

スクリーンショット 2015-05-07 21.44.20


Photoshop ブラシ。「雲」 空のこれ!って写真がない時にとても便利。

スクリーンショット 2015-05-07 17.47.55

なかなか既存の写真の加工だけでは、思うような青空ができない。

素材の中に、この背景にぴったりの青空の写真がない。

そんな時に便利なのが雲ブラシ。背景を青に塗りつぶして、白に描画色にブラシを持ってワンクリック。

あっという間に青空の完成。そんな便利な雲ブラシを集めてみました。

スクリーンショット 2015-05-07 18.06.24

 

 

Cloud Brushes     by RoseCabriolet

スクリーンショット 2015-05-07 18.08.09

http://rosecabriolet.deviantart.com/art/Cloud-Brushes-146311560?q=boost:popular%20cloud%20brushes&qo=21

とてもリアルな雲を描くことができます。巨大な積乱雲。

 

qbrushes.netの clouds-brushes

スクリーンショット 2015-05-07 18.10.36

4つのブラシがまとめられていて、使い勝手がいいです。

 

Clouds II Photoshop Brushes by redheadstock

スクリーンショット 2015-05-07 18.12.43

 

http://redheadstock.deviantart.com/art/Clouds-II-Photoshop-Brushes-91356293?q=boost:popular%20cloud%20brushes&qo=12

大きなサイズの雲ブラシが多い中、こじんまりとしたブラシセット20種類あります。

Cloud Brushes 2 by KerovinBlack

スクリーンショット 2015-05-07 21.00.38

流れるような雲がいい感じのブラシ

http://kerovinblack.deviantart.com/art/Cloud-Brushes-2-166189548?q=boost%3Apopular+cloud+brushes&qo=65

 

Clouds Brushes Iby iAiisha

スクリーンショット 2015-05-19 22.11.37 

9個の大きなサイズのブラシな為 高解像度 とても綺麗な雲が描けます 

http://iaiisha.deviantart.com/art/Clouds-Brushes-I-106397492

 

Clouds – Mist Photoshop and GIMP Brushes

スクリーンショット 2015-06-16 12.21.58

 

小さな積乱雲とかいろいろな雲がセットになっています。

http://alsnd12.deviantart.com/art/Clouds-Mist-Photoshop-and-GIMP-Brushes-17721617

 


WordPress ダッシュボード内の置換にはSearch Regexプラグインは便利

WordPress ダッシュボード内で、キーワードで検索・置換できるという優れもののプラグイン。

投稿記事・固定ページの本文の検索・置換の他、コメントも可能。

一括に対象の文字列などに置き換えることができる。正規表現も可能だ。

プラグインのインストール

ダウンロードサイト https://wordpress.org/plugins/search-regex/

もしくは、プラグインの追加で、Search Regexを検索する。

スクリーンショット 2015-02-11 22.48.07

 

インストール後は、

スクリーンショット 2015-02-11 22.48.54

ツールの中にSearch Regexがある

使い方は、「Source」の下向き三角をクリックすると、

スクリーンショット 2015-02-11 22.50.08

 

  • Comment author – コメントの名前
  • Comment author email – コメントのメールアドレス
  • Comment author URL – コメントのURL
  • Comment content – コメントの内容
  • Post content – 記事の本文
  • Post excerpt – 記事の抜粋
  • Post meta value – 記事のカスタムフィールド
  • Post title – 記事のタイトル
  • Post URL – 記事のURL

というところから、検索・置換したいところを選択し、

スクリーンショット 2015-02-11 22.52.53

Search pattern(検索する文字列) に検索したい文字列やアドレス タグを入れ

Replace pattern(置換する文字列) に置換したい文字列やアドレス タグを入れる

「Search」ボタンは検索した箇所を表示し、「Replace」ボタンはそれが置き換えられた場合を表示するので、実際に置換したい場合は「Replace&Save」押す。

正規表現を行いたい場合は、Regex: にチェックを入れる

 

 


header, footer, nav, section, article, figure, aside の新要素はインライン要素として認識される

HTML4.01やXHTMLでは、h1やpなどはブロック要素、br img a はインライン要素として大別して、CSSを考えてきた。

HTML5では、このインライン・ブロック要素という考え方はなくなり、コンテンツモデルという概念になっている。

ただ、CSSを考える際は、やはりこのブロックだ。インラインだ。という考え方は必要で、今回HTML5で新しく追加された要素である

header, footer, nav, section, article, figure, aside

は、HTML5未対応のブラウザの場合、インライン要素として扱われる。

そのために、div id=”header” を<header> で使う場合は、ブロック要素という考え方がないので、レイアウトがくずれやすい。

そのために CSSのdisplayプロパティを使って、“block”の値でインライン要素をブロック要素のように表示させることが必要。

 

header, footer, nav, section, article, figure, aside {display:block;}

ブラウザで認識しないのはやはり、Internet Explore(v8 v9)とFirefoxがheader要素とfooter要素をインライン要素としてあつかうようだ。

ただv8や以下のIEは新要素にも対応していないのhead要素内で、JavaScriptのライブラリの記述も必要

<!–[if lt IE 9]>
<script type=”text/javascript” src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<style type=”text/css”>
header, footer, nav, section, article, figure, aside {
display:block;
}
</style>
</head>


この時期ならでは、重宝するのがPhotoshop 桜ブラシ

スクリーンショット 2015-05-07 17.47.55

4月に向けて、新生活応援セール・新入学お祝い・新社会人フェアなどなど、バナーも NEW が飛び交う。

そんな時にやっぱり便利なのが さくらのブラシ 今回はPhotoshop 桜ブラシを集めてみた

DotsDomino

スクリーンショット 2015-02-01 22.37.49

 

 

定番の形のさくらブラシが揃っている。17個。1つ1つのタイプはスタンプのようで使いやすい

 

deviantart.com

スクリーンショット 2015-02-01 22.42.42

 

敷き詰めるようなさくらは、背景にぴったり。7個

 

freebies-db.com

スクリーンショット 2015-02-01 22.45.02

 

さくら吹雪なイメージ。

 

 

ちなみに下記のサイトはブラシを使わずに、文字にさくら吹雪を散らしています。とても綺麗

スクリーンショット 2015-02-01 22.46.52


印刷プレビューで見るとリンクアドレスが表示している・・・CSS

クライアントから、作成途中のサイトを検証してもらっていたら、印刷プレビューで見た時にURLが表示されているんだけど、これどうにかならないの?と言われた。

URL ?  確かにサイトを印刷プレビューで見たら、URLが表示されている。

こんな感じだ・・・

スクリーンショット 2015-02-01 17.46.42スクリーンショット 2015-02-01 17.47.32

 

調べてみた。【CSS】印刷するとリンクの後ろにURLが勝手に表示される のサイトを参考にさせてもらうと、

@media print{
a[href]:after {
  content:"("attr (href)")";
  }
abbr[title]:after{
  content:"("attr (title)")";
}

という表示があるせいだと。確かにこれでは、URLが出てしまう。
ただ、なぜこの部分が入ってしまったのか、入れた覚えがなくて・・・
DWで検索してみると、DWで生成されたCSS内に下記の記述があった。

 /* ==|== print styles ======
  Print styles.
  Inlined to avoid required
   HTTP connection: h5bp.com/r
  ======================= */

@media print {
 * { background: transparent !important; color: black !important;
 box-shadow:none !important; text-shadow: none !important;
 filter:none !important; -ms-filter: none !important;
 } 

/* Black prints faster: h5bp.com/s */
 a, a:visited { text-decoration: underline; }
 a[href]:after { content: " (" attr(href) ")"; }
 abbr[title]:after { content: " (" attr(title) ")"; }
 .ir a:after, a[href^="javascript:"]:after,
 a[href^="#"]:after { content: ""; } 

/* Don't show links for images, or javascript/internal links */
 pre, blockquote {
 border: 1px solid #999; page-break-inside: avoid; }
 thead { display: table-header-group; }

 /* h5bp.com/t */
 tr, img { page-break-inside: avoid; }
 img { max-width: 100% !important; }
 @page { margin: 0.5cm; }
 p, h2, h3 { orphans: 3; widows: 3; }
 h2, h3 { page-break-after: avoid; }
}

どうやらDreamweaver CCの可変グリッドで初期画面を作成した際にできる [boilerplate.css]にこの記述がある。

結局、クライアントからはブウラウザで表示させる状態と、ほぼ同じような印刷プレビューにしてくれないかという無茶な要望が増えた

ここで、print.cssと、とことん向き合うことになる・・・


Photoshop Command+T CS5だけ? バウンディングボックス

スクリーンショット 2015-05-07 17.47.55

Photoshopで、例えばシェイプなどを使った際に、書き終えて選択ツールに持ち替えた際、バウンディングボックスにチェックを入れると、シェイプにハンドルが出て、拡大縮小などがやりやすくなる。

スクリーンショット 2015-01-27 23.26.20

 

上記の画面 Photoshop CC2014なのだが、他のバージョン。今回使用したのはCS5

これを使った際に、バウンディングボックスにチェックが入っていてもハンドルがでない現象にぶちあたった。

いろいろ調べた結果  Command+T (MAC)    contrl+T (Win)で表示/非表示になるらしい。

試しにPhotoshop CC2014でも試したが、何もかわらなかった。

これはCS5だけなのだろうか?

検証していきたい


PDFの1ページ目を自動で画像として貼り付けてリンク先がPDFになるプラグイン

クライアントさんから、PDFを直に貼り付けるという要望は結構多いです。本来は、貼り付けだけのページになってしまうので、どうだろう・・・と思うのですが、、

実際クライアントさんの立場で考えると、ウェブ担当が変わったり、パソコンがうまく使えなかったりすると、ワードで作成したファイルをPDF化して、それを表示させたいというのは仕方ないことです。

PDFの場合、Wordpressにあるメディアを追加からPDFを追加するとファイル名とリンク先のみが表示されます。これだとわかりづらいので、PDFのアイコンをつけてその横にリンク先。。。となります。この作業が簡単なようで意外とめんどくさい。アイコンとリンク先のテキスト文字が下揃えになるので、こちらでCSSの指定をしてもクライアントさんが更新する場合、それを入れる可能性は、お知らせしていてもゼロです。

そこで探してみつけたのが、「PDF Image Generator」こちらのプラグインは、非常におすすめです。

スクリーンショット 2015-02-01 13.40.57

通常通りメディアの追加から、画像のアップロードをするようにPDFをアップします。1ページ目をちょうどいいサムネイル画像にしてくれます。

リンク先はもちろん、別タブでのPDF表示。

link-to-pdfというクラス名を変更して表示デザインを変えれば、簡単にPDF画像の作成完了です。

本サイトの方にこまかなカスタマイズも掲載されています。

http://web.contempo.jp/weblog/tips/p1522


All in one SEOとWordPress SEO by Yoastはどちらが効果的?

最近まで、SEO対策といえば、All in one SEO Packのプラグインを導入していた

スクリーンショット 2015-01-17 13.34.30

設定画面が3つあって、基本的にはGeneral Setteingsさえ行っていれば、問題のないプラグイン。各投稿画面に、下記のような投稿ごとの設定も行える

スクリーンショット 2015-01-17 13.37.04

ところが最近、 WordPress SEO by Yoastが大人気?とか聞いて。

どういう感じで違うのか、、、、ただいま検証中。この2つを両方入れるとかもありなのかな???

 


カスタムフィールドのテンプレート

3年位前にリニューアルの依頼を受け、作成した不動産サイトがある。

リニューアル前のサイトは、CGIを細かく使って情報の投稿がされていた。それをWordPressでできないかということだった。

投稿欄の下にカスタムフィールドテンプレートを使って細かい入力欄を作成した。要望がだんだんと細かくなり、デイレクターも戦ってくれたのだが、、、その前のCGIが細かくて、その内容があるクライアントは、文字すらも打ちたくないという・・・異様に細かいカスタムフィールドテンプレートができあがってしまった。。。。

この時点で心配だったのが、その後のデータ修正である。クライアントの担当が変わった時、この入力欄の変更が入ったらできるのか? それまで投稿してきたデータへ確実に影響があるので、納品の際、大幅な修正、、、1行入力欄を追加するのも、データに支障があるので、できない旨は伝えた。

・・・・3年後 担当は止めて、新しい担当になり、やはり前の細かすぎる入力欄を変更したいと、、、消したり、2〜3行追加したいと。。。XMLデータがずれたり、でなくなるのは目に見えている。デイレクターも戦ってくれたが、、、、データに影響が極力ないような変更になった。とはいえ1行追加と項目名の変更があるので慎重にデータをバックアップとったり、既存のテンプレートを何度も日付でコピーした。

夜10時からメンテナンスモードにして、作業開始する。シミュレーションしていたので30分ほどで問題なく完了。安心して寝る

次の日 朝、ディレクターよりデータがArray で表示されてると連絡が・・・

え?昨日確認したときはなにもなかったのに・・・なぜ・・・・

すぐに新規投稿して試してみる、エラーはでない。正常に表示する。エラーの出ているページで、カスタムフィールド欄についている 保存 ボタンを押して更新してみる。データが正常に表示された。

各投稿欄に切り替えでカスタムフィールドのテンプレートが4つあるので、それらを切り替えながら、保存ボタンを押す作業開始。データ全てが表示される。

その後なぜか、パーマリンクもおかしくなっていたので、再度消して入れおして正常に戻る。

今後、こういう依頼の際は細かいシミュレーションしていきたい。

カスタムフィールドのテンプレート詳細はこちら

 


1 2 3 4