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

25egg

春くらいから少しずつ改修をすすめてたのですが、まとまってきた気がするのでver1.2にしたいと思います。

見た目がほとんど変わってないのですが、WordCamp Kobe 2013でいろいろメモしたことを実践しつつ管理しやすいように書き換えてみました

カスタムメニュー

ナビゲーションをアクティブにするのどうするのかと思ってたところで、

wp nav menuと聞いて解決しました。

これは今後も使えそう!

25egg_menu

サイドバーのウィジェット化

これもCampいく前までは自分のブログだし、ウィジェットいらんかなと思ってたのですが、

投稿数の表示ができる…!ということで早速実装しました :)

25egg_side

カラーイメージ

コンテンツメインにしたかったので、思い切って色を減らしました。

アクティブや文章内の色はそのまま残しています。

25egg_color

ロゴの変更

誰も気づかなそうなので…ロゴも今回フラットデザイン採用しています。

logo_re

サムネイルサイズの変更

前回は黄金比を使って横長のサムネイルを採用していましたが、

OGPの画像とか正方形が多いので使いまわせるかわかりませんが正方形に変更しました。
(まだ全記事変更していません…)

一覧表示に抜粋文を掲載

タイトルセンスもあまりないため、抜粋分も入れることにしました。
今までの記事が『続きを読む』を考えてなかったため、そのまま使ってます。
<?php the_excerpt(); ?>

まとめ

スマートフォンのテーマを前回作っていたのですが、見直しかけたくて一旦PC版に戻しています。

今回表示や構成も少し改良してますので、スマートフォンでのコンテンツの見せ方…

も考慮しながら構築できればなと思っています。

[16D]アイコン100個できました

16D

16D 25egg-DOT-

実はかなり前に100個できて公開はしていたのですが、
その後微調整をしつつ、カテゴリ別に分けての更新に変更してみました。

最終目標は1000!

素材サイトというからにはたくさん作りたい。
先は長いけど、がんばります!
今回は汎用的に使えそうなアイコン100!にしてみましたが、
かわいい系とか背景に使えそうなのもまだある感じなので、まとめようかなと…

次は200個つくって、またブログに書けるように…
to be continued…

ニンテンドー3DSからTumblrへ画像投稿できるようになったので、ブログはじめてみました

先日、公式ツールとして『ニンテンドー3DS画像投稿ツール』が公開されました。
ニンテンドー3DS画像投稿ツール|Nintendo

『とびだせどうぶつの森』『トモダチコレクション 新生活』が対象ソフトです。
もうすでにどうぶつの森を続けていない方が多いと思いますが、
私はまだまだゆるーくやっていくつもりなので、Tumblrで日記つけてみることにしました。

Tumblrに登録して、ブログを作成

今回で(たぶん)3回めの新規登録画面です、Tumblrただいま!
特に説明はいらないと思いますが、メールアドレスもろもろ入力して登録します。

Tumblr

  • 上の歯車アイコン→ブログURL・プロフィールアイコンの設定
  • 右メニューのブログURL→右上のカスタマイズでテーマの変更

テーマは『Astronaut』をカスタマイズして、色の変更だけ行いました。

ゲーム内でカメラ撮影する

こちらは従来通り、ゲーム内でLRボタン同時押しで撮影。

インターネットブラウザから画像投稿ツールにアクセス

ニンテンドー3DS画像投稿ツール|Nintendo

Home画面の右上の地球儀からブラウザをひらいて、ツールにアクセスします。
文字入力めんどくさいので、上記アドレスのQRコード使ってアクセスした方が楽かも…
こちらはカメラ起動後、左の『格子マーク』で読み取りできます。

ログインして、アプリ認証する

めちゃめちゃ重たいブラウザでTumblrにログイン。
アプリの認証確認画面がでるので、『許可』します。
私はTumblrしか試していませんが、おそらくTwitterも同じ動作だと思います。

写真を選んで投稿

写真データから写真を選んで、コメントをつけます。
自動的に『#どうぶつの森』『#AnimalCrossing 』2つのタグをつけて投稿されるようになります。

もう少しお手軽かなと思いましたが、ブラウザの重さがネック。
ただ、ゲーム起動中もできるのはいいかな…!

せっかく作成したので、今までの写真全部掲載してみました。
これからものんびり更新していきます。

あっち村日記

ブロガー名刺を新調しました

namecard

使っていた名刺がなくなってしまったので、名刺新調しました!
安いのと納期ギリギリでも直接とりにいけるので、今回もプリスタにしています。

プリスタ
myプリスタ。登録で初回だけ20枚お試しできるんです ;)

事前に紙サンプル取り寄せていたので、『エスプリVエンボス』にしました。
前のものよりすこし黄色がかった感じです。

作ってから気づいたのですが…
Facebookのアドレス掲載するの忘れていました…
今回は焼きまわしてしまったので、次のデザインつくるときは忘れないようにします…

個人的に参加しているものはこのブロガー名刺配っていますので、
どこかのセミナーや勉強会で見かけましたらよろしくお願いします!

[16D]16×16のドットアイコン素材サイト オープンしました

16D

16D 25egg-DOT-

今、ドットにどれだけ需要があるかわかんないですが、
16*16サイズ限定のドットアイコン素材サイトつくりました。

スマートフォンサイトが流行りだしたくらいに携帯サイトの練習がてらに作っていたものです。
思いつきで作ってしまったので、素材の数が少ないですが、
そのまま転載とかでなければ特に問題ないので、どうぞご自由に。

ちょこっとだけ制作メモ。
このあいだからドットインストールでJavascript/JQueryの勉強しているので、少しだけ取り入れました :)
参考:ドットインストール

ロゴ

素材サイトということでフォルダアイコンでダウンロードをイメージ。
16 Dot で16D。25eggといい、数字との組み合わせが好きなのかも。

カラーバー

右上のアイコンクリックでスライドしてきます。オンマウスでアイコン背景の色変更。
(アイコン自体は透過処理してます)

まずは100個目指して頑張ります!

実はもう少しだけストックあるので、整理してアップしていきます。

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

ごにょごにょしてたら、前のデザインから変わってきたので、
ver.1.1くらいにしようと思います。
だんだんシンプルになってますが、ブログは画像もいっぱい使うので、ちょうどいいかなーと思っています :)

CSS transition

テキストだけでもナビゲーションわかやすくするようにすこし動きをつけてみました。

nav li a{
	transition: all 0.1s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}
nav li a:hover{
	margin:3px 0 0 0;
}
transition

CSSスプライト

background-positionを使っています。実際は3つのアイコンで1セットの画像。
(昔はマウスオーバーで使ってた手法なので、懐かしい :D)

CSSスプライト

フォームデザイン

こちらは簡単にですが、CSS追加しました。

input, textarea{
	padding:5px;
	border:1px dotted #999;
	background:#eee;
}
フォームデザイン

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

3月にカスタマイズして、あまり日にちは経っていませんが、
アイランドのコンテンツが増えたこともあり、デザインを少し変更しました!

カラーイメージ

25egg内のサイトは白+青をベースにつくっていましたが、
かわいいイメージに変更したかったので思い切ってピンクを採用してみました :D

アイコン

アイランドも増えましたので、ボタンのサイズを変更して正方形にしてみました。
マイページを見る限り、あと2つコンテンツ増えそう :)

プロフィール

今まで存在に気づいてなかったのですが、
ここもカスタマイズできるようだったので、今回のブログの背景画像を採用。
ついでにプロフィールも書いてみました。

Ameba プロフィール

画像を変えるだけでも随分雰囲気変わりましたー :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