背景パターンいろいろ

http://www.nxworld.net/tips/css-gradient-pattern.html
のコピペ

とりあえず、こぴぺっとく。

垂直ストライプ
垂直ストライプ
垂直のストライプをCSSで実装する方法で、CSSは下記のように記述します。
配色を変えたい場合はカラーコード部分を、太さをや間隔を変更したい場合はサンプルソースで10pxや20pxとなっている箇所を変更します。
CSS
pattern {
background: repeating-linear-gradient(90deg, #444, #444 10px, #888 0, #888 20px);
}

水平ストライプ
水平ストライプ
こちらは水平のストライプで、先ほどのものから回転させる記述を省けば実装できます。
CSSは下記のように記述し、同じくカラーや太さなど変更したい場合はカラーコード部分やpxの値を変更します。
CSS
pattern {
background: repeating-linear-gradient(#444, #444 10px, #888 0, #888 20px);
}
斜めストライプ #1
斜めストライプ #1
こちらはストライプを斜めにしたもので、CSSは下記のように記述します。
ここでは回転を45degにしていますが、30degとか60degにすることで傾き具合を簡単に変更できます。
CSS
pattern {
background: repeating-linear-gradient(45deg, #444, #444 10px, #888 0, #888 20px);
}
斜めストライプ #2
斜めストライプ #2
同じくストライプを斜めにしたもので、下記のように回転の記述箇所に「-(マイナス)」指定することで方向を逆にすることができます。
CSS
pattern {
background: repeating-linear-gradient(-45deg, #444, #444 10px, #888 0, #888 20px);
}
ドット
ドット
CSSを下記のように記述することでドットパターンを表現することもできます。
background-positionやbackground-sizeの値を変更することで、大きさや間隔などを変更することができます。
CSS
pattern {
background: #888;
background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
チェック #1
チェック #1
四角が並んだチェック柄のようなものを表現したもので、同じくbackground-positionやbackground-sizeの値を変更することで大きさなど変更できます。
CSS
pattern {
background-color: #888;
background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
background-position: 0 0, 25px 25px;
background-size: 50px 50px;
}
斜めチェック #1
斜めチェック #1
こちらはひし形(ダイヤ)を並べた感じのパターンで、CSSは下記のように記述します。
CSS
pattern {
background-color: #888;
background-image: linear-gradient(45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444), linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444);
background-size: 25px 25px;
}
チェック #2
チェック #2
少し透過させたものを重ねることで上とか少し違うチェック柄を表現したものです。
CSSは下記のように記述します。
CSS
pattern {
background-color: #fff;
background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.5) 50%, transparent 50%);
background-size: 50px 50px;
}
斜めチェック #2
斜めチェック #2
こちらは先ほどのものを斜めにしたもので、CSSは下記のように記述します。
CSS
pattern {
background-color: #fff;
background-image: linear-gradient(-45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%);
background-size: 52px 52px;
}
以下はこれまで紹介してきたものに比べると利用する機会は少ないと思いますが、CSSだけでこんな背景パターンもできるよということでユニークな感じのものを幾つかご紹介します。
ユニーク #1
ユニーク #1
マークのようなものを作成・繰り返した背景パターンです。
CSS
pattern {
background-color: #888;
background-image: radial-gradient(closest-side, transparent 98%, #444 100%), radial-gradient(closest-side, transparent 98%, #444 100%);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
}
ユニーク #2
ユニーク #2
立体的なボックスが並んでいるような背景パターンで、CSSは下記のように記述します。
CSS
pattern {
background-color: #555;
background-image: linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888);
background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px;
background-size: 50px 100px;
}
ユニーク #3
ユニーク #3
こちらは三角を敷き詰めたような背景パターンで、CSSは下記のように記述します。
CSS
pattern {
background-color: #444;
background-image: linear-gradient(115deg, transparent 75%, #888 75%), linear-gradient(245deg, transparent 75%, #888 75%), linear-gradient(115deg, transparent 75%, #888 75%), linear-gradient(245deg, transparent 75%, #888 75%);
background-position: 0 0, 0 0, 10px -20px, 10px -20px;
background-size: 20px 40px;
}

ホウゲツサイト プラグイン

FeedWordPress
登録したサイトの更新情報を一括管理するシステム
http://www.versath.org/archives/2269

W3 Total Cache
キャッシュのプラグイン
下記は、えらい目にあったとのこと。
http://provaiciao.jp/mt-wp-ecc/w3-total-cache-error/

PubSubHubbub
今回はGoogleへのインデックス速度をアップしてくれるプラグイン
http://hisato-net.com/pubsubhubbub-180

Duplicator
WordPressを複製して簡単にサーバー移転ができるプラグイン
http://netaone.com/wp/duplicator/

AddQuicktag

All In One SEO Pack

AVH Extended Categories Widgets

Category Order and Taxonomy Terms Order

Contact Form 7

Contact Form 7 add confirm

Resize At Upload Plus

背景指定

下記の表は左・中央・右/上・中央・下方向の繰り返し設定のタグ一覧です。

垂直方向の位置 タグ
左側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : left;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : center;
右側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : right;
水平方向の位置 タグ
上側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : top;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : center;
下側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : bottom;

画像の配置 タグ
左・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left top;
もしくは
background-position: 0 0;

左・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left center;
もしくは
background-position: 0 50%;

左・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left bottom;
もしくは
background-position: 0 100%;

中央・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center top;
もしくは
background-position: 50% 0;

中央・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
もしくは
background-position: 50% 50%;

中央・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center bottom;
もしくは
background-position: 50% 100%;

右・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right top;
もしくは
background-position: 100% 0;

右・中央 background-image: url(画像のパス);
background-repea : no-repeat;
background-position: right center;
もしくは
background-position: 100% 50%;

右・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right bottom;
もしくは
background-position: 100% 100%;

キーワードによる指定の他に [px] [%] などもあり、こちらの方がより細かな設定が出来ます

スクロールさせない
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right top; /* background-position: 100% 0; */
background-attachment: fixed;
}

CSSまとめ

[CSS]dl要素を美しくデザインするスタイルシートのまとめ
http://coliss.com/articles/build-websites/operation/css/showcase-css-definition-list-styles.html

[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくる
http://coliss.com/articles/build-websites/operation/css/css-jagged-border-by-somestuffer.html

[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
http://chick.tikidesign.jp/wp-admin/post.php?post=117&action=edit&message=6

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコード
http://coliss.com/articles/build-websites/operation/css/sweet-css-framework-beemuse.html

[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
http://coliss.com/articles/build-websites/operation/css/css-parent-child-vertical-list-menu.html

[CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト
http://coliss.com/articles/build-websites/operation/css/css-milky-effect-by-juanbrujo.html

[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms
http://coliss.com/articles/build-websites/operation/css/framework-grid-forms.html

[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
http://coliss.com/articles/build-websites/operation/css/css3-gradient-borders-by-murphyrandle.html

[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
http://coliss.com/articles/build-websites/operation/css/css-single-element-pure-css3-double-fold-ribbon.html

CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
http://coliss.com/articles/build-websites/operation/css/more-css-techniques.html

すぐに使えてデザインも素敵、CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets
http://coliss.com/articles/build-websites/operation/css/open-source-ui-components-coded-with-html-and-css-and-sass.html

CSS3を使った実用的なスタイルシートのテクニックのまとめ
http://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-the-first-half-of-2012.html

[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
http://coliss.com/articles/build-websites/operation/css/centering-percentage-widthheight-elements-by-css-tricks.html

日付に関する表示いろいろ

記事に「最終更新日」を表示する方法


<p>
[記事公開日]<?php the_time('Y/m/d'); ?><br>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
[最終更新日]<?php the_modified_date('Y/m/d') ?>
<?php endif; ?>
</p>

最終更新日のみ表示する場合

[最終更新日]<?php the_modified_date('Y/m/d') ?>

WordPressで指定日時によって内容を表示するショートコード
http://gatespace.jp/2012/05/28/date-short-code/

公開済の記事を指定日時で予約更新する
http://wpxtreme.jp/公開済の記事を指定日時で予約更新する

pdf

ホームページ上でPDF形式のファイルを表示させたい時、

リンクをはる場合は

<a href="acrobat/acrobat3J.pdf">アクロバット3JPDFファイル</A>

埋め込みたい場合は

<embed src="acrobat3J.pdf" width:300; height:300;>

PDF Viewerプラグインがインストールされている場合、
これでホームページ上に埋め込まれたPDF形式の書類を見ることが出きます。

Googleドキュメントのビューア機能を利用したもの

<p>
<iframe style="WIDTH: 420px; HEIGHT: 583px" src="http://docs.google.com/gview?url=http://www.cals-ed.go.jp/calsec/rule/const4r.pdf&amp;embedded=true" frameborder="0"></iframe>
</p>

書体指定(Font)

明朝
font-family:”ヒラギノ明朝 Pro W6″,”Hiragino Mincho Pro”,”HGS明朝E”,”MS P明朝”,”MS PMincho”,”MS Mincho”,serif;

ゴシック
font: 12px/1.5 “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,”Meiryo”,arial,Osaka,”MS Pゴシック”,”MS PGothic”,Sans-Serif;

ログイン画面のロゴ・CSS・リンク先を変更したい

[参考]http://codex.wordpress.org/Customizing_the_Login_Form

// ログイン画面ロゴ変更
function my_custom_login_logo() {
echo ‘

‘;
}
add_action(‘login_head’, ‘my_custom_login_logo’);

//ログインのロゴのリンク先変更
function custom_login_logo_link() {
return get_bloginfo( ‘home’ ).’/';
}
add_filter( ‘login_headerurl’, ‘custom_login_logo_link’ );

CSSを変更したい場合

.login h1 a {
background-image: url(‘../images/wordpress-logo.png?ver=20120216′);
background-size: 274px 63px;
background-position: top center;
background-repeat: no-repeat;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}

必要に応じてfunction.phpから上書きが可能です。

画像の回り込み解除 CSS

WordPress の標準テーマである default, twentyten には
回り込みに関するスタイルが書いてあります。

/* 画像の回り込みとか */
.aligncenter {
    display: block;
    clear: both;
    margin: 0.25em auto 1.5em;
    }
.alignleft {
    float: left;
    clear: both;
    margin: 0.25em 1.5em 1.5em 0;
    }
.alignright {
    float: right;
    clear: both;
    margin: 0.25em 0 1.5em 1.5em;
    }
h2, hr {
    clear: both;
    }

配置:左が連続すると、回り込みがおかしくなってしまうので、
画像タグの後に

<div style="clear:both;"></div>

を挟むか、見出しか水平線を書けば回り込みを解除できます。