月別アーカイブ: 2013年10月

CSS ソーシャルボタンを横並びに配置する

ここではソーシャルボタンを横並びに配置する方法を解説しています。
WordPressなどで使う場合style.cssに記述してください。

CSS

.sns-button {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.sns-button li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}
.sns-button li div {
	display: inline;
}
.sns-button:before,
.sns-button:after {
	content: " ";
	display: table;
}
.sns-button:after {
	clear: both;
}
.sns-button {
	*zoom: 1;
}
.sns-button iframe.twitter-share-button {
    width: 90px !important;
}

html

<ul class="sns-button">
<li>FaceBookのソースコード</li>
<li>Twitterのソースコード</li>
<li>Google+のソースコード</li>
</ul>

WordPress サーバー・ドメイン移管

ここではWordPressでサーバー・ドメイン移管を行う方法について解説しています。

wordpress_logo

新サーバーに移すデータを全て落とす

旧サーバーでの作業

※WordPressとプラグインを最新の状態にしておいてください。

FTPなどでWordPressが設置されているディレクトリから全ファイルを落とします。
データベースの全テーブルをエクスポートします。

ローカル環境での作業

旧サーバーから落としてきたSQLファイルの編集

旧サーバーで使用していたドメイン名で検索をかけ一括で全て新サーバーのURLに書き換えます。

wp-config.phpの編集

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', '新サーバーの~');

/** MySQL データベースのユーザー名 */
define('DB_USER', '新サーバーの~');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '新サーバーの~');

/** MySQL のホスト名 */
define('DB_HOST', '新サーバーの~');

全て新サーバーのものに書き直してください。

新サーバーでの作業

WordPressのアップロード
旧サーバーのWordPressを新サーバーのWordPressを設置するディレクトリに全てアップロードします。

データベースのインポート
旧サーバーのSQLファイルを新サーバーのデータベースにインポートします。

ここで新サーバーのwp_optionsテーブルのopstion_id番号1番option_valueのカラムで旧サーバーのドメインになっているところを新サーバーのドメインに書き換えます。

新サーバーのWordPressの確認

旧サーバーで画像パスなどを直書きの箇所を直していきます。
この作業が時間がかかるので先に旧サーバーで直書きの箇所を変数にするなどと確認する事をお勧めします。

WordPress Exec-PHP記事内でPHP

ここでは記事内でPHPを使えるようにするExec-PHPを紹介しています。

wordpress_logo

ダウンロードはこちら
http://wordpress.org/plugins/exec-php/

プラグイン新規追加で「Exec-PHP」検索でインストールできます。

Exec-PHPの設定
Exec-PHPを使えるようにするには、
設定→Exec-PHP→Execute PHP code in text widgetsにチェックを入れます。

これで記事内でPHPが使えるようになります。

jQuery The Sexy Curlsでページめくり

ここではThe Sexy Curlsプラグインの紹介をしています。

sexy-curls

ダウンロードはこちら
http://elliottkember.com/sexy_curls.html

headで読み込み

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="turn.js"></script>
<link rel="stylesheet" href="turn.css">

使用するファイル
jquery.min.js
jquery-ui.min.js
turn.js
turn.css
必要な画像
後は削除しても大丈夫です。

script

$(document).ready(function(){
    $('#target').fold();
});

html

<img id="target" src="yellow-heart.jpg" />

めくれたときに表示する画像を指定してください。

turn.js

var defaults = {
    directory: '.',         // The directory we're in
    side: 'left',           // change me to "right" if you want rightness
    turnImage: 'fold.png',  // The triangle-shaped fold image
    maxHeight: 400,         // The maximum height. Duh.
    startingWidth: 80,      // The height and width 
    startingHeight: 80,     // with which to start (these should probably be camelCase, d'oh.)
    autoCurl: false         // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
};

デフォルトではこのようになっていますので左上がめくれる設定になっています。

右上をめくれるようにする

var defaults = {
    directory: '.',            // The directory we're in
    side: 'right',             // change me to "right" if you want rightness
    turnImage: 'fold-sw.png',  // The triangle-shaped fold image
    maxHeight: 400,            // The maximum height. Duh.
    startingWidth: 80,         // The height and width 
    startingHeight: 80,        // with which to start (these should probably be camelCase, d'oh.)
    autoCurl: false            // If this is set to true, the fold will curl/uncurl on mouseover/mouseout.
};

めくる最初の位置とめくれる位置はmaxHeight、startingWidth、startingHeightのパラメータで決定してください。