フォノクラフト株式会社：作業メモや備忘録など

[CSS] preタグを横幅に合わせて改行する。

preを任意の横幅で改行させましょう

↓これを入れるだけ。

	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */

CSS記述例

#aaaaaa pre{
	width:650px;
	word-break: break-all;
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

Categoty in CSS

よく使うソーシャルサイトのウィジェットやプラグイン設定画面

without comments

ソーシャル系の貼付け用ウィジェットやプラグイン設定ページ。
忘れっぽいのでここにメモ。それだけです。。

Facrbookのソーシャルプラグイン

https://developers.facebook.com/docs/reference/plugins/like-box/

Twitterのウィジェットなど

ボタン、ウィジェット、ロゴとアイコン
https://twitter.com/about/resources

Categoty in facebook / HTML / Service / Twitter

[ec-cube] 管理画面全体が左寄りで使いづらいのでセンターに揃える。

without comments

なんで左寄りなんでしょうね。

左寄りでもいいのですが、
（１）なんとなく使いづらく感じる
（２）時代遅れ感が否めない
といった理由からセンター寄せにさくっと修正してみました。

ついでにクライアントに納品する際には「ホーム」画面右側に表示される開発側からの「インフォメーション」欄は不要なので非表示にしています。

EC-CUBEバージョン 2.11.4 です。

CSSファイルのダウンロード

こちらの user_data.zip からダウンロードして解凍した後
　…/user_data/packages/admin/css/admin_contents.css（←上書きする）
　…/user_data/packages/admin/img/admin_bg.png（←新たに配置する）
でOKです。

またロゴは
　…/user_data/packages/admin/img/header/logo.jpg（←ログイン前のロゴ）
　…/user_data/packages/admin/img/contents/admin_login_logo.jpg（←ログイン後のロゴ）
にありますので任意に変更するとよいかと思います。

※上書きする前に既存のcssファイルのバックアップはお忘れなきよう。。

Categoty in CSS / EC-CUBE

[WP] ログインしてしている場合の分岐処理

without comments

記述方法

<?php if($user_ID) : ?>でやる場合と、
<?php if (!is_user_logged_in()) : ?>でやる場合の２つの方法がある。

例：WordPressの編集画面にダイレクトで飛ぶ

<!-- ログインしている場合 -->
<?php if($user_ID) : ?>
<p><a href="/wp-admin/post.php?post=<?php echo the_ID() ?>&action=edit" target="_blank">編集する</a></p>
<?php endif; ?>
<!-- /ログインしている場合 -->

とする。

<?php edit_post_link('編集する'); ?>

のように記述しても編集画面にダイレクトに飛べるが、
ターゲットが指定出来ない（ target=”_blank”が設定できない）

例：自分のアクセスをアクセス統計に入れたくない

自分のアクセスは極力アクセス解析に反映させたくない等の場合は以下の様にするとよい。

<!-- ログインしている場合 -->
<?php if (!is_user_logged_in()) : ?>
　（ここにGoogle解析のトラッキングコード）
<?php }else{ ?>
<?php } ?>
<!-- /ログインしている場合 -->

Categoty in PHP / WordPress

[WP] Magic Fieldsでグループを「duplicates」にした場合の表示方法

without comments

たまにハマるので

Magic Fieldsでグループを「duplicates」（コピー出来る状態）にした場合の表示方法をメモ

まず、wordpressとMagic Fieldsのバージョンの相性によって「Add duplicates」ボタンが反応しなかったり、スクリプトエラーが生じたりいまいち精度が安定しないので注意が必要だが、それを踏まえつつ…..。

こちらのマニュアル通りに行うとサーバによっては
Warning: Invalid argument supplied for foreach() in…
とforeachでエラーになってしまうので、下記の様に『if (is_array($myEvent)) {〜}』で括ってあげる

<?php
$myEvent = get_group('グループ名');
if (is_array($myEvent)) {
	foreach($myEvent as $event){ ?>
		<?php echo $event['フィールド名（01）'][1]; ?>
		<?php echo $event['フィールド名（02）'][1]; ?>
		<a href="<?php echo get('フィールド名（写真）'); ?>"><?php echo get_image('フィールド名（写真）'); ?></a>
	<?php } ?>
<?php }else{ ?>
<?php } ?>

Categoty in Magic fields / PHP / Plugins / WordPress

[JS] 簡単にオンマウスで画像を半透明化

without comments

使い勝手がすばらしい

以前にも同じ様な投稿をしてますが、jQueryを使用してロールーバーで画像の半透明にします。

※jQuery は http://scriptsrc.net/ からコピーすると便利です。

JSのソース

ファイル名は任意で構いませんが、仮に「rollover.js」とします。

$(function() {
	// Fade Slow
	var nav = $('.imgover_s');
	nav.hover(
		function(){
			$(this).fadeTo(300,0.5);
		},
		function () {
			$(this).fadeTo(300,1);
		}
	);
	// Fade First
	var nav = $('.imgover_f');
	nav.hover(
		function(){
			$(this).fadeTo(0,0.7);
		},
		function () {
			$(this).fadeTo(0,1);
		}
	);
});

使い方

↓<head>内に記述

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="./common/js/rollover.js"></script>

↓ゆっくり画像を半透明にさせる場合は「class=”imgover_s”」

<img src="./common/img/top_ban_01.gif" alt="bell" class="imgover_s" />

↓一瞬で画像を透過させる場合は「class=”imgover_f”」

<img src="./common/img/top_ban_01.gif" alt="bell" class="imgover_f" />

Categoty in JavaScript / jQuery

[CSS]画像を敷いてテキストを任意の位置に表示させる

without comments

キャンペーンサイトなどに有用

こちらも忘れがちなので、メモ。

デザインがやたらに凝っていたりする際にはざくっと背景に画像を敷いてテキスト要素は position:relative; や position:absolute; で好きな所に表示させるのが楽。

手抜きに見えるが、ソースもスッキリ奇麗になるのでいいと思う。

ソース

CSS

#main .dn {display:none;}
#main .frm_02 {width:990px;height:459px;background:transparent url(/common/images_ar/oc/img_02.jpg) repeat 0px 0px;position:relative;}
	#oc .frm_02 .txt01 {width:250px;height:115px;position:absolute; top:345px; left:75px;white-space: nowrap;line-height: 170%;}
	#oc .frm_02 .txt02 {width:250px;height:100px;position:absolute; top:345px; left:382px;white-space: nowrap;line-height: 170%;}
	#oc .frm_02 .txt03 {width:250px;height:100px;position:absolute; top:345px; left:682px;white-space: nowrap;line-height: 170%;}

HTML

<div id="main">
	<div class="frm_02">
		<h3 class="dn">あああああああああああ</h3>
		<p class="txt01">いいいいいいいいいいいいい</p>
		<p class="txt02">ううううううううううううう</p>
		<p class="txt03">えええええええええええええ</p>
	</div>
</div>

Categoty in CSS / HTML

[CSS] ブロック要素の横幅を要素の内容に沿わせる

without comments

テキストの周りにborderを指定する際に有用

毎度忘れてしまうので、メモ。

<p>や<div>といったブロック要素のデフォルトでは横幅が100%になってしまうので display:inline; を指定して中の要素に応じて伸縮するようにする。

ソース

右図の様なスタイル例

HTML

<p id="c_note01">12/13 00:00販売開始</p>

CSS

p#c_note01{
	border:1px solid #336600;
	color:#336600;
	padding:3px 7px;
	display:inline;
	}

Categoty in CSS / HTML

携帯からツイートのリンクは

without comments

携帯から「ツイート」ボタンでコメント付きのツイートをする

基本的にJSが使えないので

<a href="http://twitter.com/share?via=【アカウント名】&url=【httpから始るアドレス】&text=【テキスト(URLエンコードする)】">ツイートする</a>

などとする。

ご注意

URLエンコードはUTF-8で行いましょう。
エンコードや確認のデコードはアチラやコチラのサイトが便利です。

Categoty in mobile / Service / Twitter

[WP] 絶対に入れるプラグイン

without comments

個人的に「これだけは外せない」というプラグイン

Magic Fields / Magic Fields2
カスタムフォールドを自由自在に
（新バージョンの「Magic Fields2」にするか否かはWPのバージョンとの兼ね合いで判断）
WP Custom Search
カスタムフィールド単位で絞り込み検索を実現させる
（Magic Fieldsと併用すると最強）
User Role Editor
ユーザ毎に操作権限を管理
（更新担当者にはadminでログインさせないのが鉄則）
WP No Category Base
カテゴリーアーカイブのパーマリンクに/category/と入ってしまうのを強制排除
wp-pagenavi
Googleのようなページ送りにする
（若干古いがこれが一番使いやすい気がしている）
Duplicate Post
投稿をコピーする
（ダミーデータを作成する際に便利）
Peter’s Login Redirect
ユーザや権限によって管理画面のログイン直後に表示させる画面を変更する
（ダッシュボードは全く使わないので）
Post Category Height Edit
投稿画面のカテゴリ枠を可変させることが出来るようになる
disable-wordpress-core-update
「WordPress x.x が利用可能です ! 更新してください。」のメッセージを非表示にする
（プラグイン等の不具合を検証してからアップデートしたい為、またクライアントがアップデートしてしまうのを防ぐ為）

wp-pagenavi 使い方メモ

WPテンプレートのループの下部などにペースト

<div class="navigation" style="margin:0;">
	<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>

CSS

.navigation {
	display: block;
	text-align: center;
	margin-bottom: 30px;
	font-size:12px;
	color:#fff;
	padding-top:10px;
	border-top:1px dotted #ccc;
	}

.wp-pagenavi {
	clear: both;
	}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border:0px solid #FFFFFF;
	padding: 3px 5px;
	margin: 2px;
	}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	color:#fff
	font-weight:bold;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	}

.wp-pagenavi span.current {
	border:1px solid #738F3E;
	background:#738F3E;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	}

.wp-pagenavi .pages {
	display: none;
	}

Categoty in Plugins / WordPress

preを任意の横幅で改行させましょう

CSS記述例

Facrbookのソーシャルプラグイン

Twitterのウィジェットなど

なんで左寄りなんでしょうね。

CSSファイルのダウンロード

記述方法

例：WordPressの編集画面にダイレクトで飛ぶ

例：自分のアクセスをアクセス統計に入れたくない

たまにハマるので

使い勝手がすばらしい

JSのソース

使い方

キャンペーンサイトなどに有用

ソース

CSS

HTML

テキストの周りにborderを指定する際に有用

ソース

HTML

CSS

携帯から「ツイート」ボタンでコメント付きのツイートをする

ご注意

個人的に「これだけは外せない」というプラグイン

wp-pagenavi 使い方メモ

WPテンプレートのループの下部などにペースト

CSS

Newer Posted 30

Category

Archive