utfモバイルに公開しよう!

前回までのあらすじ

シラッキー先生の宿題でutfモバイル公開用のテンプレを作成することになったロベポリ。はたして二人はちゃんとテンプレートを作れたのでしょうか!
モバイルテンプレート講座編最終回です!

二人とも、ちゃんと宿題はやってきたかい??

バッチリ作ってきました!!

二人の作ったテンプレートを見てみよう!

05_ロベサンプル05_ポリンサンプル
二人のテンプレートはココからダウンロードできます!

二人が最初につくったテンプレに比べるとだいぶ良くなってるね。どんなところに気を付けて作ったのかな?

そうだなあ。画像を作成するときに、きっちり【推奨サイズ】にあわせて画像を作成しました!

最初から推奨サイズを参考に作ると、余計な編集をしなくてもそのままアップロード出来るからね。ちなみに各画像の【推奨サイズ】はFAQで確認出来るよ!

私の場合、前回は背景に画像を使ったのだけど、読みにくくなっちゃったから、色の組み合わせに注意して作ってみました!

ここはセンスの見せ所だね!設定したヘッダー画像や背景と違和感のない配色を心掛けよう。

           

初めてマウスで絵を描いてみたんだけど、思ったよりも簡単に出来たよ。

フリーソフトを使えば、ペンタブがなくってもそれなりに描けるものだよ。まずはたくさん触ってみて、何が出来るかを自分なりに研究してみると面白いかもね。

      

次は私もイラスト描いてみようかな☆

よし!じゃあ早速作ったテンプレートを【utfモバイル】に公開してみようか。

僕はPCから公開するよ!

PCから公開してみよう!!

05_PC手順

わたしはケータイから!

ケータイから公開してみよう!!

05_モバイル手順

「ジャンル」「色」は、テンプレートにぴったりなものを選ぼう。説明文も書けるから、テンプレの「モチーフ」や「イメージ」など、ユーザーに伝えたいことを簡潔に書いておこう。

utfモバイル開始記念!キャンペーン実施中

現在、utfモバイルにテンプレートを公開してくれた方の中から抽選で10名様を有料プラン「JUGEM PLUS」に無期限でご優待するキャンペーンを実施しています!
詳細はこちらをご覧ください!!
※上記キャンペーンは、終了いたしました。たくさんのご応募、誠にありがとうございました!

公開完了!!

公開したテンプレートのダウンロード数や、投稿されたコメントは【utfモバイル】のページで確認できるのね・・・・あ!!

どうしたの?ポリンちゃん!

私のテンプレート、もうダウンロードされてるの!!やったー!!

・・・・プフー!!

??

プフフ!もー、ポリンのオッチョコスットコドッコイ!コメントしたユーザーの名前を見てみなよー。

あ!ロべくんがダウンロードしたんだ!なんだー、ぬか喜びじゃん!

まあまあ、ポリンちゃん。まだ「utfモバイル」は始まったばかりで公開されているテンプレートが少ないんだ。っていうことは・・・

それだけみんなの目に触れやすいってことですね!

その通り!自分の作品を知ってもらうチャンスなんだ!じゃんじゃん作って、たくさん使ってもらおう!!

おーーー!!


なんだかすっかりテンプレマスターになった気分!

もうJUGEMマスターって感じだよね〜〜!

こら!二人ともまだまだ甘いっ!JUGEMには、まだ二人が知らない機能や出来ることがたくさーーーんあるんだからっ!

えーーーーーーー!!

二人が立派なJUGEMマスターになるまで、シラッキー先生が面倒見てあげるから安心しなさい!!

シラッキー先生!!



---------------------------------------------


Stepup!JUGEMでは、今後もJUGEMをより便利に楽しく使ってもらえる為の情報を掲載していく予定です!次回の更新をお楽しみに!


ケータイテンプレの裏技!

前回までのあらすじ

なんとかケータイテンプレを作り終えたロベルトとポリン。
そこで、二人のテンプレートが更に良くなるような小ワザを シラッキー先生が伝授してくるらしいが・・・

シラッキー先生、僕たちのテンプレートがもっと良くなるテクニックって何なんですか?

うん。まずは二人が作ったテンプレートをちょっと見てみよう。何か気付いたことはあるかい?

うーん。何となくだけど、前に使っていた公式テンプレートより全体的に詰まった印象があるかも。

その通り!テンプレートのカスタマイズで大事なのは、デザインや配色・そして「バランス」なんだ!

バランス??どうやって調整すればいいんですか?

例えば区切り線を変更した場合、画像に余白(縦幅)を持たせたり…



文字の大きさを変更してバランスを調節してみよう!



すごくスッキリして読みやすくなったわ!

これでカスタマイズに必要な要素は二人ともわかったかな?次はさらにブログを便利にできちゃう、フリースペースを使ってみよう!

フリースペースって何ですか??

フリースペースでは、ブログの中にブログ以外の場所を作れるんだ!4種類の場所が選べて、好きなテキストやタグを入れる事ができるんだよ。



自分だけのリンク集やテキストメッセージ・カウンターなどを設置してみましょう!

フリースペースを上手に使えば、いろいろな事が出来そう!

フリースペースの使い方は自分のアイデア次第!ここで紹介した以外にも色々な使い道があるから、色々と試してみよう!

自分ならではの使い方を考えてみましょう!

  • アクセス解析タグを入れてみる
  • メールアドレスを入れてみる(迷惑メールに注意!!)
  • アフィリエイトに挑戦してみる


---------------------------------------------


あれ?ロベくんのブログと私のブログって何か違う・・・

も〜。ポリンはオッチョコチョイだなあ。僕は有料プラン「JUGEM PLUS」を使ってるから、ブログページ内に広告が表示されてないんだよ。

有料版(月額315円)にすれば、広告が消えてスッキリ!!

ここまでカスタマイズしてみたら、確かに広告が邪魔に感じるなあ。

有料プランを使えば、もっと自由にケータイテンプレートをカスタマイズしたり、パスワード制のカギ付きブログにする事だってできちゃうんだ!

あちこちカスタマイズしたら、本当に自分の「オリジナル」って感じ!

うんうん!ブログをいっぱい更新したくなっちゃう!けど・・

あれ?ポリンどうしたの?なんか浮かない顔だね。

うん。。。ここまで頑張って作ったテンプレート、ほかのJUGEMユーザーのみんなにも使ってほしいな〜って思って。。

確かに。僕のウサラリーテンプレをみんなが使ってくれてたら、すっごいうれしいかも!

ちょっと待った!二人とも!そんなみんなの為に、いよいよ「モバイルutf」が始まるんだ!

えーーーー!!!

モバイルutf(UserTemplateFile)って??

自分で作ったオリジナルテンプレートを、他の人にもダウンロードして使ってもらえる機能です。
素敵なテンプレートをたくさん作って公開すれば、いつしかあなたは人気テンプレートクリエイターになっちゃうかも!? モバイルutfは近日公開予定です!

ロベルトくん、ポリンちゃん。キミたちの作ったテンプレートも「モバイルutf」でJUGEMのみんなに使ってもらえるんだよ。

えーーーー!!!

ここで二人に宿題です。今までのカスタマイズ講座を踏まえて、モバイルutf」で公開するテンプレートを作ってきてください!

シラッキー先生!!


ケータイテンプレを作ってみよう!〜携帯編

前回までのあらすじ

シラッキー先生の指導のもと、PCでケータイテンプレを完成させたロベルト。しかしPCよりケータイを使うことの多いポリンは、テンプレをケータイから作りたいのだが…

ケータイからもテンプレをカスタマイズ出来るって本当ですか!?

もちろん!ケータイ用管理者ページにある「デザイン・設定変更」からできるんだ。ケータイ用管理者ページはブログの下部【管理者ページ】から入ることができるよ。

でもケータイの操作ってスクロールするのがちょっと面倒なんだよなあ〜。

ロベルトくん、そんなことはないんだよ。ケータイの「7」のキーを押してごらん。

すごい!いきなり「デザイン・設定変更のページ」に飛んだ!

先頭に数字のアイコンがついているリンクは、それぞれのキーに対応したショートカットになっているんだ。「アクセスキー」っていうんだよ。

わざわざスクロールしなくていいなんて便利だね!これで簡単に行きたいページに飛べるよ!

アクセスキーを使ってみよう!

それじゃあヘッダー画像は前回ロベルトくんと一緒に作ったから、今回はブログ背景画像の設定をしてみよう。まずは画像のアップロードからしてみようか!

シラッキー先生、ケータイから画像をアップロードするにはどうすればいいですか?

モブログ用のアドレスに本文と件名を入れずにケータイの写真を送ると直接画像管理ページにアップできるんだ!複数送っても大丈夫!

一度に何枚もケータイから画像を簡単にアップロードできるから楽だね!

アップロードが終わったら「デザイン・設定変更」のページからブログの背景画像を設定してみよう!

画像を変更してみよう!

できた〜! でも…あれれ?背景を変えた途端文字が見えなくなっちゃった…。

も〜。ポリンはオッチョコチョイだなぁ。「背景画像」と「文字色」の暗さが同じだから、ブログの文字が見づらくなってるんだよ。

心配しなくても大丈夫!文字色もケータイから簡単に変更できるんだ。

文字色は選ぶだけ!

ケータイにもPCと同じカラーパレットがあるよ!アクセスキーも使えるから選びやすいね!

よく気付いたね。カラーパレットのほかにも、サンプルカラーや上級者向けのカラーコードも利用できるから、自分好みの配色を楽しんじゃおう!

背景に合わせて、文字の色や大きさを変えてみよう!

わーい!できたーっ!

ポリンちゃん上手にできたね!これで空いてる時間にいつでもケータイからテンプレ編集ができるよ!
自分だけで画像を用意するのが大変!という人には、JUGEMがサンプル画像を配布しているよ。まずは試してみよう!


初めてテンプレートをカスタマイズしてみたけど簡単にできてうれしいな。

本当だね!僕はもっと自分のテンプレートをカッコよくさせたい!

二人とも!実はちょっとしたテクニックで、もっと見栄えを良くすることもできるんだ!次回はケータイテンプレでできる小ワザテクニックに挑戦してみよう!

シラッキー先生!!


ケータイテンプレを作ってみよう!〜PC編

前回までのあらすじ

JUGEMにケータイ用テンプレート編集機能が追加されたことに気がついたロベルトとポリン。WEBデザイナーのシラッキー先生に教えてもらいながら、テンプレートカスタマイズに挑戦することになったのだが・・・

二人とも、作りたいテンプレートのイメージは固まったかい?

僕はこういうの!  



私はこんなの!  



ロベくんはイラストを使って、ポリンちゃんは写真を使ったテンプレートだね。

でも先生。作りたいテンプレートは決まったけど、肝心なテンプレートにピッタリのイラストを持ってないんです。

持ってないなら作ってみればいいんじゃないかな?無料のソフトを使えば、結構簡単に作れるものなんだよ。

フリーソフトを使って画像を作ってみよう!

まずはテンプレートの顔とも言える【ヘッダー画像】を作ってみよう!!

おーー!!

ヘッダー画像ってどんなの?

  • テンプレの一番上にくる画像のこと
  • 見本
  • 推奨サイズは幅250ピクセル×高さ自由(50px前後がオススメ)です。イラストや写真を加工して作ってみましょう!


---------------------------------------------


シラッキー先生出来ました!  



私も携帯のカメラで撮った写真で作ってみたわ!

二人ともなかなか上手に出来たね!それじゃあ早速、今作ったヘッダー画像を実際にテンプレートに適用してみよう!

ヘッダー画像は、メニューの「ケータイ設定」→「テンプレートかんたん編集」から見られるよ!

あれ?私の管理者ページには、そんなページ見当たらないよ??

もー、ポリンはオッチョコチョイだなあ。いまポリンが見てるページは【旧管理者ページ】だよ。ケータイテンプレート編集は【新管理者ページ】のみの機能なんだ!管理者ページの切り替えはココから出来るよ!



新しい管理者ページに切り替えてみよう!

新しい管理者ページには、今までにない新しい機能がたくさん!ポリンちゃんもこの機会に触ってみるといいよ。

そうだったのね!いろいろと研究してみよ〜〜っと!

シラッキー先生、ヘッダー画像は変えたけど他はどこをいじったらいいんですか?

他にもリスト画像や区切り線の変更が出来るよ。リスト画像は「数字」か「●」の選択ができるし、区切り線は★などの記号も使えるんだ。

そこはわざわざ画像を用意しなくてもいいんですね。それならお手軽☆

ヘッダー画像を変更したら、画像にあわせて文字や背景色も変更しよう!

それぞれの色を選択してみよう!

カラーパレットから好きな色を選択するだけですね。

もちろんカラーコードでも指定出来るから、PC版テンプレートをカスタマイズしている場合、簡単に色を合わせることも出来ちゃうよ。



---------------------------------------------


ロベルトが実際にモバイルテンプレートを作ってみたよ!

わ!見栄えが全然違う!!

すごーい!あっという間にオリジナルテンプレートになっちゃった!

ヘッダー画像を作った要領で、フッター画像・リスト画像や区切り線の画像も作れば、よりオリジナルなテンプレートになるよ。世界で一つだけのテンプレートをみんなも作ってみよう!!



あれ?ポリンどうしたの??なんか浮かない顔だね?

うん。私はPCよりもケータイの方が使い慣れてるから、ケータイでもカスタマイズ出来たらなって思ったの。

ポリンちゃん!!JUGEMではケータイ版管理者ページからもほぼ同じ編集が可能になったんだ!次回はケータイからの編集に挑戦してみよう!!

シラッキー先生!!


ケータイテンプレートをカスタマイズしたい!

最近JUGEMをケータイで見てると、見たことないテンプレートを使っている人が沢山いるんだよ

そうそう!私も気になってたんだよね。

あ!JUGEMに新しい機能が追加されてる!ケータイ用テンプレートもカスタマイズできるようになったんだ!

本当だ!でも、私、何も知識ないのにテンプレートなんてカスタマイズ出来るのかな??

確かにどこから手をつけていいのかサッパリだね。

でもロべくん、「カンタン編集」って書いてあるよ!PCのテンプレートよりは簡単にできるんじゃないかな。

そうだ!WEBデザイナーのシラッキー先生ならなんでも知ってるよ。詳しくきいてみない??

そうだね、そうだね!そうと決まれば善は急げよ。聞きにいってみようー!


やあ二人ともどうしたんだい?

JUGEMのケータイテンプレートのカスタマイズについて詳しく教えてほしいんです!

なるほど。確かに「テンプレートのカスタマイズ」って聞くと、ちょっと難しそうって思っちゃうかもしれないね。でも、JUGEMのケータイ用テンプレートのカスタマイズはほんとうにカンタンなんだ!



僕たちでも出来ますか??

もちろん!まず、最大の特徴はオリジナルの画像を入れられるようになった事! 自分で撮った写真や、描いた絵なんかをテンプレにする事ができるんだ。
そして、文字色を自分で設定できる部分も大幅にアップ!画像と文字色をカスタマイズすれば、君たちだけのテンプレができるってわけ。




設定できる箇所を簡単にまとめてみたよ!

こんなにたくさんの項目が変更出来ちゃうんですか!すごーい!!

その他にも部分的に文字の大きさを設定したり…


記事リストに更新日やコメント数を表示できるようになったんだ。



あー!これで友達のコメントとかもすぐに気づけるようになるんだ!うれしい!

まだまだ設定できる項目は盛りだくさんだから、使いながら色々試してみるといいよ。

そのほかにもこんな機能追加!

  • 記事リストの表示件数をモバイル独自に設定できる。
  • アーカイブのリストページ、カテゴリリストにも表示件数設定追加。
  • ユーザブログに月別アーカイブページを追加

ふむふむ。でもやっぱり自分らしいテンプレートにするには、画像とかも変更してみたいなあ。

そうだよね。私は、自分の大好きなお洋服の写真を使ってテンプレート作ってみたい!

僕はJUGEMキャラコンでおしくも落選した「ウサラリーくん」をテンプレートにしてみたいな。でも自分たちで画像を編集したりってやっぱり難しそう。。

二人とも作りたいテンプレートがあるみたいだね!じゃあまずは、 どんなテンプレートが作りたいか、イメージを膨らませてみよう!そこから先のサポートは、このシラッキー先生に任せなさい!



シラッキー先生!!

次回へつづく

1

最新の記事
StepUP!JUGEMからの
お知らせ
■ お勧めブログ投稿フォーム■
プロフィール
カテゴリーから記事を読む
月別で記事を読む
Stepup!JUGEM内で検索