アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -261ページ目

アクセス解析・・・・?

アクセス解析の表示に遅延が発生しています
スタッフブログ  http://ameblo.jp/staff/entry-10128641795.html



たしかに昨日のアクセス数が表示されていない
>現在、再解析処理を行っております。



が、・・・・しかし



ランキングは表示されているぞ!

ランキングにアクセス数は関係ない・・・・の?
な、はずはない・・・・ですよね?

こわ~・・・・

先日・・・・

私が作ったホームページをおいているサーバーから

このようなメールが・・・・・


>パスワード漏洩による不正ファイル設置のお知らせ
>ご利用のドメイン ********.com におきまして、パスワード漏洩により
>不正なファイルがいくつか設置されており、フィッシングに利用されておりました。


うっ・・・・

実際に振り込み画面が・・・・・・・

知らない間に・・・・・

いつの間に・・・・・


急いで削除して

パスワードを変更しました

昔に作ったホームページ(現在も仕事で使っていますが・・・)なんて

そんなにチェックなんかしないですもんね・・・

しかもテンポラリーファイル(一時的に作るファイルで処理が終わったら削除されるファイル)のフォルダーの中なんて・・・・・

絶対に開いてチェックなんかしません・・・・



スキルのある人は別世界の人間ですね・・・・






話は違いますが・・・・・


Opera8 ・・・・・ 「ペタっちゃお~」これがダメです?

なぜに?原因わかりません・・・・頭がボ~っとしているから調べてもいませんが・・・

「読者になっても・・」は大丈夫で

見本 http://ameblo.jp/exlink001/ もOKなんですが・・・・ なんで~?


「アメブロとOperaは相性が悪いから」で、なっとくしちゃおうかな・・・

Opera9は大丈夫でした・・・古いヴァージョンは無視?しちゃおうかな

やはりこんなときmacもSafariもほしいです・・・チャンと動いているんでしょうか?



うまく位置を合わせればノートの横からはみ出ている付箋紙にもリンクボタン付けられそうですね・・・

外にはみ出ているんじゃ・・・・気が付いてもらえないか・・・・ そのうちにチャレンジしてみよっと

CSS メニューを作っちゃおう(動画はドコ?)2

IE以外でうまく表示できなくて

あれこれやっていたら遅くなってしまいました・・・・

mac と Safari 以外では動作確認がとれました

ヴァージョン違いでwinでも表示がおかしかったら教えて下さい

見本 http://ameblo.jp/exlink001/

これからCSSでメニュー部分を作ります

自分で作れるよって方はスルーしちゃってくださいな




とりあえず・・・・

誰にでも出来るように

↓ココを使って見ます

List-O-Matic

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/default.php


メニュー項目数を選んで、メニュー項目とURLをいれて、どんなメニューにするか選ぶだけで

HTMLとCSSを吐き出してくれます・・・・


まずは上をクリックでList-O-Matic にいきます



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

Use the original version of List-O-Matic をクリックします


メニュー項目の数を設定します

※出てきたHTMLはフリースペースにおきますので

 文字数節約のためリンクタイトルは使いませんのでチェックは外してください



前回、用意したメモから項目とURLをコピペしていきます


もし、フリースペースに余裕があってリンクタイトルもつける場合は

前の画面でチェックしたままでこの画面に来て赤丸部分にタイトルを入れてください

(ホームに戻ります・・・ リンクの説明を入れます マウスが乗った時に表示されます)




ここから楽しくなりますよ

上が出来たらどんなメニューにするか選択します

下から好みのメニュー・・横でも縦でも好きなタイプを選んでください

※中にはアメブロと相性が悪いのもあります・・・・

 実際に設置してみて表示が崩れたりした場合は

 悩むよりここから違うタイプに変更しちゃってください




※id と class を選択できますが 1ヶ所でしか使いませんので id のままで・・・・



次のページに移ると

今、選択したメニューが実際に現れます

マウスをのせたりしてこれでOKでしたら
下の Here is the HTML for this list: に HTML が

Here is the CSS for this list: に CSS が出ていますので

枠内で 右クリック → すべて選択 → コピー メモ帳とかにコピペしておきます




メッセージボード、フリースペース、フリープラグインなどに貼り付けます

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://ameblo.jp/exlink/">ホーム</a></li>
<li><a href="http://profile.ameba.jp/exlink/">ルーム</a></li>
<li><a href="http://photo.ameba.jp/user/exlink/">フォト</a></li>
<li><a href="http://vision.ameba.jp/search/user.do?user=exlink">動 画</a></li>
<li><a href="http://msg.ameba.jp/popupSendMessageInput.do?toAmebaId=exlink" target="_blank" >メッセージ</a></li>
</ul>
</div>


※メッセージだけは新しいウインドウを立ち上げますので aタグに target="_blank" を加えます




CSSに貼り付けます


#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}



メッセージボード、フリースペース、フリープラグインで使用するならこのままで使えます

が、メニュー項目が多いと折り返してしまいますので

その場合は項目を1行で収まるように少なめにするか、縦型のメニューにして下さい

見本 http://ameblo.jp/exlink001/ 左サイドに付けてあります


メッセージボードにもサイドバーにも配置したいって場合は

id="navcontainer" id="navlist" ココのid名を変更して(適当でOK)から設置してください

それぞれのHTMLとCSSのid名は同じにしておいてメッセージボード用とサイドバー用のid名は違うid名にしてください


※フリースペースに貼り付ける場合はアメブロのエディタが余計な<br>(改行)を

 勝手に入れてしまいますので削除しないと表示がおかしくなります


<div id="navcontainer">
<ul id="navlist">
<li><a href="http://www .">ホーム</a></li>
<li><a href="http://www .">アメンバー</a></li>
<li><a href="http://www .">読 者</a></li>
</ul>
</div>


メッセージボードに貼り付ける場合はHTMLを表示でこのまま貼り付けてください

上のようなコピーしたままでフリースペースへ貼り付けると改行が付けられてしまいます

ので、↓このようにつなげちゃってからフリースペースに貼り付けてください


<div id="navcontainer"><ul id="navlist"><li><a href="http://www .">ホーム</a></li><li><a href="http://www .">アメンバー</a></li><li><a href="http://www .">読 者</a></li></ul></div>



他にもCSSメニュージェネレータはたくさんあります
日本語を入れると文字化けする場合がありますが
メニュー項目以外はそのまま使えますので
ダウンロードやコピーしたあとで文字化けしたメニュー項目を訂正すればOKです

まっ、パターンみたいなのがあってやっているうちに自分で作れるようになります


IzzyMenu.com
http://www.izzymenu.com/


CSS Menu Generator
http://www.cssmenumaker.com/


メニュージェネレータではありませんが・・・・
Drop Down Tabs (5 styles)
http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm




次はタイトル部分に設置します・・・・・

って、タイトル部分がどうなっているかはみなさんバラバラですから・・・・

それよって出来たり出来なかったりで・・・・ 

うまく説明できる自信がありません・・・・・

ど~しましょ・・・?




CSS メニューを作っちゃおう(動画はドコ?)

CSS メニューを作っちゃおう(動画はドコ?)3
CSS メニューを作っちゃおう 4 CSS 
メニューを作っちゃおう5(横メニュー1)

CSS メニューを作っちゃおう6(横メニュー2)
CSS メニューを作っちゃおう7 画像の置き換え