DTP→ほそぼそとWeb業界のカタスミでお仕事しています・・・

【fc2カート】お店の名前(文字)をロゴ画像に変更

テンプレートによって、じゃっかん違いますが
全体の流れは、ざっくりとこんな感じ↓

お店のロゴ画像をfc2カートにアップしておく
(URLを後で使用)

お店の名前部分のHTMLは何かを調べる
(ブラウザの開発者ツールが便利)
   ↓
テンプレートの書き換え
(画像を貼りこむ)

特定のページのカスタムフィールドの値をループ外で呼び出す

Wordpress で、特定のページのカスタムフィールドの値を
ループ外で呼び出したな~と思ったので

関数リファレンス/get post meta

この関数は特定の投稿の特定のキーからカスタムフィールドの値を取得します。

●使い方
<?php $meta_values = get_post_meta($post_id, $key, $single); ?>

●パラメータ
 $post_id(整数)
 (必須) カスタムフィールドを取得したい投稿の ID。初期値: なし
●$key(文字列)
 (オプション) 取得したい値のキー名の文字列。初期値: ''
●$single(真偽値)
 (オプション) true をセットした場合、文字列として単一の結果を返します。false または値をセットしなかった場合、関数はカスタムフィールドの配列を返します。初期値: false

・・・と、いうことで

<?php if (get_post_meta( 24 , 'aaa' , true)): ?>
<?php echo esc_html(get_post_meta( 24 ,'aaa','true')); ?>
<?php endif; ?>

もし
ページID「24」のページの
「aaa」というフィールド名のデータがあれば
表示してね、としました。
お客さんが値を入れてくれる部分なので「 < 」とか入ってくるかもしれません。
そのため「echo esc_html」としています。


関数リファレンス/esc html

使い方  <?php esc_html( $text ) ?>
パラメータ  $text (文字列) (必須) エスケープするテキスト
初期値: なし
戻り値 エスケープされた HTML 文字列。

CSSのアニメーションを利用して、左から背景を少しずつ表示したい

バイト先の職業訓練学校では「実制作」なるものがありまして
訓練生さんから、質問が出た。
「背景画像の道を、左から、じょじょに表示させて、道を歩いてるような感じにしたい。」
訓練生さんのイメージするようなものが、ググってもなかったので
苦労して作ったので「めも」

↓完成したのは、こんな感じ
http://memo352.web.fc2.com/2017-10-michi/

イラストはS先生、作成のヒントはN先生にいただきました。
ありがとうございますm(_ _)m


コードは以下の通り

まずはHTML 背景画像(道)をDIVで隠しています
<div class="box1">
<div class="box2"></div>
</div>

<div class="box3">
<div class="box4"></div>
</div>


次にCSS DIVにアニメーションを付けて移動させます
html,body,div,p { margin: 0; padding: 0; }

.container{
	width:900px;
	background-color:#CCC;
	margin: 0 auto;
	overflow: hidden;
}

/* 道路上 ======================================================  */
.box1 {
	background-image:url(img/michi2.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 900px;
	height: 100px;
}

/* カバー(道路上 左から表示)===================================  */
.box2 {
	width: 900px;
	height: 100px;
	background-color: #CCC;
}

.box2 {
animation-name: animation01; /* アニメーション名を指定 */
animation-duration: 5s; /* アニメーション一回分の時間の長さ */
animation-timing-function: ease;/* アニメーションのタイミング・進行割合を指定する:easeが初期値 */
animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム(100%)のスタイルが適用 */
}

@keyframes animation01 { /* @keyframesで動作を定義、fromからtoへアニメーション */
	from {
		transform: translateX(0px);/* 水平方向に移動 */
	}
	to {
		transform: translateX(980px);/* 水平方向に移動 */
	}
}


/* 道路下 ======================================================  */
.box3 {
	background-image:url(img/michi3.png);
	background-repeat: repeat-x;
	background-position: left top;
	width: 900px;
	height: 100px;
	margin-top:-10px;
}


/* カバー(道路上 右から表示)===================================  */
.box4 {
	width: 900px;
	height: 100px;
	background-color: #CCC;
	margin-top:0px;
}


.box4 {
animation-name: animation02; /* アニメーション名を指定 */
animation-duration: 5s; /* アニメーション一回分の時間の長さ */
animation-timing-function: ease-out;/* アニメーションの終了付近の動きを緩やかにする */
animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム(100%)のスタイルが適用 */
animation-delay: 4s; /* アニメーションが開始するまでの時間を指定:0sが初期値 */
}


@keyframes animation02 { /* @keyframesで動作を定義、fromからtoへアニメーション */
	from {
		transform: translateX(0);/* 水平方向に移動 */
	}
	to {
		transform: translateX(-980px);/* 水平方向に移動 */
	}
}

お名前.com のサーバーにワードプレスを複数入れてみる

クライアントさんからの要望で
お名前.com のサーバーにワードプレスを複数入れてみることになりました。

今回はテスト用なので、ドメインの設定をしていませんが
本サイトの場合は、先にドメインの設定をしておきます。

手順は以下の通り

お名前.com 各種サービスログインページ
https://www.onamae.com/navi/


元町・南京町の近くにある、隠れ家のようなパンケーキ屋さん

元町・南京町の近くにある、隠れ家のようなパンケーキ屋さん
ANGIE(アンジー)に、バイト先のS先生と、打合せの帰りに寄りました。

2017-10-07-pancake-1.jpg
見た目よりボリュームがあり、夜ご飯になりました。

2017-10-07-pancake-2.jpg

2017-10-07-pancake-3.jpg



ANGIE (アンジー)
TEL078-333-0723
住所〒650-0023 兵庫県神戸市中央区栄町通2-7-4
営業時間営業時間 11:00am-7:00pm (LO 6:00pm)
定休日 毎週月曜日
ホームページhttp://angie-kobe.com/