築和工房パソコン教室

初めてパソコンに触る方、エクセルやワードの実用的な利用方法を知りたい方、MOSやパソコン検定の資格を取得したい方、ホームページを作りたい方、Illustratorなどの専門的なアプリケーションを使いこなしたい方。幅広く総合的にパソコンを利用するノウハウをお手軽な金額でご指導いたします。

カテゴリ:PCヒント集 > Web・通信

15082701

ホームページビルダには「共有部分の同期」という機能がある。
ビルダが用意しているテンプレートならば「共有部分の同期」機能を利用できるだろう。
新たにテンプレートを作成する場合は…
そのヒントが、以下のページ

ホームページビルダー16に関してですが、「共通部分の同期を設定する」ができません。わかる方教えて下さい。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1189761846

とっても簡単「共通部分の同期・管理」をする方法

http://okodukai-cho.com/soft/biruda-douki.html

パソコンのWiFiネットワーク接続状態を確認する方法。
(1)コントロールパネルを開く
(2)ネットワークの状態とタスクの表示
(3)ネットワークの管理
15082603

15082602

15082601

グーグルマップのErthでは、航空写真の地図が出てきます。
通常は、下の写真のように店舗名や施設名(一般にランドマークと言います)が表示されます。
このランドマークを表示させないようにするにはどうしたらいいのだろうか?
以前は、簡単に非表示にできたはずなのですが・・・。
 15073001

検索窓の左側にある「メニュー」に目をつけました。
クリックしてみることにします。
じつは、ほかのところもさんざんクリックして、どれも「ハズレ」だったのですが。
15073002
メニューをクリックしたら「ラベルを表示」という文字が目に入りました。
マウスを当てて…クリックしてみます。
なんと、ランドマークの文字が表示されません。
15073003

やった~~~~~~~~~~~~~~~

はじめにマイドライブにしておきます。
c15072101

次に、右下にある 容量の表示部分にマウスを当てます。
すると、ウインドウが開きます。
c15072102
ドライブという文字をクリックします。
ファイルの大きな順からファイルが表示されます。

Gmailの上部に、メールを検索する窓があります。
cap150722c
この窓を利用して、メールの整理に役立てることができます。

いつのまにか、容量が圧迫されている!!

メールの下に、グーグルが提供する容量が表示されます。
グーグルでは15GBまでが、無料で利用できます。
cap150722a
cap150722b


検索の窓を利用して、メールの整理に役立てる

検索窓に
  has:attachment
と入力してみます。
添付ファイルが含まれているメールのリストが表示されます。

検索窓に
 size:1000000
と入力してみます。メールのサイズが1,000,000バイトつまり1MBを超えているメールが表示されます。

検索窓に
 lager:10MB
と入力します。メールのサイズが10MBを超えているメールが表示されます。

検索窓に
 before:2013/12/31
と入力します。2013年12月31日以前のメールが表示されます。

検索窓に
 before:2013/12/31 has:attachment
と入力します。2013年12月31日以前で添付ファイルが含まれているメールが表示されます。

以上
Gmailヘルプの「詳細検索」https://support.google.com/mail/answer/7190?hl=jaを参考にしました。
一部を引用します。
Gmail で詳細検索を行うには、演算子と呼ばれる特殊なキーワードや記号を使用します。演算子を使用すると、必要な情報をすばやく正確に見つけることができます。演算子を使用してフィルタを作成し、受信トレイのメッセージを自動的に分類することもできます。


色や大きさの感じは、結局のところ試行錯誤になってしまいます。
ある程度、想像つくのですが、実際に設定してみて様子を観察します。
今回は、デザインを決めるのではなく、
デザインを決める経過を調査しているので、
仮の状況で試行錯誤をしています。

続きを読む

トップ画像の変更は、livedoorが用意しているページで行うことにしました。
15061401

ブログ設定
 ↓
PC
 ↓
タイトル/背景

と進んで、アップロードボタンをクリックします。

アップロードする写真は
img04303
上の写真にしました。

ところが…

タイトルの文字が見えづらくなりました。
15061402

なので、画像全体を赤くしてみた

デザインの領域を規定している寸法を確認します。
右メニューの2カラムレイアウトで、
規定しているスタイルシートは以下の通り

#container {
 border-radius:4px;
 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 margin: 0 auto;
 width: 940px;
}
#content {
 border-radius: 0 0 4px 4px;
 position: relative;
}
#main {
 padding: 20px 60px;
}
/* 2カラムレイアウトのとき */
body.layout-2col #content {
 background: url(https://parts.blog.livedoor.jp/img/usr/default_2012/common/bg_side.png) repeat-y #fff;
}
body.layout-2col #main {
 width: 580px;
}
body.layout-2col #main-inner {}
body.layout-2col #sidebar {
 padding: 20px;
/* width: 200px;*/
}
body.layout-2col #sidebar-inner {}

/* 右サイドバー */
body.layout-2col.sidebar-right #content {
 background-position: 100% 0;
}
body.layout-2col.sidebar-right #main {
 border-radius: 0 0 0 4px;
 float: left;
}
body.layout-2col.sidebar-right #sidebar {
 border-radius: 0 0 4px 0;
 float: right;
}
/* ブログのヘッダー、タイトル、説明
----------------------------------------------- */
#blog-header {
 border-radius: 4px 4px 0 0;
 height: 160px;
 background-color: #287cba;
 background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 background-image:    -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 background-image:     -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 background-image:         radial-gradient(left top, ellipse cover, #2e8fc4 0%, #287cba 100%);
 position: relative;
}
/* ブログのフッター
----------------------------------------------- */
#blog-footer {
 color:#555;
 padding: 40px;
}


略図を作成しました。

LivedoorEreaAna

トップ部分のグラデーションを変更してみました。
基本スタイルは次のようにしました。
15052000

(1)開始をピンク、終了色をグリーンの見本です。
ピンクとグリーンの重なる部分がくすんだ感じになります。
実際のHTMLはこちらをクリックしてください。→[ Click ]15052001

(2)開始をピンク、終了色をグリーンに設定するとともに、中間色を薄いグレーにしました。
重なり部分の濁りが解消されたような気がします。
実際のHTMLはこちらをクリックしてください。→[ Click ]
15052002

(3)周辺に角丸を配置しました。
実際のHTMLはこちらをクリックしてください。→[ Click ]
15052003



ベンダーフレックス(vendor prefix)
ブラウザによって、
CSSが動作しないことが有るそうです。
なので、ベンダー識別子(vendor identifier)を使って、動作をさせることが必要な場合もあるようです。

LiveDoorブログのカスタマイズで、
ヘッダー部分に透明色が利用されています。
15051602

こちらの見本の、一番上部(トップ部)が、背景がオレンジ色でブルーのグラデーションがかぶさっています。
このブルーグラデーションを指定しているCSSに、
ベンダーフレックス(vendor prefix)を利用しています。

#blog-header {
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:    -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:     -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:         radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative;
}

上の、
  • -webkit-
  • -moz-
  • -ms-
がベンダー識別子です。


    -webkit-   Google Chrome、Safari、 Opera
    -moz-      Firefox
    -ms-       Internet Explorer
 ということらしいのですが、 特別に opera は特別に -o- という識別子も用意されているようです。

ちなみに上記のスタイルを表示してみることにします。

#blog-header {
border-radius: 4px 4px 0 0;
height: 160px;
background-color: #D89345;
background-image: -webkit-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:    -moz-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:     -ms-radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
background-image:         radial-gradient(left top, ellipse cover, #2e8fc4 0%, #D89345 100%);
position: relative;     }

色を変えてみます。
#blog-header {
border-radius: 4px 4px 0 0;
background-color: #FFF;
background-image: -webkit-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image:    -moz-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image:     -ms-radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);
background-image:         radial-gradient(left top, ellipse cover, #ffeee4 0%, #D89345 100%);

position: relative;     }

あらためて、色や透明色の関係を試していきたいと思います。

↑このページのトップヘ