ニコニコ動画のPSP変換方法、アニメ銀河英雄伝説の壁紙、CSSリファレンスなど、趣味に偏った情報を公開中

スポンサーサイト

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

同人サイトを回るための快適!ネットブラウジンク術

keywords:同人サイト,ブラウジング,ネットサーフィン,フリーソフト,Opera,Firefox

【ブラウザ編】

※基本的にIEは使ってない+IEに便利機能はないので紹介しません。

見づらいデザインのサイトを見やすくする

 デザインセンスがいまいちなのか好みの差なのか、大変見づらいサイトというのは存在します。
 例えば柄物の背景とか…
 コチラのページのアンケートにもあるように「目が痛くなるような配色や壁紙」「文字が小さい」「壁紙等の素材を使いすぎ」というサイトデザイン上の問題がTOP20に入っている。
 しかし、ただでさえ少ないジャンルの同人サイトだったりすると、目を通したいもの。そんな時はスタイルシート(CSS)を使わなければいい!!
Opera
「ユーザーモード」を使う。
ショートカットは、Shift + G ←カンタン!
表示 > スタイル > ユーザーモードを使用しない(Alt → V → S → U でも可能)
ビューバーを表示させておくとクリックひとつで変更できる。
(外観の設定 > ツールバー > ビューバー をチェックしてOK)
Firefox
表示 > スタイルシート > スタイルシートを使用しない
ショートカットでは、Alt → V → Y → N ←ショートじゃない(笑

△トップへ戻る


隠しリンクを見つける

 裏ページは隠しリンクになっていることが多い。古典的にはTabを押したり、反転したりするが探しにくいときもある。
 そんなときにはそのページのリンク一覧が見られれば探しやすくなる。
Opera
サイドパネルに「リンク」を表示する。
(外観の設定 > パネル > リンク をチェックしてOK)
Firefox
昔のFirefoxは ツール > ページの情報 でリンク一覧が見られたが、今のバージョンはなくなってしまった。

△トップへ戻る


画像やフラッシュなどのコンテンツ保存

 Firefoxはアドオンによって様々な機能拡張ができる。
 以下、私が使っているFirefoxアドオンを紹介。
Save File to
画像の保存場所を、右クリックから登録フォルダに指定することができる。
例えばアニメタイトルごとにフォルダを作成・登録しておき、該当フォルダに直接ダウンロードすると、のちのちの整理が必要なくて便利だ。
Save File to - Firefox Add-on サイト
Cash Viewer
画像以外でも、秀逸なFLASHを見つけたりすると欲しいと思いませんか?
Firefoxで一時ファイル(キャッシュ)が閲覧できるアドオン。
一度見たものはキャッシュで保存されるので、一覧から欲しいファイルを右クリックして個別にダウンロードできる。
もちろんすべてのファイルがキャッシュされるのでどのファイルでも保存可能だ。
(IEでいう"temporary internet files")
Cash Viewer - Firefox Add-on サイト

△トップへ戻る



【ソフトウェア編】

※下記ソフトはすべてフリーソフト。

HTMLごとダウンロードできるソフト


CompleteGetter
任意ディレクトリ以下をダウンロードできる。
フォルダ起動のソフトなので手軽に導入できる。
ダウンロード情報をファイル保存しておいて、サイト更新されたときに更新分をダウンロードできるという面白い機能がある。
開発者様サイト
Vectorページ
Webox
CGIサイトをダウンロードできる。
開発者様サイト
Vectorページ
DSDownloader
フィルタ機能により、拡張子指定で画像のみ収集できたりする。
開発者様サイト

△トップへ戻る


そのた

CapWrite
画面をスクロールしながらキャプチャできるソフト。
お絵かきBBSの画像を一枚一枚保存するのは疲れる。だったら一枚に収めてしまおうという使い方ができるソフト。
画面キャプチャなので、画像についてるコメントもキャプチャされるので重宝している。
開発者様サイト
Vectorページ

△トップへ戻る


スポンサーサイト

テーマ : 同人活動
ジャンル : アニメ・コミック

小説ブログの作り方考察 - ブログで小説書いてる人へ物申す!!

keywords:ブログ,小説,作り方,デザイン,blog
ブログ小説を公開する際の、ブログ構成の注意点を紹介する。
  1. 軽いページにする
  2. ユーザビリティを上げる
  3. 記事は古いものから表示
  4. "続きを読む"を使わない
  5. 個々の記事(小説)へのリンクがある
  6. あらすじやテーマ、設定の記載がある
  7. 参考リンク
なんか面白いアンケートがありました。→即バックアンケート-カオスパラダイス おおむね同意v
優先順位としては、ユーザビリティ > コンテンツだと思うのです。
中身よりもまずはアクセスがなくちゃ。
※私は物書きではないので、読んだ感想とそこから考えた解決策を記載したものです。そこをご注意ください。
軽いページにする
プラグインは最低限
カレンダー、時計、天気予報なんて必要なし。バーチャルペット、ゲームなんてもってのほか。
イラストはサムネイルにするな
テキストリンクにして、説明文はimgタグ内のtitle=" "に書けばいい
バナーや背景に重い画像を使うな
画像は飾りなのだからできる限りファイルサイズは小さくする。もちろん文字とかぶるようなことはやめてほしい。

△トップへ戻る

ユーザビリティを上げる
メジャーなモダンブラウザには対応させる
Firefox,Opera,Safariなどシェア上位にランクインしているブラウザで確認するのは常識
ついでに言うとIEでもバージョンによって表示が変わるので考慮が必要

参考:IEのブラウザシェア増加に転向、IE6も増加/マイコミジャーナル
JavaScriptやFLASHは使うな
JavaScriptやFLASHは好き嫌いの分かれるもの。
特にメニューで使っている人が多いが、画像置換やプルダウンメニューなどはCSSで十分対応可能。できる限り使用は避けましょう。

創作サイトで流行のGENOウイルスはJavaやflashの脆弱性をついてくるとか…。かくゆう私も対策としてJava系切ってます。(Java≠JavaScript)

参考:使えるCSSテクニック Vol.01Vol.02 /バシャログ
パンクズリストをつける
訪問者が今どこにいるのかというサイトナビゲーションを付ける。

△トップへ戻る

記事は古いものから表示
ブログは通常新しい記事が上に表示されるので、これを逆に変更する。
FC2では"環境設定"→"ブログの設定"→"記事の設定"の表示順を新しい順から古い順に直す

△トップへ戻る

"続きを読む"を使わない
あらすじ書いて、本文は"続きを読む"の下に入れるという、一見便利な使い方のできる機能。
しかしシリーズ小説であれば一気に読むもの。そのひとつひとつの記事に対して"続きを読む"をクリックするのは面倒。
ついでに言わせてもらうと、"続きを読む"がJavaScriptで動作してるブログは"即バック"している

△トップへ戻る

個々の記事(小説)へのリンクがある
更新順ではシリーズや短編などが混ざり合ってしまうため必要。
①~③をうまくかけあわせると、見やすくなると思う。+)…利点、-)…欠点
方法①:小説の題ごとにカテゴリ分けしておく。
+)更新自動
-)短編にはよいが、シリーズの場合一話ごとのリンクがない
対処→各記事にPREVとNEXTのリンクを貼る/またはカテゴリ下に各話のリンク貼る←更新手動
方法②:フリーエリアプラグインでお手製
+)自由度高い
-)難易度高い/更新手動
ちなみに、このブログのサイドメニューはフリーエリアを利用したもの
方法③:目次記事をつくり常にトップ表示
目次用の記事を作って、そのつど記事にリンクを追加していく方法
+)簡単。良く使われている方法でもある
-)目次に戻るためにいちいちトップページに戻る必要がある/更新手動

△トップへ戻る

あらすじやテーマ、設定の記載がある
読者は興味のあるものだけ読む。小説タイトルだけでは内容が推測できないから読まない。
方法①
リンクの下に説明文表記
方法②
リンクのタグ内のtitle=" "に説明文を書くと、マウス載せたときに表示される

△トップへ戻る

参考サイト

△トップへ戻る

テーマ : 創作・オリジナル
ジャンル : アニメ・コミック

画像を使わずにWeb2.0風グラデーションスタイルを作る-主要ブラウザ対応

keywords:CSSのみ,Web2.0,グラデーション,Firefox,Opera


 主要ブラウザに対応した、「画像を使わないWeb2.0風グラデーションスタイル」を考えてみました。

 IE7,Firefox3.5,Opera10の3ブラウザで動作確認済み。

 基本的にDIVでブロックに分け、z-indexを使って重ねています。

 サイトの色合いを変更したいときなど、画像の作り直しは大変面倒です。また、大きい画像はサイズも重くなります。

 なにより画像を使っていないので、色やサイズの変更が簡単です。


こんなの↓が作れます。他にもバリエーションあり。
Web2.0風スタイルサンプル画像

詳しくはコチラのサンプルページへ
背景透過部分が見やすいように、背景を暗くしてあります。見づらいですが、ご了承ください。

サンプルページのCSSはこちら



↓ 構造を図解してみる ↓
<div> id="header_04"
height: 60px
<div> class="header_body"
height: 60px;
position: relative;
z-index: 2;

<div> class="header_back"
height: 60px;
margin-top:-60px;
position: relative;
z-index: 1;
<div>
height: 50%
<div>
height: 50%
  ←  ボックス全体


  ←  class="header_body"
文字を入れるなどコンテンツ部分
サンプルではテキストリンク



  ←  class="header_back"
ボックスの中に上下2つのボックスをつくり、それぞれに背景適用することで、グラデーションスタイルを表現
margin-topをマイナスで適用し、かつpositionとz-indexの数値を低く指定することで上のボックスの下に置いた







このページの関連記事

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

styleswitcher.jsを使って、クリックひとつで、FC2ブログのデザイン・テンプレートを切り替える方法

 styleswitcher.jsというJavaScriptを使って、マウスクリックでサイト・ブログのデザイン動的に切り替える方法です。
これは他のサイトですでに紹介されているので、FC2ブログでの切り替え方を紹介します。

 まず、このブログでの適用例(見本)はこちら↓
 http://gogosanzi.blog46.fc2.com/?template=grey_2column_black&index
 ヘッダーの下に 黒背景バージョン 白背景バージョン  というリンクがあるので、押してみてください。
 白背景にすると、白地に黒文字のブログデザインに変更されます。


styleswitcher.jsの導入方法はこちらを参考にしました。
http://weblibrary.s224.xrea.com/weblog/webdesign/javascript/styleswitcherjs.html


①styleswitcher.jsのダウンロードとブログへのアップロード


 styleswitcher.jsのダウンロード先→http://www.alistapart.com/
 Topics > Code > CSS > Alternative Style: Working With Alternate Style Sheets
という記事をクリックすると、Download styleswitcher.jsというリンクが出ます。
 "styleswitcher.js"でサイト検索してもOK。

 ダウンロードしたstyleswitcher.jsをブログ管理の「ファイルのアップロード」でアップロード。

②切り替えるためのテンプレートを作る


 「FC2 BLOG 管理ページ」の「テンプレートの設定」で、デフォルトのテンプレと切り替え用のテンプレを作ります。
 デフォルトのテンプレを「複製」してCSSを編集すると、プレビューしながら編集できるので、便利です。
切り替えCSS編集

別途、スタイルシート(.CSS)を使う人はファイルのアップロードをしてください。

③HTML編集


ここからはデフォルトで使う方のテンプレートHTMLを編集します。
切り替え用のHTMLは編集しても意味ないです。

i.まずstyleswitcher.jsを読み込ませる命令


 <head></head>の間に
<script type="text/javascript" src="styleswitcher.jsのアドレス"></script>
を入力します。
 アドレスは、アップロードしたstyleswitcher.jsを表示させると分かります。
 私の場合は"http://blog-imgs-31.fc2.com/g/o/g/gogosanzi/styleswitcher.js"でした。

ii. スタイルシートをを読み込ませる命令


 i.の下に、デフォルトのスタイルシートと切り替え用のスタイルシートを指定する命令を書きます。
【デフォルトのスタイルシートを指定】
<link rel="alternate stylesheet" type="text/css" href="<%css_link>" media="all" title="任意の名前" />

 通常、最初は
 <link rel="stylesheet" type="text/css" href="<%css_link>" media="all" />
 というcodeが書き込まれていると思います。
 そこに title="任意の名前" という文字を付け足して、スタイルシートに記号をつけます。

 ※<%css_link>は「そのテンプレート名に対応したスタイルシートへのリンク」を取得するためのFC2 BLOG独特のものです。
  実際には、
  http://gogosanzi.blog46.fc2.com/template/grey_2column_black/style.css
          ↑ブログのアドレス              ↑テンプレート名
  という法則に則って、アドレスを取得しているわけです。

【切り替え用のスタイルシートを指定】
 "交互にする"という意味の"alternate"スタイルシートを追加指定します。
<link rel="alternate stylesheet" type="text/css" href="切り替え用スタイルシートのアドレス" media="all" title="任意の名前" />

 切り替え用スタイルシートのアドレスは↓参照
 http://gogosanzi.blog46.fc2.com/template/grey_2column_white/style.css
       ↑ブログのアドレス             ↑切り替え用のテンプレート名

iii.スタイルシート切り替え用タグを指定


<body>~</body>に以下を加える。
<a href="#" onclick="setActiveStyleSheet('任意の名前'); return false;"/>リンク</a/>
<a href="#" onclick="setActiveStyleSheet(任意の名前'); return false;"/>リンク</a/>


これにて、完成!
---------------------------------
 これは、ユーザーの任意でデザイン切り替えができたら良いなと思って試した次第です。

 他のブログでも応用は効きますし、もっと大胆なデザイン変更をしたら面白いと思います。
 共有テンプレートなどの配布テンプレを手直しすれば切り替え用として使えます(手直しにはhtml、cssの知識が必要ですが)



このページの関連記事

テーマ : CSSレイアウト
ジャンル : コンピュータ

background-positionを使って、CSSのみで動的メニューを作る

 本日は、CSS(スタイルシート)のみで、動きのあるメニューの作り方を紹介したいと思います。
 特長はbackground-positionを利用することによって画像一枚でスムーズな動きを表現できるところです。

 今回は外部CSSで作ってます。

 まず、こちらの→ サンプルページをご覧ください。 使ったCSSはこちら
ページ上部のメニューにカーソルを合わせると、画像が変わります。
 ↑
 なんでFLASHの上に画像があるの?と思われた方は、前回の記事で紹介していますのでご参照ください。

 こういった仕掛けはメジャーなものとなりましたが、javascriptを使って表現しているサイトが多い気がします。
 しかし、私はjavascriptが好きではないので、この程度ならCSSだけで十分だと思います。

ポイント1: CSSの「:hover」を使って、リンクに動きをつける


 javascriptでは … 2枚の画像をonmouseover、onmouseoutを使って画像変更
 対して、
 CSSでは … リンク要素<a href="..."> に指定可能なクラスである「:link」「 :visited 」「:active」「:hover」を使って、画像変更
※ 「:link」=通常のリンク
  「:visited」=訪問済みのリンク
   「:active」=クリック時のリンク
   「:hover」=マウスが乗っている状態のリンク

ポイント2: background-positionを使って画像を切り替える


 サンプルのメニューに使っている画像の全体像は実はコレ→ top.png

 通常のリンク時とマウスを乗せたときのリンクを並べて一枚の画像にしてあります。

仕掛けは単純、
まず、メニュー画像を背景として表示させて、
 ①通常時は画像の上半分だけ表示させます。
  (↑ display: blockとwidth・heightを指定)
 ②リンクをクリックしたとき(:active)とマウスを乗せたとき(:hover)に画像の下半分を表示させます。
  (↑ background-positionで背景位置をずらして表示)


ソースとCSSは以下
 ※メニューの"HOME"に使う部分のみ太字で見やすくしてみました。一つの仕掛けにどの程度の文字数が必要か分かると思います。

HTML
<li><a href=" リンク先 " id="top" title="トップページ"><img src="menu_dummy.gif" width="110" height="27" alt="トップページ"></a></li>
<li><a href=" リンク先 " id="intro" title="紹介"><img src="menu_dummy.gif" width="110" height="27" alt="紹介"></a></li>
<li><a href=" リンク先 " id="joboffer" title="求人"><img src="menu_dummy.gif" width="110" height="27" alt="求人"></a></li>
<li><a href=" リンク先 " id="link" title="リンク"><img src="menu_dummy.gif" width="110" height="27" alt="リンク"></a></li>


CSS
/* ここからメニュー部分全体 */
ul {width: 450px; /* メニュー全体の幅 */
margin: 0;
padding: 0;}
ul li { float: left;
list-style: none;
list-style-type: none; /* リストマーク非表示 */}
/* 『 Top 』 の設定 */
ul li a#top {
display: block;
width: 110px; height: 27px;
margin-left: 0px;

background: transparent url(top.png) no-repeat 0px 0px; }
ul li a#top:hover,
ul li a#top:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}

/* 『 Introduction 』 の設定 */
ul li a#intro {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(intro.png) no-repeat 0px 0px; }
ul li a#intro:hover,
ul li a#intro:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* 『Job Offer 』 の設定 */
ul li a#joboffer {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(job.png) no-repeat 0px 0px; }
ul li a#joboffer:hover,
ul li a#joboffer:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* 『Link 』 の設定 */
ul li a#link {
display: block;
width: 110px; height: 27px; 
margin-left: 0px;
background: transparent url(link.png) no-repeat 0px 0px; }
ul li a#link:hover,
ul li a#link:active { /* マウスオーバー・クリック時の設定 */
background-position: 0px -27px; /* 画像位置の指定 */}
/* ここまで、メニュー部分全体 */



読んでもよく意味が分からない人はこちらのサイトをご利用ください。
 とほほのWWW入門
 TAG index - スタイルシート CSS[スタイルシートのカテゴリー一覧]

さて、このようなHTMLソース・CSSの解説を以下に↓

●なぜメニューをul、liで書いたのか?
 詳しくは知らないが、ソース中でメニューであることが分かりやすいため、SEO対策とかになるらしいです。

●"menu_dummy.gif" ってなに?
 画像読み込みOFFにしている人のための保険なので<img ~~~>は消してもOK。

●なぜメニュー画像を背景画像にしたのか?
 メニューはフレームでも使わない限りすべてのページに設けるものであり、ソースが長ったらしいとファイルサイズがでかくなるし、SEO対策的に邪魔になるので、CSSで外部ファイルとして指定できる「背景」にしました。

●なぜ1枚の画像にしたのか?
 javascriptの場合はページ読み込み時にscriptを使って、切り替えに使う画像をあらかじめユーザーにロードさせます。それによってストレスのないスムーズな画像変更を可能にします。
 しかし、CSSのみの場合はscriptであらかじめ画像を読み込ませておくことが出来ないため、はじめにカーソルを乗せたときに切り替え後の画像をロードする間、若干のタイムラグが生じてしまいます
 ページ読み込み時に切り替え前後の2つの画像を読ませることはscriptでないと難しいので、2つの画像を一つにまとめてしまえばいいと考えたわけです。

 といってもこれは私のオリジナルではなくて、昔どこかでこのようなメニューを見て感心した覚えがあるからですが…



このページの関連記事

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

メニュー

以下はクリックすると、下位メニューに飛びます。

↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ↑TOP ----------------------------
メニューにない記事はサイトマップへ
カテゴリー
プロフィール

みやま

Author:みやま

地域ブランド力 45位の茨城県在住
20代/女
  • ガンダムと攻殻機動隊と銀河英雄伝説が大好きだ
  • 士郎正宗の描く尻は素晴らしいと思う
--------------------
近況報告、更新情報などツイートしていく予定です。
ツイッターへのリンク@miyama_tweet

リンク
↓バナーとHTMLタグ↓

<a href="http://gogosanzi.blog46.fc2.com/" target="_blank" title="AGPP~趣味に偏った情報を公開"><img src="https://blog-imgs-37.fc2.com/g/o/g/gogosanzi/agpp-bunner.jpg" alt="agpp-bunner" border="0" width="200" height="40"></a>
    ↓登録させていただきました↓
  • loghsearch
銀河英雄伝説名言録


present by 田中芳樹:徳間書店「銀河英雄伝説」
 
  
AGPP TOP > カテゴリー [HTML活用 ]
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。