作成者別アーカイブ: tiki

SSL化した場合。「http://」から「https://」へリダイレクトする。

————-
SSL設定 進め方
————-
レンサバで証明書もらう
   ▼
.htaccess を編集する
   ▼
設定 → 一般 → 
WordPress アドレス (URL)と、サイトアドレス (URL)を、https:に変更
(WordPress アドレスを変えられない場合は、wp-config.phpで変更)
   ▼
プラグイン Search Regex で 投稿書類全て https:に変更
【参考】
https://www.adminweb.jp/wordpress-plugin/operation/index27.html

★できなければ、手打ちで変更!
エディター内の検索機能で、
http://xxxxxxxxxx.com(ドメイン名)を
https://xxxxxxxxxx.com(ドメイン名)に置換。
それを各ページ行う。
(頑張ろう〜!)

 


 

SSL化した場合、実はGoogleなどのサーチエンジンでは「http://」と「https://」では異なったドメインと判断してしまいます。
つまり、見た目が同じサイトが2つ存在しているということになります。これでは、Googleからの評価を落としたり、リンク切れなどでユーザーの離脱の原因となってしまいます。

そこで、「URLを正規化」することで対処します。
URLの正規化とは、簡単に言えば、「正しいURLはこっちですよGoogleさん!」と教えてあげることです。今回もプラグインを使用せず、.htaccessファイルに記述していきます。

.htaccess

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

「example.com」の部分を自分のドメイン名に変更してください。

[参考]hetemlで新サーバーに移設する手順と注意点
https://mdstage.com/web/server/heteml-data-migration

 


 

SSLにした時のBasic認証の設定方法

1.
パスワード生成ツールで任意のIDをパスワードを入力して、暗号化されたパスワードを作成しておく。(http://www.luft.co.jp/cgi/htpasswd.php)

2.
「htpasswd.txt」を開き、上のURLで生成されたIDとパスワードをコピペする。

3.
「htaccess.txt」を開き、一番上の行の「AuthUserFile」に .htpasswd までのフルパスを記述する。フルパスがわからない時は、ベーシック認証をかけたい階層に「fullpass.php」をアップロードしてWEB上でそのファイルにアクセスすると表示される。確認したら「fullpass.php」は削除しておくこと。
例)https://test.com/test/ にベーシック認証をかけたい時は、「test」フォルダ内に「fullpass.php」をアップロードして https://test.com/test/fullpass.php にアクセスするとフルパスが表示される。

4.
ベーシック認証をかけたい階層に「htpasswd.txt」と「htaccess.txt」をアップロードし、サーバー上でファイルの名前を変更する。「htpasswd.txt」は「.htpasswd.txt」へ、「htaccess.txt」は「.htaccess」へ変更。

注意!ただし、すでに同じ階層に「.htaccess」が存在する時はそのファイルを上書きしないこと。中身を確認して、そのファイルに「htpasswd.txt」の内容を書き足す形で対応する。

プラグイン セレクト

Number My Post Pages
1つの投稿に対して複数ページにわたって書く
[設置方法]たなブログ WordPress入門講座

TinyMCE Advanced
投稿用エディターを使いやすくする
[使い方]

AddQuicktag
投稿用エディターによく使うタグを入れる
[カスタム投稿に設置]yumenekoさん

Custom Post Type UI
ダッシュボード内にカスタム投稿の独自ボタンを作る

Advanced Custom Field suite
カスタム投稿をカスタマイズ

Advanced Custom Fields
カスタム投稿を自由自在にカスタマイズ

Tree Maker
カテゴリーのツリー化をする

Resize At Upload Plus
アップロードする画像サイズの上限を指定し、自動でリサイズ。(オリジナルデータは残さない)
(php.iniを10Mや20Mに修正/サーバーでの設定もあり)

SyntaxHighlighter Evolved
本文中にソースコードを書く
[活用方法]Creator note

Category Order and Taxonomy Terms Order
カテゴリー、タクソノミーの表示順序の入れ替え

User Role Editor
ユーザー権限をデフォルトの5段階(管理者・編集者等)とは、違うユーザー権限を作る

Adminimize
ダッシュボードの管理画面メニューをユーザーごとにカスタマイズ

admin-menu-editor
管理画面のメニュー表示を制御できるプラグイン
https://ja.wordpress.org/plugins/admin-menu-editor/

Limit Login Attempts
ログイン数が一定数に達すると、そのIPアドレスに対して一定時間ロックをかける
[日本語化]http://fukuyama.co/limit-login-attempts-ja

Maintenance Mode
メンテナンス中の非表示用
[使い方]http://toshiiy.blog22.fc2.com/blog-entry-130.html

All in One SEO Pack
トップページや個別記事に対して、SEO(検索エンジン最適化)の対策ができる
[使い方]http://wp-exp.com/blog/how-to-use-all-in-one-seo-pack/
[使い方]http://www.livexlife.com/wordpress/plugin/all-in-one-seo-pack/

WordPress Download Manager
PDFや資料ファイルのダウンロード機能や管理機能、パスワードロック機能を追加する
[活用方法]WordPressの学校
[日本語化]パソコン教室

not-paid
制作費の支払い期限日が過ぎたらwebサイトを徐々にフェードアウトし、滞納の限度が過ぎたら何も表示させなくする。お金を払わないクライアント対策に。
https://github.com/kleampa/not-paid/

Theme Tester
変更前のデザインを表示する、ちょっとしたメンテナンス中に

Password Protected
運用中のサイトをメンテナンスする際、一旦非表示にする場合に使用(パスワード系は割とコレ)
[使い方]http://www.doghands.com/wordpress/password-protected/

Password Protect WordPress (Private Blog)
運用中のサイトをメンテナンスする際、一旦非表示にする場合に使用で、ログインロゴ変更可。
[使い方]http://www.amamoba.com/wordpress/password-private-blog.html

WP Maintenance Mode
運用中のサイトをメンテナンスする際、一旦非表示にする場合に使用

All-in-One WP Migration
簡単にサイトの引っ越しが完了する
[使い方]https://www.vektor-inc.co.jp/post/all-in-one-wp-migration/

All-in-One WP Migration import
サーバーの容量制限でphp.ini変更が難しい場合の、インポート可能ファイルサイズを変える

Contact Form 7
Contact Form 7をプロ級にカスタマイズ
[使い方]https://kagesai.net/contactform7perfectguide/

MW WP Form
ショートコードを使って確認画面付きのメールフォームを作成できる

FooGallery
美しいギャラリー

赤字の入れ方 ー 初めて外注デザイナーに依頼してみた

クライアントに赤字を入れてもらうのにおすすめアプリ

MetaMoJi Note Lite(iPhone、iPad、Android、Windows)
https://www.microsoft.com/ja-jp/store/p/metamoji-note-lite/9wzdncrfjcpk

プレビュー(Mac)
Macは、アプリを入れずに、デフォルトで入っているプレビューを使用
「Macintosh HD」→「アプリケーション」→「プレビュー」そこに開きたい書類をドラッグ

背景パターンいろいろ

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>