はてなブログよ!私は帰ってきた!
この度放置されていたブログを復帰させることにしました!
みなさんが楽しめるような記事、例えば面白ガジェットやライフハックっぽいのを中心に書いていきたいですね!
そんでは!ヾ( ´ー`)ノ
ついにWindows10で自作PCを組んでみた!
前々から興味があった自作PCをついに作ってみました!
実は先月中に自作PCパーツを揃えて、組み立てていました!
流石にすべて最新のパーツを揃えるだけの資金がないので、今回は新品:3、中古品:8くらいの割合で揃えました。
自作PCは自分のやりたいことに合わせて組めるのでメーカー製PCではできないカスタマイズができるので、凄くオススメです!
しかしあれです。高性能を求め続けると切りがないので妥協点も必要なんですね。
組み立てるときのワクワク感、組み立ててうまく動いたときの嬉しさはたまりません!
そんなわけで、今回は自分が自作PCを組んでみたお話です!
もくじ
パーツリスト
今回用意したパーツを一覧でまとめてみました。パーツ名 | 商品名 | 価格 | 備考 |
---|---|---|---|
CPU | Intel Core i7 870 2.93GHz | 9,980円 | リテールクーラ付BOX品 |
マザーボード | ASUS P7H55D-E EVO | 7,560円 | LGA1156 ATXマザーボード |
メモリ | 5,980円 | 4GB * 2 = 8GB | |
グラフィックボード | ZOTAC NVIDIA GeForce GTX 650 | 7,538円 | コアクロック:1,071MHz, メモリ:GDDR5 1GB, DL-DVI-I*1、DL-DVI-D*1、mini HDMI 1.4a*1 |
光学ドライブ | Sony AD-7260S | 1,080円 | DVDマルチドライブ |
ストレージ | Seagate ST3320820AS 320GB | 3,240円 | |
電源ユニット | DELTA GPS-750AB | 2,600円 | ATX 80PLUS 750W電源 |
PCケース | ZALMAN Z9U3 | 4,320円 | ケースファンコントローラ搭載 |
OS | Windows10 64bit DSP版 | 16,083円 | PCIボードと一緒に購入 |
PCIボード | 玄人志向 USB3.0x4 インターフェースボード(PCI-Express x1接続) USB3.0R-P2H2-PCIE | 2,358円 |
計 60,739円
自分でも「自作PCのほうがメーカーPCよりも安上がり」なんて思い込んでいた時期がありましたが、残念ながら逆でした。
自作PCというのは使用目的や求める快適さに合わせてパーツを組んでいくものです。
ただ、次回PCを組み直すときには流用できるパーツがいくつもあるので、少し安上がりで済みます。
あとはもう趣味の領域です。
自分好みにカスタムできれば満足ですね( ̄∇ ̄*)b
PCパーツ組み立て
まずは開封の儀(?)から。CPU
Intel Core i7 870 2.93GHz
今のところオーバークロックする予定はないので、リテールクーラーがついてきたのは凄くうれしい!
あとはターボブースト機能が使えるので、負荷がかかるような作業をしていたりすると自動的にCPUのクロック数が増えます。
タスクマネージャで確認してみたところ、だいたい3.2GHzくらいまでブーストかかってました。
やー、すばらしい!
マザーボード
ASUS P7H55D-E EVO
LGA1156ソケット対応でメモリは最大16GBまで積めます!
メモリ
Buffalo PC3-10700(DDR3-667) メモリ * 2
グラフィックボード
ZOTAC NVIDIA GeForce GTX 650
DVI I、D型、miniHDMIポートがついてます。
光学ドライブ
Sony AD-7260S
電源ユニット
DELTA GPS-750AB
750W 80Plus 電源です。
グラフィックボード複数付ける訳ではないので、750Wだと電力供給多すぎますね(笑
PCケース
ZALMAN Z9U3
中古で購入しました。
買ってから気づいたのですが、ZALMANのHDDマウンタ(防振ゴム)って独自仕様でしかもマウンタのみの販売がされていないんですね(^^;
HDDマウンタは付属されていなかったので、今回はDIYでグルーガンを使ってマウンタ作成してます。
電源スイッチも2,3回押したら電源入らなくなりました(汗
これも電子工作用に以前購入していた普通のタクトスイッチに差し替えて使うことにしましたw
OS
Windows10 64bit DSP版
実は9/4に発売されるWindows10 Home 通常版のほうが安く、しかもライセンスの特性上だとPCパーツ全取り換えしても使えるので、そちらのほうがよかったのですが、早くWindows10使いたいがためにDSP版を先に購入してしまいましたw
PCIボード
玄人志向 USB3.0x4 インターフェースボード(PCI-Express x1接続) USB3.0R-P2H2-PCIE
Windows10 DSP版と一緒に購入したものです。
丁度、PCケースのUSB3.0ポートケーブルの挿すところが欲しかったので購入しました。
PCケースにマザーボードを入れる前にやること・・・それが最小構成での起動テストです!
静電気が起きなさそうでマザーボード接地面が絶縁体になっている場所で電源ユニット、マザーボード、CPU(ファン含む)、メモリ、グラフィックボード、HDDを接続して電源を入れてBIOSが起動するか確かめます。
起動確認
電源を投入したらBIOS設定画面を表示させます。たいていは[DEL]キーか[F2]キー連打でBIOS設定画面に切り替わります。(PC電源投入直後に表示されるBIOSロゴ画面の下部にキー表示があるかもしれません)
問題なく起動できたようです。
起動しない場合は電源ユニットのスイッチがONになっているか、CPU電源ケーブルがささっているか、メモリがしっかりささっているか、差し込む場所を間違えていないか確認しましょう!
ついでにHDDが認識できているかも確認しておくといいかもしれません!
最小構成で起動できたら、メモリを更に挿しても起動、認識するか確かめましょう!
もしメモリ挿しても起動しない場合はメモリが故障しているかもですね。メモリを1つずつ差し替えて故障しているメモリを特定するのが良いかもしれませんね!
これが終わったらPCケースに最小構成テストしたものを格納します。
PCケースファンケーブルの接続も忘れずに。
OSインストール
スポンサーリンク
さて、いよいよWindow10のインストールですが、意外と簡単でした。
言語、時間、キーボードの設定。
今すぐインストールするざんす!
ちょっと一息。
Windows10のパッケージに書いてあるプロダクトキーを入力ですね。ポチポチっと。
[同意します]のチェックですね。ポチっと。
OSインストールではおなじみのパーティション設定。
今回はインストールするHDDを間違わないように1台のみHDD積んだ状態でやってます。
OSインストール先のパーティションを選択。
ここでまたちょっと一息。
無事にインストールは終わったようです。
レッツ再起動!
ここからは初期設定ですね!
初期設定も3,4ページだけでした。らくちんですね!
あとは待つのみです。
Windows10のインストール完了ですね!
デスクトップの背景が綺麗!
さてこれでネットサーフィンができるぞ!と思いきや実はまだやることがあるのですよ!
ドライバインストール
マザーボード、チップセットドライバインストール
デバイスマネージャ確認しましたが、ビックリマーク(!)がついているのはグラフィックボードとUSB Wi-Fiアダプタのみでした。
本来はマザーボードに付属されているドライバディスクからドライバのインストールをするのですが、中古品だったので、ディスクはついてきませんでした。
なので、インターネットにつながってから後程ASUSさんのWebサイトからドライバをダウンロード、インストールしました。
NVIDIA GeForce GTX 650
今回はグラフィックボードのパッケージに一緒に入っていたディスクからドライバをインストールし、デバイスマネージャから最新のドライバにアップデートしています。
ネットにつながっていれば、NVIDIA公式サイトから直接最新版のドライバをダウンロードしてもいいかもですね!
PLANEX GW-USH300N(USB Wi-Fiアダプタ)
あらかじめ別のPCでPLANEX公式サイトからドライバ(ユーティリティソフト)をダウンロードしてZip解凍しておきます。
ダウンロード|GW-USH300N:PLANEX
そのままユーティリティソフトをインストールしても残念ながらドライバは適用されませんでした。
デバイスマネージャからのドライバインストールでも同じです。
入れようとしているドライバのINFファイルにはデジタル署名が含まれていなく、Windows8以降からドライバのINFファイルにもデジタル署名が必要になったのが原因のようです。
かといってドライバのインストールができないかというと、うまく回避してインストールする方法があります。
大まかな流れはこんな感じです。
- BIOSでセキュアブートOFFにする(※BIOSがセキュアブートに対応している場合)
- Windows10をテストモードONにする
- ドライバー署名の強制を無効にして再起動する
- Windows Smart Screenを無効にする
- ドライバインストール
- Windows Smart Screenを有効にする
- Windows10をテストモードOFFにする
- BIOSでセキュアブートONにする(※BIOSがセキュアブートに対応している場合)
今回は下記サイトさんなどを参考になんとかインストールはできました。ありがたやー。
- Windows10で署名なしドライバをインストールする方法/テストモードにする方法 - ぼくんちのTV 別館
- デバイスドライバインストール時に 「指定されたカタログファイルにファイルのハッシュがありません。」 と表示された場合の回避方法 | an10.info
念のため、今回行ったドライバインストールの手順だけ書いておきます。
ほかの手順に関しては上記サイトさんが詳しく書いてくれているのでそちらをご覧ください(べ、べつに手抜きなんてしてないんだからね!
ドライバインストール(手動)
まずは別PCでダウンロード+解凍しておいたドライバ(ユーティリティソフト)をUSBフラッシュメモリなどを使ってインストール対象のPCのデスクトップなどに移動しておきます。
[Windows]キー + [Pause]キー 押下で[システムプロパティ]画面を表示させます。([エクスプローラ]>[PC]を右クリック>[プロパティ]でもいけます)
画面の左メニューの[デバイスマネージャ]をクリックします。
[デバイスマネージャ]上でビックリマーク(!)のついているWi-Fiアダプタを右クリックし、[ドライバーソフトウェアの更新(P)]を選択します。
[コンピュータを参照してドライバーソフトウェアを検索します(R)]を選択します。
[参照]ボタンをクリックし、ドライバフォルダの中の如何にもドライバが入っていそうなフォルダ(driverとか書いてある)を開いていき、Windows OSのbit数に合わせてWin7X64(64bit),WinX86(32bit)のどちらかのフォルダを選択します。[次へ]を押します。
[ドライバーソフトウェアの発行元を検証できません]と表示されますが、[ドライバーソフトウェアをインストールします]を選択します。
これでドライバの手動インストールは完了です!
動作確認
パフォーマンスチェック
Windowsエクスペリエンス
Windows8.1からWindowsエクスペリエンス(パフォーマンス評価ツール)のGUI版が消えてしまいました。
一応以下のサイトさんにWindows10でのWindowsエクスペリエンスの利用方法を紹介してくれていたので、参考にしてパフォーマンスの測定をしてみました!
Windows8.1/10でエクスペリエンスインデックスを使う方法! - 裏技shop DD
管理者権限でコマンドプロンプトを起動し、以下のコマンドを実行します。
winsat.exe formal
あとは下記URLの"WinSAT Viewer"さんにアクセスし、説明にしたがって指定されたxmlファイルをアップロードすると結果が表示されます!
http://winsat.aroundit.net/ja/
コンポーネント | スコア |
---|---|
プロセッサ | 7.6 |
メモリ(RAM) | 7.6 |
グラフィックス | 8.1 |
ゲーム用グラフィックス | 9.9 |
プライマリハードディスク | 5.9 |
全体的にパフォーマンスはいいほうだと思います!(たぶん
ベンチマーク
PSO2
ドラゴンクエストX
ファイナルファンタジーXIV
ベンチマークスコアの比較対象がないため、このスコアが良いのか悪いのか・・・うーむ。
各ベンチマーク公式サイトの基準で確認したところ、スコア的には快適にプレイできるレベルのものらしいです。ふー、よかった。
まとめ
- 自作PCが完成した
- 自作PCは自分のやりたいことに合わせて組める
- Windows7以前のドライバでも適用することは可能
- パフォーマンスは比較できる対象があるとどのくらいの性能なのかがわかりやすい
これでやっとWindows10が使えるようになったので、ガシガシ使い込んでいきたいところです!
もし興味があるかたは是非やってみていただきたいです!凄く楽しいですよ!!
そんでは!ヾ( ´ー`)ノ
激安SIMへ乗り換えたときのメールアドレス移行についての疑問点
前回のUQmobileへの乗り換えの記事から少し時間がたってしまいましたが、今回はメールについてのお話です!
激安SIMへの乗り換えを検討するときにネックになってくるものの一つとしてメールアドレスが存在します。
キャリアから激安SIMに乗り換えるとなるとキャリアメールから他のメールに移行する必要がでてきます。
私の場合、激安SIMに乗り換えたときのメールに関する疑問点は以下のようなものでした。
メールアドレス移行に関するの疑問点
- 激安SIMにキャリアメールが存在するかどうか。また、今持っているスマホに対応しているかどうか
- キャリアメールのようにリアルタイムでメールが自動受信させるのか
- 受信したメールの差出人が電話帳に登録されている名前で表示されるのか
- セキュリティ面はどうか
- まとめ
激安SIMにキャリアメールが存在するかどうか。また、今持っているスマホに対応しているかどうか
激安SIMによってまちまちですが、今回乗り換えたUQmobileさんには○○○@uqmobile.jpというメールアドレスを発行できるようです。メールサービス|【公式】UQ mobile|UQコミュニケーションズ
メールの送受信にはSMSアプリの"Googleハングアウト"を利用します。
しかし、全てのスマホで対応しているわけではないそうなので、対応機種表を確認しました。
動作確認端末一覧|UQmobile|格安スマホ・格安SIMのUQmobile
対応機種表を確認したところ、ほとんどの機種が対応しておらず、もちろん私が使っているSonyのXperia ZL2(SOL25)も対応していませんでした。
しかもハングアウトを使用するメールだと、Wi-Fi接続時の送受信やHTML、デコメールが使用できないらしい!?これって結構致命的のような・・・w
「それじゃあメールは使えないの!?」と思うかもしれませんが、そんなことはありません!
激安SIMでメールを使えるようにする方法はいくつかあります。
今回はプロバイダメールやWebメールをメールアプリに設定して使うことを考えます。
プロバイダによってはメール受信方式がIMAP(メールサーバ上でメールの送受信をする方式。クライアント側では実際にメールを取得している訳ではなく、ただ閲覧や操作をしているというもの。)に対応して会社もあるので、その場合はプロバイダメールを使用することをオススメします。
Webメールに関してもGmail,Hotmail,Yahoo!メールなどあり、こちらもIMAPに対応していれば使用できます。
私はGmailを使うことにしました。
私の場合、契約しているインターネットプロバイダのメールがIMAPに対応していないんですよね( ̄ー ̄; ヒヤリ
Webメールというとセキュリティが低いイメージがあるかもしれませんが、最近はセキュリティ強化されてきているので、安心して使用できます!
こちらに関しても「セキュリティ面はどうか」にて記載いたします!
キャリアメールのようにリアルタイムでメールが自動受信させるのか
Gmailに関してはGmailアプリ、プッシュ通知に対応しているメールアプリならばリアルタイムで自動受信できます。今回はIMAPプッシュ通知対応のk9-mailを使いました。
受信したメールの差出人が電話帳に登録されている名前で表示されるのか
公式Gmailアプリではこれができないです。
しかしなんと、k9-mailはこれに対応しているのです!
セキュリティ面はどうか
スポンサーリンク他人がネット上からWebメールにアクセスできてしまう?
Webメールはその名の通り、インターネットブラウザ上から使えるメールです。
インターネットにつながってさえいれば、どこからでもメールができるという利便性がありますね!
ただし、デメリットもあり、インターネットからアクセスできるということは逆に言えば誰でもアクセスできてしまう可能性があるということです!
一般的にこれを不正アクセスというのですが、手口は大きく分けて2通り。
- 対象のID(メールアドレス)に対してパスワードの文字列を総当りで組み合わせてログイン認証を突破する手法です(総当り攻撃)
- ウイルスや危険サイトなどによるキー入力情報の盗み取りです(キーロガー)
2.に関してはお使いのPC、スマートフォンにウイルス対策ソフトを導入する、危なそうなサイトを避けることで大体は防げます。
1.についてはウイルス対策ソフトでは防ぐことはできません。
対処法としては2段階認証(ワンタイムパスワード)を利用することです!
ワンタイムパスワードは一定時間間隔でパスワードが変わるという第2のパスワードです。
Googleでワンタイムパスワードを利用する方法はいくつかあります。
- 携帯メール通知
- 音声通知
- 「Google認証システム」アプリ
今回はキャリアメールが使えないので、必然的に2つ目か3つ目になるわけですが、私としては「Google認証システム」アプリが便利でいいと思います。
複数アカウントもまとめて管理できて、毎回Googleから認証コードの電話かかってこなくて済むので凄く楽ですね!
実は私も以前マイクロソフトアカウントが乗っ取られました。
幸いにしてアカウントを取り戻せたのですが、当時はまだ2段階認証が実装されていなかったので、パスワードを定期的に変えたりパスワードを長くしたりぐらいしか対策がありませんでした。
今は2段階認証などアカウントハック対策がなされているので、使わない手はありませんね!
まとめ
- 激安SIMのメールが使えない場合はIMAPに対応しているメールを使おう!
- IMAPプッシュ通知に対応しているアプリでリアルタイム受信しよう!
- K9-mailなら受信したメールの電話帳での差出人名が表示される!
- 2段階認証でセキュリティ強化!
そんでは!ヾ( ´ー`)ノ
ついにAUからUQmobileへ乗り換えました!
前々から激安SIMへの移行を考えていましたが、ついやりましたぜ!
実は昨年の9月にスマホをXperia ZL2 SOL25に機種変したばかりなので、他キャリア激安SIMへの乗換えができなかったというのもあり、今回はAU系のUQmobileに切り替えました!
実際のところ、激安SIMへの乗換えを躊躇していたところもあります。
やはりキャリアのほうがサービスの質がいいのと、AUは最近激安スマホプランというのもはじめたので、どうしようか非常に迷ったところでもありました。
ちなみにAU激安スマホプランについてはいつもお世話になっているid:mihohimeさんのブログから知りました。激安SIM関連についてめちゃくちゃ詳しく書いてくださっているのでキャリアからの乗換え検討時に参考にさせていただきました!
ただやはりキャリアの基本料金はちょっと高く、プラン変更してもそこまで安くなるわけでもありませんでした。
そして、丁度今月はAUの「誰でも割」契約更新月!今月中に解約すれば違約金は発生しません!
今までかかっていたケータイ代はこちら。
AU
LTEプラン(誰でも割加入) + LTEフラット + LTE NET | ¥7,488/月 |
テザリングオプション | ¥500/月 |
スマートフォン端末代 分割支払い額 | ¥2,250/月 |
計 | ¥10,238/月 |
私が契約したUQmobileのプランは以下のものです。
UQmobile
プラン | データ高速+音声通話プラン(SIM単体) |
月額基本料金 | ¥1,680 |
通信速度 | 受信最大150Mbps 送信最大25Mbps ※月間通信量3GB超過後は送受信最大200Kbps |
※対応機種であればテザリング、SMSは無料で使用可能です。
基本料金だけで考えても月々約¥6,000くらい携帯代の削減ができるのですね!
これはUQmobileに切り替えない手はない!と考えた私は早速契約しに行ったのですが、実は注意点があります。
AU系SIMのUQmobileやmineoではインターネットは4G回線、通話は3G回線として使用されています。
なので4Gがつながらないところではインターネットに接続できないのでご注意を!
切り替える前に自宅や勤め先付近などで4Gの電波を受信しているかどうか確認しておくといいかもしれません!
ということで、今回は乗換えのときにどんなことをしたかを書いてみますね!
やったこと
クレジットカードの取得
ほとんどの激安SIM契約では支払い方法がクレジットカード引落しになります。
私の場合は普通預金口座を持っている銀行でクレカの発行をしてもらいました。
ネットで申し込みができたので、わざわざ休暇を使って銀行の支店へ足を運ぶ手間が省けました!
ちなみに最近、高速道路を利用する機会が地味に多くなってきていたので、ついでにETCカードも発行してもらいました( ̄ー☆キラリーン
料金所で時間もかからず、通行料も割引になるので一石二鳥!
MNPの転用番号発行
今まで使っていた電話番号をそのまま使い続けるために転用番号を発行してもらい、移行先で転用手続きをします。
転用番号の発行方法は
- 電話で発行してもらう
- AUショップで発行してもらう
- ezweb上で発行してもらう
の3通りです。
詳しくはこちら↓
私は電話で転用番号の発行してもらいました。
所要時間は約10分。
現在契約中のプラン、解約料金、スマホ購入代金の残金支払いについてなど確認してくれるので、質問などはこのときにしておくといいかもしれません。
それが終わると転用番号の発行になります。転用番号は必ずメモを取り、繰り返し確認するようにしましょう。
電話で対応してくれたAUスタッフさんはひどく残念がっていました。
長い間大変お世話になりました!
ケーズデンキさんのケータイカウンターで手続き
近くのケーズデンキさんでUQmobileを取り扱っているらしいので突撃!
手続きは簡単でしたが、以下のものは必ず持参するように!
- クレジットカード
- 身分証明証(運転免許証など)
- 乗換え対象のスマホ
ネットワーク設定(AU自動解約)
スポンサーリンク
手続きが終わるとSIMカードがもらえるので、今まで挿していたAUのものと差し替えます。
UQmobileさんの場合はこんな感じ。
ケースを開くとSIMカードが姿を現します!
赤丸の箇所をカッターなどで丁寧に切り取ります。
このときICチップが傷ついたり、割れたりしないように気をつけましょう!
スマホの電源を切り、SIMカードアダプタを取り出します。
私は爪でうまく取りましたが、できればスマホに付いてきていたSIMカード取り出し用のピンを使いましょう!その方が安全です!
新しいSIMカードをアダプタにセットしたら、スマホに挿入して電源を入れます!
スマホが起動したらアプリ一覧から[設定]を開きます。
ちなみに私の場合はSOL25なのでAndroid 4.4.2のケースです。
[その他の設定]を選択します。
[モバイルネットワーク]を選択します。
[高度な設定]を選択します。
すると以下のような画面が表示されるので、各社で決められているネットワーク設定内容を入力していきます。
UQmobile
ネットワーク設定方法 | 各種設定方法について | ご利用ガイド、製品サポート | サポート・FAQ | 格安スマホ・格安SIMのUQ mobile
mineo
ネットワーク設定(Android™・Firefox OS端末)|各種設定|ご利用時の各種設定|初期設定と各種設定|mineoユーザーサポート
あとはWi-FiをOFFにしてUQmobileの回線に接続できるか確かめてみましょう!
実際に使ってみた感想
AUよりは通信速度は遅いようですが、体感であまり遅さを感じられませんでした。以前と同じようにネット見られます。
音声通話に関してAUのときと音質の違いはほとんどわかりませんでした。
ちなみにUQmobileのメールアドレスはSOL25では使用できないそうなので、Gmailをメインで使うことにしました。
ただ、Gmailアプリだと色々と不便な部分があるので、そのあたりどうやったかは後日書きつづろうと思います!
そんでは!ヾ( ´ー`)ノ
激安SIMと格安スマホではじめる “月500円”からのスマホ生活! (TJMOOK)
- 出版社/メーカー: 宝島社
- 発売日: 2015/04/04
- メディア: ムック
- この商品を含むブログ (1件) を見る
UQ-mobile UQ-mobile エントリーパッケージ(microSIM/nanoSIM 共用)データ通信・音声通話 に対応 VEK06JYV
- 出版社/メーカー: UQ-mobile
- メディア: エレクトロニクス
- この商品を含むブログを見る
はてなブログにナビゲーションメニューを追加してみた!
前回の記事「ブログをはじめたあの頃、"はてなブログpro"にしようか迷っていた3つの理由 - 水菜巻のメモ的ななにか。」でナビゲーションメニューを付けてみたい!って書いていましたが、早速やってみたの巻。
今更かよっ!と言いたいところですが、今更なんですo...rz
実は他の方がやっているのを見て前々からいいないいなと思っていたところでしたヾ( ´ー`)ノ
マネー報道 MoneyReport
格安スマホ SIMで節約生活^^
スキナモノート
便利かつ見た目もグッドですよね!
今回は簡単に自力でゴリゴリ書いてみました!
入れ子式サブカテゴリ表示にはしていないのですが、追々そんな風にできたらいいですね!
あと背景画像の素材の味(?)を活かしたかったのでメニューは透過処理しています。
こんな感じになりました( ̄▽ ̄;)
スクリーンショット
PC版
スマホ版
メニューボタンタップ時
スクリプト
PC版
HTML
<ul class='navi'> <li><a href='http://mizna.hatenablog.com/'>HOME</a></li> <li><a href='http://mizna.hatenablog.com/archive/category/Android%E3%82%A2%E3%83%97%E3%83%AA%28%E8%87%AA%E4%BD%9C%29'>Android</a> </li> <li><a href='http://mizna.hatenablog.com/archive/category/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9'>Web</a></li> <li><a href='http://mizna.hatenablog.com/archive/category/Linux'>Linux</a></li> </ul>
[デザイン] - [カスタマイズ] - [ヘッダ]でHTMLコードを挿入しました。
こちらは何も考えずにリストでシンプルに。
CSS
.navi { width:100%; height: 30px; list-style: none; text-align: center; font-size: 20px; margin-bottom: 10px; } .navi a { color:#fff; } .navi li { width: 150px; float:left; line-height:40px; background-color: rgba(0,169,0,0.8); margin: 0 1px; } .navi li:hover { background-color: rgba(0,169,0,0.2); } .navi li a { display: block; text-decoration: none; } #top-box { color: #fff; margin-top: 10px; } #top-box a { color: #fff; }
[デザイン] - [カスタマイズ] - [デザインCSS]でスクリプトを追加しています。
リストの背景を通常時80%、マウスオーバー時20%で透過するようにしました。
rgba()の行で警告マークでますが、css的には問題ないはずです。
スマホ版
HTML + javascript + CSS
<style type="text/css"> <!-- #navi_btn { position: absolute; float: right; top: 50px; right: 10px; font-size: 40px; color: rgba(0,0,0,0.2); line-height: 30px; padding: 0 4px; z-index: 10; } #navi_sp { position: absolute; float: right; top: 30px; right: 0; width: 100%; display:none; z-index: 5; } #navi_sp li { list-style: none; color: #fff; line-height:40px; background-color: rgba(0,0,0,0.7); text-align: center; border-bottom: 1px solid rgba(255,255,255,0.6); } #navi_sp li:nth-child(1) { line-height:40px; font-size: 20px; background-color: rgba(0,0,0,0.8); } #navi_sp li:last-child { text-align: left; padding-left: 10px; font-size: 12px; } #navi_sp li:hover { background-color: rgba(0,0,0,0.4); } #navi_sp li:hover:nth-child(1) { background-color: rgba(0,0,0,0.8); } #navi_sp li a { display: block; text-decoration: none; color: #fff; } //--> </style> <script type="text/javascript"> var flag = false; function toggle(){ if(flag == false){ $("#navi_sp").css("display","block"); $("#navi_btn").html("×"); $("#navi_btn").css("color","#fff"); flag = true; }else{ $("#navi_sp").css("display","none"); $("#navi_btn").html("≡"); $("#navi_btn").css("color","rgba(0,0,0,0.2)"); flag = false; } } </script> <div id='navi_btn' onclick='toggle();'>≡</div> <ul id='navi_sp'> <li>Menu</li> <li><a href='http://mizna.hatenablog.com/archive/category/Android%E3%82%A2%E3%83%97%E3%83%AA%28%E8%87%AA%E4%BD%9C%29'>Android</a></li> <li><a href='http://mizna.hatenablog.com/archive/category/Web%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9'>Web</a></li> <li><a href='http://mizna.hatenablog.com/archive/category/Linux'>Linux</a></li> <li><a href='http://mizna.hatenablog.com/'><< HOME</a></li> </ul>
[デザイン] - [スマートフォン] - [ヘッダ]でjavascript,CSSともにHTML内に埋め込んでみました。
上記PC版の[デザインCSS]内に記述するのもアリなのですが、スマートフォンの時だけスクリプト読み込むようにしてPC版で少しでも負荷減らしたかったのでこうしました。
javascriptではメニューボタンをトグルスイッチでメニュー表示のON/OFFできるようにしています。
CSSでは背景色の透過やメニューリストの行幅などの調整をしています。
まとめ
ナビゲーションメニューバーの追加ができました。
これによりカテゴリごとに記事を探すのが楽になりました。
しかしながら、入れ子式サブカテゴリ表示だともっと便利ですから、今後できればサブカテゴリ表示の方もつくっていきたいところです。
あと、「自分もやってみたい!」という方はこんなのでよければ参考にしてやってください!
その際は各自、自分のブログにフィットするようにCSSやHTMLの修正をお忘れなく!
そんでは!ヾ( ´ー`)ノ
- 出版社/メーカー: 明治
- メディア: 食品&飲料
- この商品を含むブログを見る