MuLife

MuLife

日常の調べ事を忘れないようメモ変わりに。。。

MuLife

コミュファ光300メガから1ギガへ変更。速度を比較。

はじめに

コミュファ光に入って10年以上が経ち、100Mから300Mに変更したのが数年前でした。

特に通信速度が遅く感じるということはなかったのですが、今の時代家電もインターネットに繋ぐ時代ですからね、タブレットスマホ、テレビ、レコーダー、パソコン、プリンター等 他にも色々とネットに繋がる機器達がいるわけですよ。

そのうち洗濯機やらエアコンやら冷蔵庫やらもネットに繋がりそうなんで、早めに1ギガにしとこうと思い変更しました。しかも今後増える可能性もあるので。。。

速度比較

結果はご覧の通りです。

------変更前 300メガ------

→くだり 234.8Mbps
→のぼり 278.1Mbps

コミュファ速度

300M契約なのでパフォーマンスは良いように感じます。




------変更後 1ギガ------

→くだり 489.4Mbps
→のぼり 802.5Mbps

コミュファ速度

感想

数字だけ見ると結構速くなってますが、正直使用してる感じは

「やばい!すげー速いよ!!さくさくだよ!」

なんて事にはならず、なんとなく早くなった気がする程度でしたが満足です。

プラシーボ効果的なものかもしれませんし、まぁ自分が満足ならそれで良いと思います。

若干速度が気になる方がいましたら検討してみるのもいいかもしれませんね。




速い契約に変更する場合LANケーブルのカテゴリーやパソコンの性能にも気をつけてください

カテゴリーの低いケーブルを使用していたり古いパソコンのせいでせっかく1ギガ契約したのに速度がちゃんと出ない場合がありますからね。

お得な情報

価格.com経由で申し込みをすると公式サイトから申し込むより割引率が良いですよ!

吹き出しを使用して会話形式にする。はてなブログ

拭き出しを使用する

よく見ますねこんな感じの拭き出し。

そうですね。 やってみたかったんですが、難しそうで。。。

意外と簡単ですよ。基本コピペなんで。。。(爆)

こんな会話形式をやってみたくて調べてみました。

基本HTMLとかCSSとか全くといっていいほど触れない自分でも出来たので、誰でも出来ると思います。

というより誰でも出来るような参考サイトを作ってくれた方に感謝です!

ありがとうございます。

それではできるように設定していきましょう!

参考サイト

www.notitle-weblog.com

ありがとうございました。

コードの記述場所

デザインカスタマイズ{}デザインCSS

はてなブログカスタマイズ   はてなブログカスタマイズ

下記コードを先ほどのCSSの場所へコピペして下さい

CSSにすでにコードが書かれている場合(自分もそうでした)は、一番に下に追加すればいいと思います。

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
    position: relative;
    width: 80%;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 20px;
    border-radius: 6px;
    border: 2px solid #999;
    box-shadow: 1px 1px 5px #aaa;
    background-color: #fff;
    z-index: 1;
}
.entry-content .l-fuki {
    margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
    margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
    position: absolute;
    content: "";
    top: 16px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    background-color: #fff;
    z-index: 2;
}
.entry-content .l-fuki::before {
    right: -7px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
    left: -7px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    top: -10px;
    border-radius: 40px;
    border: 3px solid #fff;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
    right: -110px;
}
.entry-content .r-fuki::after {
    left: -110px;
}
@media screen and (max-width: 620px) {
    .entry-content .l-fuki,
    .entry-content .r-fuki {
        width: 70%
    }
    .entry-content .l-fuki {
        margin-right: 30%;
    }
    .entry-content .r-fuki {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .l-fuki::after,
    .entry-content .r-fuki::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .l-fuki::after {
        right: -84px;
    }
    .entry-content .r-fuki::after {
        left: -84px;
    }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

クラス名と画像のURLを自分のサイトの情報に書き換えてください。

※先頭文字に数字は使えません。

※クラス名の前に点(ピリオド)があるので間違って消さないように。

クラス名

クラス名は自分がわかりやすい名前を自由に決めて大丈夫です。例えば、僕の場合ですと

.fukidashi1 ::after {background-image:url(画像のURL);}

.fukidashi2 ::after {background-image:url(画像のURL);}

とかにしています。

.boy ::after {background-image:url(画像のURL);}

.girl ::after {background-image:url(画像のURL);}

というように名前さえ変えればいくつでも作れます。 作った分だけ画像を用意すれば登場人物も増やせます。

画像のURL

画像のURLはHatenaFotolifeで使用したい画像を表示させ右クリックで画像アドレスをコピーでコピーできます。

カスタム画面

.fukidashi2::after {background-image:url(コピーした画像アドレスをここにペースト);}

※この場合fukidashi2にC-3POの画像を使用しました。

まとめ

クラス名:fukidashi2

画像のURL:C-3POの画像のアドレス

.fukidashi2::after {background-image:url(C-3POの画像のアドレス);}

となります。

同じようにfukidashi1にはダースベーダーの画像を使用しました。

.fukidashi1::after {background-image:url(ダースベーダーの画像のアドレス);}

となります。これで会話形式が使用できる状態になりました。

ブログでの使用方法

Markdownで使用しています。

では、実際にブログで使用してみましょう。

<p class="l-fuki クラス名">テキスト</p>

<p class="r-fuki クラス名">テキスト</p>

  • l-fukir-fuki があるので話す画像によって使い分けます。
  • クラス名には上で設定したクラス名を入れます。
  • テキストは話す言葉を入れます。

r-fukifukidashi2(C-3PO)を使用して、「こんにちは」と話してみます。

<p class="r-fuki fukidashi2">こんにちは</p>

こんにちは

l-fukifukidashi1(ダースベーダー)を使用して、「できました!」と話してみます。

<p class="l-fuki fukidashi1">できました!</p>

できました!

ヘッダー画像の余白をなくして表示する。はてなブログ

まずはじめに

ブログを始めばかりのペーペーの分際ですが、先輩方のスタマイズ方法を参考にカスタマイズしました。ありがとうございます。

f:id:y_MuRa:20170604193115p:plain

HTML? CCS?

何それおいしいの?状態の カスタマイズ初心者ですが、 ブログを作成してまず思ったのが、オシャレなデザインへの憧れ。といことでとりあえずヘッダー画像を変えてみようと思い、カスタマイズ初心者なりに悪戦苦闘しながら変えてみました。

f:id:y_MuRa:20170619144445p:plain

ヘッダー画像はとりあえず簡単に1400×250pxの背景に色をつけて文字を挿入しただけです。「Simple is best」ですね。windowsの標準ソフト「ペイント」で作成しました。 そのうち変更する予定ですが、予定は未定です。。。(爆)

参考サイト

tawashino.hateblo.jp

www.tukinasikotonoha.com
ありがとうございました。

コードの記述場所

下記コードを
デザイン カスタマイズヘッダタイトル下にコピペしてください。

はてなブログカスタマイズ

<style type="text/css">
   .header-image-wrapper {display:none;}
   #blog-title{display:none;}
   .headernew img{
       max-width:1400px;
       margin: auto;
       display: block;
   }
   .headernew a{
       display:block;
       background-color:#背景色;
   }
   .headernew{
       margin:0px!important;
   }
</style>
<h1 class="headernew">
     <!-- -->
     <a href="ブログトップページURL"> 
        <img src="ヘッダー画像URL" alt="ブログタイトル" width="100%">
     </a>
</h1>

下記を自分のサイトの情報に書き換えてください。

背景色
ブログトップページURL
ヘッダー画像URL
ブログタイトル

max-width:1400px;となっていますが、ここもヘッダー画像サイズの横幅と同じにしました。

画像範囲

タイトルヘッダー画像

max-width:1400px;設定なのでフルHDモニタの全画面で見た場合、上の画像の点線内が画像でその周りが背景色です。因みにmax-width:1920px;にすれば全てヘッダー画像表示になりました。

最後に

ヘッダー画像の色と背景色が同じ色にならない というトラブルもありましたが、何とか上手くできました。

色を調べるのに役立つサイト www.colordic.org

初投稿!!はじめましての挨拶。

はじめまして。

Muraと申します。

記録とメモ代わりに更新していこうと思います。

なんせ文章力がない為、誤字、脱字の多い読みづらい文章になるかもしれませんが悪しからず

モチベーションを上げ、飽きないように楽しく更新できればと思います。



って言ってもまだ誰もこのブログ読む人がいないので ただの独り言ですね。

宜しくお願い致します。。。