WEB TANOSHII!! -30ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 28 | 29 | 30 | 31 | 32 | 最初次のページへ >>

アメブロhtmlのアレな要素のリスト

いいタイトルが浮かびませんでした。

人によっていらなかったりする要素のリスト。

人のブログをいじる機会があったのでついでにまとめてみます。

ルーム等へのリンク要素

ul.userNaviArea：ページ最上部の「ルーム｜ブログ｜フォト｜相談｜プレゼント」というリンク

それぞれにクラスが指定されていれば単独で消せるんですが。

ul.ameNaviArea：プロフィールの「ルーム｜フォト｜相談｜プレゼント」というリンク

こっちはそれぞれに以下のクラスが指定されています。

・li.linkforroom：ルーム

・li.linkforphoto：フォト

・li.linkforrequestion：相談

・li.lastItem.linkforpresent：プレゼント

ついでにプロフィールの各要素のクラス

li.menuMsg：「メッセージを送る」

li#amemberProf3 li.menuAmember：「アメンバーになる」

menuPresent：「プレゼントを贈る」

ヘッダとフッタ

ul#amebaBar：ページ最上部のツールバー。

スクロール追従がうざいという方はpositionの値をstaticに書き換えてやると幸せになれるかもしれません。

多分これだけだと余白ができたりするので、marginあたりをいじる必要があるかも。

一応このブログの設定を載せておきます。

ul#amebaBar{
position:static;
margin-top:-23px;
padding:0;
}
* html body ul#amebaBar{
position:static;
padding:0;
margin:0;
}

多分これで動くと思います。たぶん。

「* html body ul#amebaBar」はIE6以下のみ適用されるはず。

このcssを適用しないとIE6以下ではツールバーが非表示になってしまいます。

ハックは極力使いたくないところですが、ハック無しに解決する方法を見つけるのが面倒だったので。

よい子の皆は真似しちゃだめですよ！

また、このul#amebaBarの中にある要素は以下の通りです。
・li.barSearch：検索バー
・li.barCheck：「チェックリストに追加」

div#footerArea：ページ最下部にあるフッタ。

非表示とかにするのではなく、いっそデザインとして割り切ってみてはいかがでしょうか。

とは言っても中身を編集できるわけではないので、margin:0 auto;とか追加してwidthを自身のブログのサイズに合わせたりするといいと思います。

ちなみにこのブログでの設定はこんなかんじになってます。

div#footerArea{
width:840px;
margin:0 auto;
padding:12px;
text-align:right;
background-color:#353535;
}

その他

a.menuMore：各エントリのフッタ部分にある「もっと」というリンク

a.petaLink：「ペタ」のリンク。いらないみたいな人は少ないと思いますが

おわり

間違いがあったら申し訳ありません。

ブログカスタマイズの手助けになれば幸いです。

広告の非表示はブラックかグレーか分からないのでノータッチです。

FirefoxのFirebugというアドオンを使えば各要素の構造を分かりやすく視覚化してくれるので、さらに詳しく知りたい方にはオススメです。

GoogleChromeのJSデバッガーでも代用出来ないことはないと思います。

デザイン変更完了

普段はユーザビリティとかそれなりに考えたり、サイトのコンセプトに合うか考えたりするんですが、何も考えずにターミナルを見ながら適当にやっつけてみました。
実は変更前のシンプルな方が好きだったりします。

動作は一応IE6～8、Firefox2、Opera、GoogleChromeで確認してます。
ずれてたりしたらごめんなさい。

大したことやってませんが一応cssの記述方法とか載せてみます。

主な変更点

・ヘッダとか変更
ヘッダ部分のcssは以下の通り。

div#header{
padding:0;
margin:0;
background: #353535 url('http://img0.photo4.ameba.jp/d/d-squid/org/0730gtS47ggh55RNN3gIto.jpg') no-repeat;
height:230px;
}

メイン部分のcssは以下の通り。

#wrap{
background: #FFFFFF url('http://img0.photo4.ameba.jp/d/d-squid/org/0740o2o57t7265qtw3ftfy.jpg') top no-repeat;
padding-top:20px;
padding-right:20px;
width: 820px;
}

leftにpaddingをかけていないのは各エントリのタイトルをframeに指定したborderとくっつけたかったため。
他にもっと効率いい方法がある気がしましたが、ぱっと思いついた方法で実現出来たのでこの実装にしました。
そんなわけで.entryにpadding-left:20pxを指定し、h3.titleにmargin-left:-20pxが指定してあります。

ちょっとてこずったのはまさかの画像のアップロード。
画像フォルダには横800pxまでしかアップロードできないんですね。
不便過ぎるだろ…常識的に考えて…。

そのため、上のコードを見て頂ければ分かると思うんですが、画像フォルダではなくフォトにアップロードしたものを利用しています。
wrapの方の画像はもともと840*5だったんですが、そのままだとアップロードができませんでした。
最小サイズの指定があるのかしら。
840*100にしたら無事アップロードできました。

・メニューを画像に置換

#search h4.menu_title{
width:172px;
height:23px;
background:url('画像URL') no-repeat;
text-indent:-9999px;
}

CSSは適用されてるけど画像は表示しないみたいな環境で見るとき問題がおきるのであんまり使いたくはない手法ではあるんですが。

三行まとめ

・アメブロ使いづらい
・ターミナルおもしろい
・ターミナルまじおすすめ

デザイン変更中

ちょっとちょいちょいデザインおかしくなるかもしれません。
終わったら適当にcssの説明とか書く予定です。

ChromeCounterのPVが4に！
せつねえ！

Chromeからのアクセス数が分かるブログパーツ『ChromeCounter』

http://nakanohito.jp/

なかのひとでお馴染み、ユーザーローカルの中の人がやってくれました。
タイトルの通り、まだまだ不満の多いGoogleChromeを使っているドMなネットサーファーがどれだけそのページを見ているかが分かってしまうブログパーツです。
これのFirefox版を見たことがある方もいらっしゃるのではないでしょうか。

設置方法は簡単。
アメブロの場合、なかのひとに登録・ログインして操作メニューの「Webブラウザシェア調査用タグ」に記載されているコードをフリープラグインにつっこむだけです。

早速設置してみました。
まだ集計中なので、結果が楽しみです。
そもそも大してPVないんですけどね！

アメブロのバグ？

GoogleChromeでしか再現してないのでブラウザ側の問題かもしれませんが。
ついでに自分のPCでしか試してないので、もしかしたら何らかの環境が邪魔してるだけかもしれません。

問題箇所は画像フォルダ。
画像をアップロードし、再読み込みが終わった状態でのみ再現しました。
（アップロードを介さずに画像フォルダに遷移しても再現しません）
ざっと見て以下のような問題が発生しています。

・タイトル変更のリンクを押下した時点で、削除リンクを押下した際に表示されるウィンドウの見出しが「削除」であるにもかかわらず、その下に表示されているのはタイトル変更の内容
　同様に、削除ボタンを押下した時点で、タイトル変更のリンクを押下した際に表示されるウィンドウの見出しが「タイトルの変更」であるにもかかわらず、その下に表示されているのは削除の内容

・タイトル変更における「保存」ボタンを押下
（このとき、上の問題が発生してるため削除からの遷移でも同様）
　→変更が完了（実際にタイトルに変更を加える必要は無い）すると、タイトル変更のリンクおよび削除ボタンを押下した際、「(ERRNO=XA04500)ご指定のページを表示できません。」というシステムエラー画面に遷移する

・削除を実行→自動再読み込みを実行させず（ウィンドウの×ボタンを押下）、削除ボタンまたはタイトル変更のリンクを押下
　→「削除完了しました。画像フォルダを再読込します。」というウィンドウが表示される
　このとき、「画像フォルダを再読み込みします。」というリンクを押下しても、何もせずに待機して再読み込みが実行されても、ウィンドウとしてではなくページとして「削除完了しました。画像フォルダを再読込します。」のみが表示されたものが表示され、無限ループ突入

他にもアップロード後に再読み込みしない状態でいじったら何かおかしなことになった気がしますが、見なかったことにします。
とりあえずGoogleChromeでの再現しか確認してません。
IEでは再現しませんでした。
FirefoxとかOperaは面倒なので試してません。
もしかしたらSafariでも再現するのかもしれませんね。

GoogleChromeのショートカット

Googleヘルプセンター Google Chrome の機能: キーボードショートカット

とりあえず使いそうなものだけメモ。

■ウィンドウとタブ
Ctrlキーを押しながらリンクをクリック：新しいタブでリンクを開く
Shiftキーを押しながらリンクをクリック：新しいウィンドウでリンクを開く
Ctrl+Shift+T：最近閉じたタブをもう一度開く（10個まで記憶）
Ctrl+1～Ctrl+8：特定の位置番号のタブに切り替える
Ctrl+9：最後のタブに切り替える
Ctrl+Tab：次のタブに切り替える
Ctrl+Shift+Tab：前のタブに切り替える

■アドレスバー
F6キーまたはCtrl+L：アドレスバーにフォーカス
URLまたは検索内容を入力し、Alt+Enter ：新しいタブで結果が開く

■各種機能
Ctrl+B：ブックマークバーのオンとオフを切り替える
Ctrl+H：履歴ページを表示する
Shift+Escape：タスクマネージャを表示する

■ページ
Altキーを押しながらリンクをクリックする：リンクをダウンロードする
Ctrl+U：ソースを表示する
リンクをブックマークバーにドラッグ：リンクをブックマークする

■テキスト
テキストフィールドにフォーカスし、Ctrl+Shift+V：クリップボードから現在のコンテンツをプレーンテキストとして貼り付ける

他ブラウザと共通する部分も多いですね。
今のところどうしてもSleipnirと併用せざるを得ない状況があり、いくつか実現する機能が同じでも異なるショートカットがあるので慣れるまで少ししんどそうです。

GoogleChromeを使ってみたその2

先ほどアメブロの記事を書いているとき、妙に今日は使いやすいなーと思ったんですが、そのあとmixiでコメントをしようとした際、その理由が分かりました。

テキストエリアのリサイズができる…！

調べてみたらSafariにもついている機能だとか。
JSで制御してるのかな。
すごく便利です。

このBlog以外にWORDPRESSを使ってBlogを書いているのですが、WORDPRESSのエディタではデフォルトでリサイズが出来るようになっています。
それに慣れているせいでアメブロやmixiのエディタは非常に使いづらかったんですが、これで解決しました。
ありがとうGoogleChrome。

しかしマウスジェスチャが搭載されてないのが非常に残念。
あるのが当たり前になってしまっているので、ついいつもの癖で実行して右クリックメニューが表示されます。泣きたい。
あとはタブの切り替えがマウスで出来ないのも不便です。
Sleipnirでは右クリック＋マウスホイールで切り替えられたので楽だったんですが。
今後の改善に期待することにします。

GoogleChromeを使ってみた

GoogleChromeを導入してみました。
気づいたことをざっと。

検索をかけると該当文字列をハイライトしてくれるだけでなく、スクロールバーに位置を表示してくれます。便利。

履歴を分単位で表示してくれます。見やすい。
検索をかけるとサムネイルつきで表示してくれます。

他は適当に箇条書きで。
・検索バーが便利。履歴なんかから候補を表示してくれるみたい。
・ブクマ、履歴、PASSなんかをIEとFirefoxからインポート可能。
　情報の蓄積によって力を発揮する部分もあるのでこれは嬉しい。
・JSのデバッガがついている。CSSも見れます。Firebugみたいな感じ。

ちょっとマイナスな気づいたこと。
・タブが1行固定のため、調子乗ってタブ増やすと見づらい。
　あと閉じるボタンの表示領域がなくなるまでタブを開いたとき、アクティブなタグしか閉じるボタンが見えません。
　別のグループを作ればいい話ではあるんですが、どっかで複数行に変更出来るのかしら。
・PASSがまるみえ。
　オプション→詳細設定→保存したパスワードを表示であっさり保存したパスが見られます。
　GoogleChrome自体にパスがかかってるわけではないので、セキュリティ的にちょっとヤバい気がします。

そんな感じで利点も欠点もあるブラウザといった感じです。
UIが独特なのでIEやらFirefoxのような一般的なブラウザに慣れてると、慣れるまで少ししんどいかもしれません。
俺もその一人なのですが、気長に使ってみようと思います。
オープンソースなので期待も出来るはず。

ちなみにアメブロは基本的に問題なく動作するみたいです。
ただ、WebkitのせいなのかUAのせいなのかは分かりませんが、Safariと判断されるようです。
そのため、投稿の際のエディタはHTMLタグエディタを使わざるを得なくなります。
あと画像アップロード回りで多少気になる挙動があったように思います。気が向いたら検証しよう。
ちなみにGoogleChromeのUAは「Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13」みたいです。

そういえば友人がSleipnirのインポート対応してねえええと嘆いてました。
これまでSleipnirを使っていた方はSleipnirのメニューバーのファイルから「お気に入りのエクスポート」を選択し、エクスポート先を指定するウィンドウで「OK」を押してください。
IEが入ってないみたいなことが無い限り、デフォルトのエクスポート先はIEのフォルダになってると思うので、恐らく変更の必要はありません。
その後GoogleChromeでインポートを実行すれば完了です。
履歴とかはまあ諦めればいいんじゃないかな！
もしかしたら他に方法があるかもしれません。