公開中の自作ゲーム

*ジェシカバレンタインハウス

*Melito 挑戦!まちがいワールド

*Melito 挑戦!怪物ハウス

*ナガサレータ(脱出ゲーム)

プロフィールとブログ概要

  • 主にパーティーキャッスル(PTC)キャラエディタで撮った画像掲載、自作アイテムの配布などをやっています。
    自作ゲームはじめました(・∀・)

    *アイテム利用規約
    ↑アイテムご利用の際、お読みください。

    *パーティーキャッスルとはかつてSQUARE ENIXで提供されていた3DCGのオンラインサービスです。

    リンク(自分の外部ページ)

    FAGS(*R-18)
    Pixivのやつ
    Youtubeのやつ

    連絡先


    カテゴリー

    月間アーカイブ

    お知らせ

    【ゲームの修正箇所など】
    ・2017.2.9 ジェシカバレンタインハウスの一部仕様変更。
     詳細はこちらをご覧ください。
    ・2017.2.5 ジェシカバレンタインハウスのバグ修正
    *致命的なバグ修正。詳細はこちらをご覧ください。
    ・2017.1.29 新作ゲーム ジェシカ バレンタイン ハウス公開しました(・∀・)

    作ろう!ブラウザアイコンの巻



    ブラウザでサイトを開くと、タブにサイトタイトルとアイコン(favicon)が表示されると思います。
    デフォルトでは上の画像一番下のように(この場合はIE)



    これらのアイコンだと思いますが、Google(画像二番目)FC2(三番目)とかのようにオリジナルのアイコンを表示するサイトも結構あります。
    そんな訳で、自分のブログなどにもオリジナルアイコンを付けよう!というのが目的です。

    まあ、自己満足で、別にそのままでも支障はないですが、ちょっと楽しいかなーという事で。(・∀・)
     

    【作業の流れ】

    ・アイコンを用意(作成)する。GIF、PNGなど。

    ・完成したアイコンの拡張子を変換する。(重要)

    ・変換したアイコンをサーバーにアップロード。

    ・ソース(テンプレート)を書き換える。(一行付け足す)

    ・終わり。

    *これは俺がやった簡単な方法なので、突き詰めればもっと高度なやり方もあるかもしれません。


    【その1・アイコンの用意】

    アイコンは16×16pxで作成。
    普通にペイントソフトなどで16×16のキャンバスで作成してもいいけど、アイコンを作る無料サイトもあります。使い慣れたペイントソフトのほうがいいかもですが。

    ・FC2アイコン(無料)

    *この段階での画像の拡張子はGIF、PNG、JPGのどれでもいいですが、透過させるならJPG以外で。

    このサイト用に作ったアイコン。
    ピローニャ(ブログ右上のほうにいる子)をイメージしたんだけど、それなりの雰囲気を感じ取っていただけるだろうか? 多分言われてみて「ああ、そうだったのか!」と言った感じとは思いますが(´・ω・`)

    *原寸




    *無理やり拡大したところ。モヤモヤしてますが単色です。




    アイコンの作り方(ドット打ち)とかは教えられるほどの技術はないので省略しますが、ようは一コマづつ点を打っていく作業です。


    【その2 アイコンの変換】

    次に、上で完成したアイコンをfaviconとして使える拡張子(.ico)に変換します。
    これも色々やり方ありますが、以下のサイトで一発変換したら楽です。

    ・『ファビコン作成。favicon.ico 無料で透過マルチアイコンが作れます』

    *やりかた。
    ページを開き、入力フォーム(画像投稿板みたいなやつ)で変換したいアイコンを選び、favicon.ico作成』というボタンを押すだけです。
    そして変換された画像(アイコン)をダウンロードすればOKです。
    そのアイコンがどんな感じで表示されるかのプレビューもあります。


    【その3 アップロード】

    次に変換したアイコンをサーバーにアップロードします。
    これは普通にブログ編集に付いている『画像のアップロード機能』でやればOK。
    そしてアップロードした画像のアドレスをメモしておきます。

    【その4 ソース(テンプレート)の書き換え】

    *ブログを前提に書きます。


    まず、ブログ管理画面で、『テンプレート編集』(登録ブログによって呼び方の違いはあると思います)を開きます。
    そこにある『ソース(あるいはHTML)』の中から『<head>〜</head>』という記述を探します。

    その間に

    <LINK REL="SHORTCUT ICON" HREF="画像名.ico">

    と一行付け加えて保存すれば作業完了です。
    *青字部分はさきほどメモした画像のアドレス(URL)。
    httpから始まるフルパス(略さないアドレス)のほうが確実。

    <head>内ならどこでもいいですが、<title>~</title>の下あたりがわかりやすいかも。

    *たった一行加えるだけですが、念のために元のテンプレートを複製してから作業したほうが安全です。

    冒頭に書いたとおり、自己満足の世界ではありますが、気が向いたらやってみてはいかがでしょうか。

    という事で終わります。閲覧ありがとうございました|☆∀☆)ゝ”


    関連する記事



    web拍手 by FC2

    コメント
    いや〜・・・色々やれてる
    かずーんさんを羨ましく思っています(^o^)丿
    これからも良きアドバイスお願いします(#^.^#)
    いつも助かっていますm(__)m
    ブロッケンさん>
    毎度ありがとうございます|☆∀☆)ゝ”

    色々やってるといっても、広く浅くと中途半端ですからなあ(苦笑)
    アドバイスなどおこがましいのですが、出来る範囲で協力させて頂きますよー!w
    逆に俺の間違いは結構多いので、その時はぜひ提言お願い致します<(_ _)>
    • かずーん
    • 2011/07/01 6:03 PM
    コメントする








       
    この記事のトラックバックURL
    トラックバック