ソーシャルサービスのガイドラインを調べてみた

今使用しているサービスのアイコンをつくりたく、
各サービスのガイドラインを調べてみたので、まとめてみました。
(私がよく使用しているものだけになっていますので、あしからず!)

ガイドラインの内容についてはリンク先のサイトよりご確認ください。

Facebook

ブランドリソースセンター

Twitter

Twitter / Logos & Brand

Google

Google 使用許諾

Tumblr

Trademark Guidelines | Tumblr

Instagram

Use of the Instagram logo • Instagram Help Center

Yahoo

Yahoo! JAPANのページ全般 ヘルプ – Yahoo! JAPANへのリンクを設定する

Facebook,Twitterはガイドラインもしっかりしてるので、使いやすいですね。
(Facebookはよくロゴ使っているのを見かけるような気はしますが…)
それ以外のところはよくわからないところが多いです :(

今回調べていてロゴの表記と商標の表記も違うものがあったため(大文字・小文字など)、
ブログ内の記述も変更しています。
(調べていったつもりですが、抜けがあったら、すいません…)

個人的にはFirckrのアイコンが知りたかったのですが、
どこにも記載されていない感じが…
他のサービスもまたわかるものがあれば追記します。

追記[2013.04.22]:Pinterest

Brand Guidelines | Pinterest for Business

WordPressにアバターアイコンを表示する

サイドバーにTwitterのアイコンを表示したい!と調べていましたが、
GET users/profile_image/:screen_name | Twitter Developers
画像のソースURLとしては使えないようなので、
今回はGravatarのアイコンを表示する方法を試してみました。

公式:Gravatar

導入時のバージョン:Wordpress 3.3.2

自分のGravatarのアイコンを表示する

参考:Gravatar の使い方 – WordPress Codex 日本語版

sidebar.php

<?php echo get_avatar(get_the_author_meta('user_email'),48) ?>

コメント欄にGravatarのアイコンを表示する

comments.php

オリジナルテーマにした際に削除してしまったコメント欄のアイコン設定。

<?php echo get_avatar( $comment, 48 ); ?>

コメント周りはあまりテンプレート設定できていないので、
もう少し変更していきたいと思います

追記:管理画面のXML-RPCにチェック入れておくこと!

書いたつもりが忘れていました…

WordPressで自動挿入されるタグを削除する

これまで記事内のタグ気にしてなかったのですが、
空タグや謎の空白スペースが生まれてしまっていたので、
思い切って全記事ソース見なおしてみました。

ほとんどコピペになってしまいますので、自分のメモもかねてまとめておきます。

導入時のバージョン:Wordpress 3.3.2

<p><br>の自動挿入を削除する

便利機能?「投稿の編集」画面での自動挿入をなくしてしまう。
参考:wordpress 投稿記事に自動で付いてしまうpタグを削除する方法 | WEBデザイナーのしおり

single.php

<?php remove_filter ('the_content', 'wpautop'); ?>
<?php the_content(); ?>

画像挿入時に自動挿入されるリンクタグ・属性を削除する

サンプル画像はローカルで試した時のものですが、こんな感じでスッキリします!
参考:画像を投稿に挿入するタグをカスタマイズ | データベースに接続できません

functon.php

function my_remove_img_attr($html, $id, $alt, $title, $align, $size){

	$html = preg_replace('/ width=&quot;d+&quot;/', '', $html);
	$html = preg_replace('/ height=&quot;d+&quot;/', '', $html);
	$html = preg_replace('/ class=&quot;.+&quot;/', '', $html);
	$html = preg_replace('/ title=&quot;.+&quot;/', '', $html);

return $html;
}

add_action( 'get_image_tag', 'my_remove_img_attr', 1 ,6);

ほんとは画像タグは閉じタグの”/”も削除してしまいたいのですが…
もう少し調べてみないと :(
(本番では手動で<div>追加と閉じタグの削除をおこなっています)

補足:WordPressの隠しオプション画面

「options.php」を入力すると見ることができるオプション画面。
こちらもあわせて設定しておくとよさそうです :D
参考:WordPressで画像投稿時に自動で入るリンクを取る方法 | WEB DESIGN (B)LOG

島根をさんぽ

Flickrでさんぽ?http://www.flickr.com/photos/aiooxx/tags/shimane2011/

写真整理していたら、去年の島根旅行の写真が出てきましたので、まとめてみました。
しまね海洋館アクアス・出雲大社・石見銀山行ってました。
写真は残ってなかったです…

旅館は「絶景の宿御所覧場」に泊まりました。超自然!

出雲大社は本殿みれなかったし、また行きたいな ;)

プラグインなしでWordPressに関連記事を表示する

月イチ更新なこのブログもようやく掲載10件超えてきたので、導入することにしました :)
私の好きなプラグインを使わず!の方法です。
導入時のバージョン:Wordpress 3.3.2

参考:WordPressスニペット – かちびと.net
参考:プラグインを使わずWordPressに9の機能をつける | Webクリエイターボックス

変更したところ

  • 記事が少ないため(!)、関連する記事がない場合がある。(→その場合は関連記事のボックスごと非表示)
  • アイキャッチ画像表示したい。(LinkWithinっぽく!)

single.php

<?php
$tags = wp_get_post_tags($post->ID);
    if ($tags) {
        $first_tag = $tags[0]->term_id;
        $args=array(
            'tag__in' => array($first_tag),
            'post__not_in' => array($post->ID),
            'showposts'=>4,
            'caller_get_posts'=>1
        );
        $my_query = new WP_Query($args);
        if( $my_query->have_posts() ) {
            echo '<div id="related"><h3>Related article</h3><ul>';
            while ($my_query->have_posts()) : $my_query->the_post(); ?>
                <li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?><?php the_title(); ?></a></li>
            <?php endwhile;
            echo '</ul></div>';
        }
    } 
?>

function.php

<?php
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( true );
?>

関連記事表示

関連記事

今回でWordpressにいろいろスニペットあることがわかったので、
ブログにもどんどん導入していこうと思います! :D

アメブロカスタマイズしてみました(Ver.1)

いつも作業の合間にちょこちょこやってるピグの日記をこっそりつけてたりしたんですが、
初期のデザインのまま、ほったらかしにしていたので、カスタマイズしてみました。
アメブロ:のんびりまったりピグ日記

カラーイメージ

今回はちょっと可愛いイメージにしました。

フォント

フォントは「しねきゃぷしょん」を利用させてもらいました。
漢字も対応してるとか素敵!
配布元:#Font – Cinecaption

編集はcssとカラムの配置

基本、cssの編集しかできないんですね :(
追加でなにか入れたい場合はフリーエリアを駆使するようです。

フリーエリア

フリーエリアを使ってカテゴリのところを画像ボタンにしてみました。

画像は画像フォルダからとってきているのですが、

gifだと謎のぶつぶつが発生…何故かpngなら大丈夫でした。
(こんな現象なっているのは私だけなのか…)

アバターの着替えやライフのクエストこなすくらいしかやってないですが、
息抜きに遊ぶにはちょうどいいかなーと思います :)

WordPressにページ内検索を追加する

最近になってようやく仕組みがわかってきたので、ページ内検索を追加してみました。
(検索フォーム自体に需要があるかはわかりませんが、私自身がよく使うものでもありますので、導入…)

導入時のバージョン:Wordpress 3.3.1

テンプレートに最低限のphpファイルしか導入していなかったため、ファイルの作成手順をメモ。

sidebar.php

今回は右のサイドバーに挿入してみました。

<?php get_search_form(); ?>

以下はカスタマイズの必要あれば。
なくても自動でwp-includesにあるテンプレートを読み込んでくれるようです。
参考:Creating a Search Page – WordPress Codex 日本語版

今回はcodexを基にファイルを追加してみました。

searchform.php(検索フォームの表示)

こちらは「wp-includes」のテンプレートより改良。

  • submitボタンを画像に変更。
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
	<div>
		<input type="text" value="" name="s" id="s">
		<input type="image" id="searchsubmit" src="<?php bloginfo('template_url'); ?>/images/bn_search.gif" value="検索">
	</div>
</form>

search.php(検索結果画面の表示)

  • 検索ワード・検索結果件数の表示
  • if~elseによる条件分岐
  • <?php if(have_posts()): ?>
    	<h3 class="subtitle">「<?php the_search_query(); ?>」の検索結果:<?php echo $wp_query->found_posts; ?>件</h3>
    	<?php else : ?>
    	<h3 class="subtitle">「<?php the_search_query(); ?>」は見つかりませんでした。別のキーワードをお試しください。</h3>
    	<?php get_search_form(); ?>
    <?php endif; ?>

    検索結果

    検索結果が0件のとき

    タグ1つで検索フォームいれれるなんて、便利。

ブログのデザインを(プチ)リニューアルしました(Ver.1)

まだやりたいことが処理しきれていない状態ですが、
(todoに溜まっているタスク達…)
思っていた感じのものが仕上がってきたので、こちらをデザインver1.0とします。

極力画像を使用しないシンプルなブログを目指して—
簡単に変更した箇所を記載。

カラーイメージ

割合が厳密ではありませんが、私の中のイメージで。
主な2色に+1すると、なんとなくいい感じになるような…

カラーイメージ

ロゴの変更

少し丸みを帯びました。
卵をモチーフにしているので、やわらかい印象をつけたかったのです。

ロゴの変更

titleにツールチップ

ツールチップを導入してみました。
参考:TITLE属性を利用した簡単ツールチップの作り方 jQuery編 :: 5509

titleにツールチップ

メニューのアクティブ

オンマウスでストライプがススーっと動きます。(超、地味!手軽にgifアニメです)

メニューのアクティブ

外部URLは別窓表示

jsでtarget設定とclassを追加する
参考:簡単に外部リンクを設定するjqueryベースのjavascript | sawa memo

jQuery(function($){
/*外部リンクにのみtarget=blank*/
	$("a[href^='http://']").not("[href*='http://25egg.com/']").attr("target","_blank");
	$("a[href^='http://']").not("[href*='http://25egg.com/']").addClass("blank");
});
外部URLは別窓表示

フッター

以前はfrickrやらfacebookやらのウィジェットを入れていましたが、
思い切ってコピーライトだけにしました。

フッター

今後も調整を加えつつ、より見やすいブログを目指していきます :)

追記[2011.11.21]:スクロールするとページトップへ戻るボタンを表示

1つ忘れていましたので、追記…
戻るときの速さは”ゆっくり”に変更してます。
参考:Animated Scroll to Top [web designer wall]

$(document).ready(function(){
/*ページトップへ戻る*/
	$("#pagetop").hide();

	$(function () {
		$(window).scroll(function () {
		  if ($(this).scrollTop() > 100) {
		    $('#pagetop').fadeIn();
		  } else {
		    $('#pagetop').fadeOut();
		  }
		});
		
		$('#pagetop a').click(function () {
			$('html,body').animate({ scrollTop: 0 }, 'slow');
			return false;
		});
	});
});
pagetop_off

Facebookページ作るときに参考にしたサイトのまとめ

個人的に全く使ってないFacebookですが(…)
Facebookページ作るときに参考にしたサイトのまとめてみました。

Facebookページをつくりたい

参考:Facebook ページ(旧ファンページ)の作り方 | nanapi [ナナピ]

オリジナルページを作成したい(iframe)

参考:iFrameによるFacebookページ作成法と6つのポイント|Webpark
横幅520px、iframeで読み込みなのでサーバーも必要になります。

Facebookと○○を連動したい

参考:involverの使い方|Facebook研究所
25eggではtwitterとfrickrを連携させています。
involverの無料で導入できるのは2つまでです。

ブログの更新情報をウォールに流したい

参考:RSS GraffitiでFacebookページをグレードアップ | モデルケース|次世代研究所

ウォールにのるテキストと画像を変更したい(OGP設定)

参考:FacebookページにiFrameを組み込もう|Social Media Experience
参考:プラグインを使わずにWordPressにFacebook用OGP(Open Graph Protocol)を設定する | CMS | ウェビンブログ
私の大好きなプラグインなしの設定!
まずアプリを作成して→Wordpressのソース内に書き込みします。

念のため、OGP設定確認しておく

公式:Debugger – Facebook開発者
先ほどのOGP設定デベロッパーサイトで確認を。

ブログやサイトにFacebookページのアピールをしたい

公式:Social Plugins – Facebook開発者
「Like Box」がFacebookページの設定です。
facebookのサイトはブックマークしないと、なかなか辿りつけない…

最後に…

25eggのFacebookページのご紹介

他にも「ifameのスクロールが!」とか「ファン限定ページどうすんの?」とかいろいろありますが、
基本設定はこんなところかなと思います。

dlをtableっぽく段組レイアウトにする

dltable

テーブル以外で段組みにするのどうやるのーって聞かれたので、考えてみました。

その1:dt,ddに横幅指定float

dt,dd共にfloat指定する方法。
対象ブラウザ:IE6(IETester),IE7,IE8,FF5,Chorme12,Safari5

その2:dtにfloat,ddにmarginでdt分の横幅指定

ググるとよく出てくる手法。一般的にこれが多いんでしょうかね。
対象ブラウザ:IE6(IETester),IE7,IE8,FF5,Chorme12,Safari5

その3:table-cell!

これいけるかと思ったのですが、
今回みたいに多段だと難しそうでした:(
float以外のやり方ができそうなら追記してみます。