ちょっとづつカスタマイズしているので、忘れないように残していきます。

リストのサムネイルにエフェクトが掛かっているのが、何となく良いなと思いまして気に入ったのを2つやってみました。

テーマはSimplicity2を使用しています。

サムネイル画像にマウスが乗った時の動作に変化を加える

オンマウスで画像の色が薄くなり浮き出てくる感じのエフェクト

（style.cssに記述）

/*---------------------------------
サムネイル画像にエフェクト1
--------------------------------*/
.entry-thumb,.wpp-thumbnail{
  overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
  transition: 0.6s ;
}
 
.entry-thumb img:hover,.wpp-thumbnail:hover {
   opacity: 0.6;
   -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

上の画像が、サムネイル画像にマウスを置くと少し半透明になって浮き出てくる方。

下の画像が、わかりにくいですがオンマウスで一瞬フラッシュする方です(^^;

オンマウスで画像が一瞬フラッシュします。

（style.cssに記述）

/*---------------------------------
サムネイル画像にエフェクト2
--------------------------------*/
.entry-thumb img:hover,.wpp-thumbnail:hover {
        opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

以上2種類ですが、両方気分で変えたりしていましています。

まとめ

よく見るサムネイルのエフェクトですが、つかってみると気分転換になってサイトのイメージが少し変えられるのでお勧めです。

ワードプレスのスタイルシート (style.css) 記述先はどこ？

2017年2月11日

投稿 WordPressリストのサムネイルにエフェクト は シンプルショッピング に最初に表示されました。

ワードプレスを使っている人は、当たり前に分かっている事ですが、初めてで何も分からない方の為にスタイルシートの記述先までの行き方を説明していきたいと思います。

テーマはSimplicity2を使用しています。（現在のテーマはOPENCAGEの「ストーク」を使用しています）

スタイルシート (style.css) を記述する場所へ行こう！

まずは、ダッシュボードの外観①の部分にマウスを移動するとスライドして項目が出ますので、次に②の部分のテーマの編集をクリックします。

クリック後は下の様な画面になっていると思います。

上の表記がスタイルシート (style.css) になっていれば大丈夫です。

もし違う場合は画面右側にマウスを移動して③の部分のスタイルシートを選択してください

下の画像の部分をクリックしてくださいね。

その後にまた先ほどの表記を確認してスタイルシート (style.css) になっていればＯＫです。

次にＣＳＳを記述していく場所ですが下の画像の場所から記述したいコードを書いていきます。またはコピペ！！（画像のコードは例です。ここにコードを記述してくださいね）

以上がスタイルシート (style.css)までの行き方になります。

まとめ

初心者なのでオリジナルのカスタマイズが出来る知識など全く有りませんが、今更聞けない！って言うような超簡単な事からでも説明していきます。

超基本的な事なので参考にする方も殆どいないと思いますが、誰かの参考になれば幸いです。

個別にＣＳＳを設定したい場合は以下も参考にしてください。

【ワードプレス】投稿・固定ページに個別のＣＳＳを追加する方法をやってみた！

2017年2月7日

投稿 ワードプレスのスタイルシート (style.css) 記述先はどこ？ は シンプルショッピング に最初に表示されました。

ワードプレスの投稿記事に個別のCSSを追加をしたい、そんな時に便利です。

ＣＳＳを共通して使用したくない場合があり、探していたら丁度良いのが見つかりました。

コードは参考にさせて頂いた所からそのままコピペしてきて実際にやってみました。

テーマはSimplicity2を使用しています。（現在のテーマはOPENCAGEの「ストーク」を使用しています）

ストークでも使用できましたので参考にしてください。

個別にCSSを追加できる仕様にする

CSSを追加できる仕様にする場合は、以下のコードをfunctions.phpに記述しましょう。

functions.phpは、編集を誤るとエラーが出てサイト表示されなくなるので、必ず編集前にバックアップを取っておいてください。

//Custom CSS Widget
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
	add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
	global $post;
	echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
	echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
	if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
	if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
	$custom_css = $_POST['custom_css'];
	update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
	if (is_page() || is_single()) {
		if (have_posts()) : while (have_posts()) : the_post();
			echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
		endwhile; endif;
		rewind_posts();
	}
}

上記コードをfunctions.phpに記述していきます。（スクショのテーマはSimplicity2です。）

functions.phpを選択して

以下の様にコードを記述します（コピぺ）

コードをfunctions.phpに記述後に投稿画面を見ると、Custom CSSのフィールドが追加されていると思います。

Custom CSSのフィールドに記述すれば各ページのhead内に記述されます。
Custom CSSというフィールド名を変更したい場合は、ソースコードの6、7行目の部分を変更するとフィールド名が変わります。

色々悩まずに設定できるので使ってみると凄く便利ですよ！

Reference site

HTML5&CSS3標準デザイン講座

posted with ヨメレバ

草野 あけみ 翔泳社 2015-11-06

Amazon

Kindle

楽天ブックス

投稿 【ワードプレス】投稿・固定ページに個別のＣＳＳを追加する方法をやってみた！ は シンプルショッピング に最初に表示されました。