2012 04123456789101112131415161718192021222324252627282930312012 05

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--年--月--日(--) | スポンサー広告 | TB(-) | CM(-)

サイドナビのキャラクター紹介設置方法

ブログサイドナビのキャラクター紹介の設置方法を教えて欲しいと
だいぶ前に言われたことを思い出したので解説します。
HTMLとか使うけど、ソースはコピペすればおkなので簡単です。



20101222_05.gif
サイドナビ幅200px程度を想定した解説となりますので
うちのブログよりサイドナビが広いor狭いという方はそれぞれアレンジしてください。
(最後に一応解説入れてあります)




■まずは画像を準備する

画像処理ソフトは人によって使用しているものが違いますので詳細は割愛します。
サイズは60×100pxにトリミングするときれいです。

私はキャラセレ画面でPrintscreenボタンを押し(SSを撮る要領)
そのまま画像処理ソフト上で新規ファイル作成→コピー
デスクトップのスクリーンショットを作成、そこからキャラ部分を切り抜いています。
SSから切り抜いてもよいのですが、画質が悪いのであまりお勧めしません。
キャラクターシミュレーターさんを使うのもよいと思います。

画像の保存形式はgifpngがきれいです。
bmpは掲載できませんので気をつけてください。

作った画像はアップロードしてください。





■設置エリアを作る

今回はFC2ブログで解説しますが
同じような機能はどこのブログにも付いていると思いますので
別ブログだけどやりたいって人は自力で探してください。
※それぞれ仕様が異なります。うまく設置できないブログサービスもあるかも



FC2ブログ管理ページにログインし、以下の順番でフリープラグインを設置します。
20101222_04.gif

20101222_03.gif

20101222_02.gif
フリーエリアを追加すると、フリーエリア編集画面に移動します。





20101222_01.gif
必要な項目を埋めます。
どこに何が反映されているのかは当ブログ内でご確認ください。





■キャラ紹介HTMLを編集する

フリーエリアの内容変更部分にHTMLソースを流し込みます。
メモ帳あたりで編集しましょう。

下記ソースが1キャラ分です。

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="キャラ画像URL"></td>
<td><b>名前 base/job<br>
ステータスタイプ<br>
キャラについてのコメント<br>
<a href="わむてるらぶさんのスキルシュミレートURL" target="_blank">スキル</a>
<br>
</td>
</tr>
</table>
<br>


編集箇所は赤文字になっている部分です。
それ以外の場所をいじるとレイアウト崩れを起こす可能性があります。
ブログ全体が崩れることもありますので、レイアウト崩壊したら一旦ソースを削除しましょう。
特に " を消してしまわないように。
消すなら始まりと終わり両方消しましょう。



複数キャラ掲載したい場合は同じものをコピペしてください。
スキルは1キャラあたり1パターンしか入らないようになっていますが

<a href="わむてるらぶさんのスキルシュミレートURL" target="_blank">スキル</a><br>
<a href="わむてるらぶさんのスキルシュミレートURL" target="_blank">スキル</a>

とすることで、何パターンも載せることができます。
改行が必要な場所には<br>を忘れずに。
逆に不要な場合は該当箇所を丸々削除してください。

※入力エリアには制限文字数があります。
キャラ数が多い場合、全部入りきらない可能性があります。
フリーエリア設置数に制限が無ければフリーエリアを複数作ることで回避可能です。





↓実際WLの紹介で使用しているソースです。

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="http://blog-imgs-52.fc2.com/s/a/m/samaringo/samari.gif"></td>
<td><b>砂毬(さまり) 105/37<br>
INT>DEX>VIT</b><br>
現垢最初の転生&初の3次職。一番レベルが高いくせに一番デスペナ率も高いかわいそうなコ。<br>
<a href="http://uniuni.dfz.jp/skill4/wlk.html?10rEeKoXfbdqabsoeKgHfNacdoeA1koaoeoqofhcY" target="_blank">◆WLスキルはこちら</a>
<br>
<a href="http://uniuni.dfz.jp/skill4/wlk.html?10rEeKoXfbdqabsoeKgHfNacdoeA1koaoebqofhcY" target="_blank">◆HWスキルはこちら</a>
</td>
</tr>
</table>
<br>


再編集時、ステータスタイプに使用している半角片括弧が
ナゾの文字列に変身すると思いますが、仕様ですのでそのままで大丈夫です。
ナゾの文字列が気になる人は全角片括弧に変えると解決します。



入力が終わったら設定ボタンを押してブログに反映させます。
その後プラグイン設定画面に戻り、配置設定をしてください。
デフォルトだと一番下になってるかと思います。





■サイドナビ幅が異なるテンプレの人

上のソースをそのまま貼り付けて見て文字の右側が切れる場合は
サイドナビの横幅が200px以下である可能性があります。
その場合は、ソースの冒頭
<table width="200" border="0" cellspacing="0" cellpadding="0">
テーブルの横幅数値を変更してください。
数値を200より小さくすると文字入力スペースが狭くなります。
195、190・・・と小さくするか、98%(%も半角)にすると収まりがよくなります。
(用はサイドナビ幅を100%とするのでそれより狭ければきれいに収まるはず)
大きくすると広くなります。
画像の位置は変わりません。





■ちなみに

名称未設定-3
ブログ管理ページ下部の詳細設定の改行の扱いを
『HTMLタグのみ』にすると、ブログ本文でも表が使えるようになります。
ただし改行部分にはすべて<br>を入れねばなりません。
私のようにクソ長い記事を書く人にはあまりお薦めできまてん⊂⌒~⊃。Д。)⊃
いくつ<br>入れればいんだよってww



以上、よきROブログライフを!




少しはお役に立ちましたでしょうか


2012年12月24日(Mon) | お役立ちかもしれない | TB(-) | CM(29)

No title

難しいからもっと簡単に!!
[ 2012/12/24 01:07 ] [ 編集 ]

cheshaさん

Σ(゚Д゚≡;゚д゚)!1
[ 2012/12/24 21:32 ] [ 編集 ]

ありがとうございます

参考にさせていただきました!ありがとうございます(*´д`*)
[ 2013/01/24 12:28 ] [ 編集 ]

紅葉 さん

コメントありがとうございます(n‘∀‘)η
活用していただけたようで私もうれしい限りです!
せっかくなのでリンクもいただいちゃいました。
よろしくお願いします。
[ 2013/01/24 20:35 ] [ 編集 ]

ありがとうございました!

参考にさせていただきました、ありがとうございます。
あまりROの事を書いてないblogでスミマセン(ROについてはSNSで書いてます)
[ 2013/10/26 20:49 ] [ 編集 ]

Sigh さん

ご報告いただきありがとうございます!
お役に立てて何よりですm(*_ _*)m
[ 2013/10/28 23:15 ] [ 編集 ]

No title

ソースお借りしました。わかりやすくて助かります。
ありがとうございました
[ 2014/01/08 22:36 ] [ 編集 ]

hokky0 さん

ご報告いただきありがとうごじあます!
お役に立てたなら幸いです( *´艸`)
[ 2014/01/09 21:15 ] [ 編集 ]

ソースお借り致しました。
わかりやすい解説をありがとうございます。
[ 2014/02/13 08:13 ] [ 編集 ]

くりふさん

コメントありがとうございます!
お役に立てて幸いです(*´∀`*)
[ 2014/02/16 01:11 ] [ 編集 ]

ありがとうございました!

とても勉強になりました、ありがとうございます!
ブログを書き始めるのに参考にさせて頂きました。
Vali鯖で遊んでいる者ですが、いつも楽しく読ませて
もらっています。すなまりさんのような楽しく面白い
文章を書けるように頑張ります!
[ 2014/08/24 16:50 ] [ 編集 ]

なつみラボさん

ご報告&ブログを見ていただきありがとうござます!!

え?あ?うちを参考にすると・・・カオスなブログになっちゃいますよ!?
あと画像がクソ多い。
困った、悪い点しか思い浮かばない・・・!!
[ 2014/08/26 10:35 ] [ 編集 ]

遅くなりましたがおかりしましたん(^^ゞ
分かりやすくてとてもいい解説ですね!
[ 2014/08/27 18:02 ] [ 編集 ]

しろさん

しろさんブログやってんのかー!?
[ 2014/08/29 20:09 ] [ 編集 ]

参考にさせて頂きます。
丁寧な説明ありがとうございました。
[ 2015/02/06 14:41 ] [ 編集 ]

りびぃさん

コメントありがとうございます!
ご活用ください♪
[ 2015/02/07 16:00 ] [ 編集 ]

事後報告ですが。

ソースお借りしました。助かりました!ありがとうございます!
が、しかし、右端の文字が少し切れて表示されてしまう・・・
後日原因究明して、お借りしたソースをきれいに使いこなしたいと思います!
[ 2015/02/21 02:36 ] [ 編集 ]

葱さん

コメントありがとうございます!

文字が切れてしまうのはテンプレートの問題だと思います。
table widthの数値を少し小さくしてみてもだめでしょうか?
ソース拝見しましたら200のまま使っているようなので
190とか185くらいで試してみてください。
(おそらく葱さんのブログの場合190が最大値です)
[ 2015/02/21 04:10 ] [ 編集 ]

ソースまで見に来てくださってありがとうございます。
195で「うーん変わらないなー」ってやってたんですが、190だったのですね・・・
無事解決しましたので、「すなまりさんのサイトからお借りしました」の文字を後程どこかに入れさせていただこうかと思います。
あ、この機会にブログリンクもさせていただきます!
ありがとうございましたー!
[ 2015/02/21 22:04 ] [ 編集 ]

葱さん

いえいえ、とりあえず形になったようでよかったです!
リンク、こちらからも張らせていただきました。
よろしくお願いしまっすヾ(*´∀`*)ノ
[ 2015/02/23 14:55 ] [ 編集 ]

すなまり様、はじめまして
鳴海波音(なるみはのん)と申します。


こんばんは。
事後報告ですが、ソースお借りしました。

ブログを作れたのはすなまり様のおかげです。
ありがとうございました。
[ 2015/02/28 22:45 ] [ 編集 ]

鳴海波音さん

コメントありがとうございます!
お役に立てたようで何よりです♪
テンプレートによっては端が切れたりもするので
もし表示がおかしくなった等あればまたコメントください。

ブログライフ楽しんでくださいね!
更新に義務感持ったら終わりですよ!w
[ 2015/03/01 02:13 ] [ 編集 ]

遅くなりましたが・・・・

すなまり様、こんばんは。
お久しぶりです。

事後報告なのですが・・・・
すなまり様のブログリンクさせていただきました。

私のブログ名は、430円の花猫 別館です。

遅くなりましたが、一応ご報告をと。

ふつつかなブログとヘタレ管理人ですがどうぞよろしくお願いします。
[ 2015/04/19 23:14 ] [ 編集 ]

鳴海波音さん

ご連絡いただきありがとうございます!
鳴海さんもROブログライフ、楽しんでくださいね♪
[ 2015/04/20 20:41 ] [ 編集 ]

いつも楽しくブログ拝見しています。
ソースとても参考になりました。
解説もわかりやすかったので、こーいうの苦手なんですが、
作っている間、とても楽しい気持ちでいられました!
すなまりさんのおかげです。ありがとうございました(*´ω`*)
[ 2015/08/12 14:09 ] [ 編集 ]

めろこさん

コメントありがとうございます!
お役に立てて幸いです♪
作ってる本人からすると分かりやすいんだかなんだかわからないのですが
みなさんそう言って使ってくださるのでありがたいです!
[ 2015/08/12 14:51 ] [ 編集 ]

ありがとうございます

事後報告になりますがソースお借りいたしました。
とてもわかりやすくて助かりました。
ありがとうございます。
[ 2015/12/27 18:23 ] [ 編集 ]

laneさん

ご連絡いただきありがとうございますー!
お役に立てて光栄です!!
[ 2015/12/28 21:10 ] [ 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
[ 2016/02/14 16:36 ] [ 編集 ]

コメントの投稿













管理者にだけ表示を許可する















上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。