menu-open
iPadの写真をパソコンに取り込めない時
・・・
最新のiTunesがパソコンにインストールされているかを確認しようとしたところ
iPadの方のメッセージを読めということで見ると、このパソコンを信頼するかと出ていた。信頼するをクリックしたら
写真が送られてきた。
良かった。

思い当たるのはIPadケースが閉じるとロックされる機音が関係しているかも、
設定では新しいソフトウエアの更新プログラムがあれば自動的に確認にチェックが入ってる。
[2020/06/25]tb(0)/com(0)
コメント絵文字の画像にtitle
・・・
初めは画像にオンマウスでタイトルが現れていたと思うんですが、いつの間にか表示されなくなっててしまいました。
そこでいろいろ調べまして
出来たのでメモして置きます。

コメントにカスタマイズ絵文字入力機能
第3のスクリプト
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();

の下

for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', ¥'' + list[i][0] + '¥);" title=¥ '+list[i][0]+¥ ><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}
赤い字を書き足しました。
(注)
¥  は半角にしてください。
¥の後半角空けると四角に囲まれている。


[2020/06/16]tb(0)/com(0)
スマホでオンマウスは
・・・
ホームページを見ている人は80%位出そうですね。
オンマウスはマウスが載った時のイベントですが
タッチするスマホにはマウスがありません

編集時
<div class="yes_ontouchstart" ontouchstart="">
を加えるとできるそうです。

参考
[2020/06/12]tb(0)/com(0)
CSSのflexで中央揃えにする方法
・・・
.container{
display: flex;
justify-content: center;
background: #ccc;
flex-wrap: wrap;
}

.box{
width: 200px;
margin: 10px;
background-color: #66b6d5;
}

.box2{
width: 800px;
margin: 10px;
background-color: #66b6d5;
}

htmlは
<div class="container">
< div class="box2">
box2
</div>
< div class="box">< /div>
</div>


demoはこちら

参考にしたサイト
[2020/05/24]tb(0)/com(0)
拍手ボタンの設定
・・・
FC2blogの拍手ボタンの画像
エントリーの記事の中に有るため、エントリーの画像の大きさをcssで設定すると
ものすごく大きくなってしまう
そんな時は
[2020/05/23]tb(0)/com(0)
Masonryを使用時「flexbox」で2カラムレイアウト更に幅狭ではプルダウンに変化させる
・・・
floatに代わってページをレイアウトするのに「flexbox」を使うととても短いコードでできると知りました。スタイルシートは
.container {
display: flex;
}
.left {
width: 300px;
}
.contents {
flex: 1;
}

だけだそうです。ほんとにびっくりです。詳しくは

floatより辛くない「flexbox」でざっくりレイアウト



高さの違うアイテムを隙間なく並べてくれる
jQuery プラグイン Masonry
を使用時、2カラムにするとMasonryの部分がcontainerの幅になって右側にはみ出してしまいます。
そこで「jQuery プラグイン Masonry のイニシャライズ(初期設定)」において
#containerを2カラムの右側のdivクラス名にしてisFitWidth: trueをisFitWidth:falseに変更すると右側の中に納まってくれました。


更にPC表示サイズ960pxが切れるときブルタウンメニューに設定しました。
cssにおいて960px以下ではleftを display: none; としてブルタウンメニューのオープンボタンを出しました。
パソコンのかたはウインドウサイズを狭めてみてください。


詳しくはDEMOのソースをご覧ください。
[2018/11/28]tb(0)/com(0)
%による3カラム
・・・
3column.jpg
container100%をwrapper75%(赤枠)とright23%(pink背景色)に分け。
wrapper(赤枠)を100%と考えleft24%(yellow背景色)main74%空色背景色に分ける。
demoはこちら
[2018/11/16]tb(0)/com(0)
カテゴリ別スタイルシート
・・・
一つのBlogでカテゴリによってまるで違うBlogを見ているようにスタイルシートを変えることができるそうです。
参考にさせていただいたのは
Glim.さま・・・最後のあがき・・・・・です。ありがとうございます。

テンプレートの設定から
htmlの編集
<ink href="style.css" rel="stylesheet" type="text/css" />
という部分を

<link rel="stylesheet" type="text/css" href="スタイルシートファイルが置かれているサーバーアドレス/ctest_style<%cno><!--permanent_area--><!--topentry--><%topentry_category_no><!--/topentry--><!--/permanent_area-->css" />
と書き換えます。
(注 < と > を英数字に書き換えて下さいね)

そして
ファイルのアップロードに移り
ctest_style.css(トップページ用) ctest_style1.css ctest_style2.css ctest_style3.cssなどカテゴリの数だけcssファイルをアップします。

テンプレートの設定のスタイルシートは使えなくなっていると思いますので、
それぞれのスタイルシートにそのページのbodyの背景画像や色、linkの色 や左右のカラムの左右への配置、幅のピクセルなどの設定をします。
例として
ctest_style1.cssは
blog-category-1.htmlのスタイルです。

カテゴリのナンバーを調べるのは
カテゴリの編集に移り上のほうにある # をクリックすると作成した順番に数字が現れるのでその番号が
ctest_styleの番号になります。

Glim.さま・ありがとうございます。



後日記2018‐10‐09
その後、改めて実験してみましたら
<link href="<%css_link>" type="text/css" rel="stylesheet">
という部部を書き換えるのではなく残しておき、
その下に
<link rel="stylesheet" type="text/css" href="スタイルシートファイルが置かれているサーバーアドレス/ctest_style<%cno><!--permanent_area--><!--topentry--><%topentry_category_no><!--/topentry--><!--/permanent_area-->css" />
を書き加えます。
そして ctest_style.css はトップページ用ではなく、真っ白なメモ帳にこの名前を付けアップします。
ctest_style0.css は最初からあったカテゴリで削除ができないものです。
以下スタイルを変更したいcssを作りますが、基本的にテンプレートの編集のスタイルが使われますので
変更したいところだけを書き込めばいいようです。
例えばbodyの色や背景画像、h2の背景画像などを変えるだけでいいようです。
書き込まないところは、テンプレートの編集のスタイルが使われます。
またアップされないカテゴリではテンプレートの編集のスタイルが使われます。

前述の記事を参考になさった方がいらしたらすみません。
実験してみたのでこの後日記のほうは大丈夫です。m(__)m

実験的に一つのカテゴリだけやってみてもいいかもしれませんね。
[2018/10/03]tb(0)/com(4)
パソコン画面の全てが大きい
・・・
ウィンドウズ8.1ですが
急にパソコン画面のすべてが大きくなってしまいました。デスクトップのアイコンもすごく大きくて所狭しと全面を陣取り、さいとをみてもものすごく大きい。
いろいろと試したけど治らない。
最後にですくとっぷの何もないところを右クリック画面の解像度を開き
1600X900となっていたところを以前のように1920X1080としたところrなおりました

despley.png
[2018/05/29]tb(0)/com(0)
Windowsが正しく読み込まれませんでした
・・・
2018年になってすぐ
更新プログラムを陰で自動的にアップするよう設定してあるにもかかわらず
「更新して再起動」が現れ
それをすると
「回復 Windowsが正しく読み込まれませんでした」と言う青い画面が現れ、
何とか回復するにはシステムの復元をするしかなく、

もうこのパソコンはだめなのかと店にパソコンを見に行ったりしていたんですが、

1月17日にやっと解決策が見つかりました。
https://dynabook.com/assistpc/faq/pcdata3/018440.htm

結局更新プログラムの「KB4056895」をインストールしないようにするといったことでした。


それから2か月、3月15日が始まったばかりの午前1時ころ
また同じような現象が起きました。
前述のKB4056895は見当たりません。

いろいろ試した結果
結局、

(KB4011714)

(KB4011721)

(KB2976978)

KB2267602

(KB890830)

(KB4055266)

(KB4076494)

(KB4088785)

(KB4088876)

(KB4033417)


をインストールしない様にしたところ直りましたが
最初の二つは影響していないと思われます。

そのうち、どれがいけないかが解ったら、各当しないものを再インストールしようと思っていますが、
今朝見たところまだわかっていないようですね。
前の時は2週間以上困っていたわけで、
こうゆうことが出たらすぐ対応していただきたいです。


後日記

3月16日
https://dynabook.com/assistpc/faq/pcdata3/018440.htm
の記事が更新され
私のパソコンで影響を受けているのは
(KB4088876)
とわかり
そのほかの更新プログラムをインストールしました。😥
早かったですね。
[2018/03/16]tb(0)/com(0)
リフレッシュ
・・・
パソコンが調子が悪くリカバリかリフレッシュしか道がないのではじゅめてリフレッシュしてみた。
使いがってよくしていたのに殆ど設定し直しだ。
ただファイルやお気に入りは残されたので、少しはよかった
[2018/01/13]tb(0)/com(1)
川辺の桜
・・・
2017-4-24-1.jpg
友だちに写真に川を入れるといい感じと教わりました。
[2017/05/08]tb(0)/com(0)
boxの中で一番上と一番下に文字を入れるには
・・・

CSS


#box{
position:relative;
height:400px;
border : 1px solid #ccc;
}
p.btm{
position:absolute;
bottom:0px;
left:0px;
}


HTML

<div id="box">
<p>
ああああ
</p>
<p class="btm">
ああああ
</p>
</div>
[2016/03/27]tb(0)/com(0)
ページ全体を自動スクロール
・・・
昔作ったホームページで空から降りてくる女の子がずっと下の方まで行くというのが
なぜか動かなくなっていました。

きょう、直そうとしたら、どうやったのか全く分からなくなっていました。
四苦八苦の末やっと直せました。

ほんとにこれは書き留めておかなくてはなりません。

ページ全体を自動スクロールさせる方法です。

HEADタグの中に
<SCRIPT LANGUAGE="JavaScript">
<!--
var count = 0;
var max = 100;
function autoScroll() {
if (navigator.appVersion > "3") {
if (count < max) {
scroll(0,count++);
timer = setTimeout("autoScroll()",10);
status = max-count;
}
}
}
//-->
</SCRIPT>
そしてBODYタグの中に
<BODY onLoad="autoScroll()">

var max = 100;
この数字が動く範囲のピクセル
timer = setTimeout("autoScroll()",10);
ここがスピード
[2015/01/26]tb(-)/com(0)
すごいやつ display
・・・
cssにおいてdisplayを使うといろいろとすごいことが起きる。

display:block;
1.これだと確実に改行されます。

2.aに設定すると
 文字だけではなく全体がクリック可能に

3.そしてコンテンツの表示

それに対し
display: none;
では非表示



使い方としては

@media screen and (max-width: 960px) {

@media screen and (max-width: 360px) {

などとウインドウの幅を設定するスタイルシートで960pxでは表示 360pxでは非表示。
またはその逆。
のように設定できる。
例えばは幅が狭くなるとメニューカラムは消えてメニューアイコンが現れるなどに使える。

ほんとにすごい。びっくりです
[2015/01/24]tb(-)/com(0)
3カラムでウィンドウの幅が狭くなると左右のメニューがプルダウンメニューに変わる
・・・
DEMOは←こちら

PC表示サイズのカラムが崩れる幅 960pxが切れるときブルタウンメニューにしました。ブルタウンメニューの幅はMOBILE用に310pxにしてみました。いかがでしょうか?
2015年1月19日現在表示の当blog ではさらに1200pxの表示まで設定してあります。

jQueryscriptはheadのなかに貼ります。



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');

/* toggle nav */
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>

HTML



<body>
<div id="container">
<div id="header"><!--ここからheader-->
<h1>title</h1>
<nav id="nav-wrap"><!--ここからブルタウンメニューの内容-->
<div id="nav">
ここに左側の内容と同じものを張り付ける

<div class="box"><!--/ここからbox-->

このboxの中に右側と同じものを張り付ける

</div><!--/ここまでbox-->

</div><!-- /ここまでid -->
</nav><!-- nav-wrap --><!--ここまでブルタウンメニューの内容-->
</div><!--ここまで/header-->

<div id="wrapper"><!-- /ここからラッパー -->

<div id="main"><!--ここから真ん中-->
ここに真ん中の内容
</div><!--ここまで真ん中-->

<div id="left"><!--ここから左側-->
ここに左側の内容
</div><!-- /left --><!--ここまで左側-->

</div><!-- /ここまでラッパー -->

<div id="right">ここに右側の内容

</div><!-- /right -->
<div id="footer">フッター部の内容</div><!-- /footer -->
</div>

</body>

[2015/01/19]tb(-)/com(0)
fc2blogで<head>の<title>を個別ページでは「記事タイトル」トップページでは「Blog名」にする
・・・
*このタイトルというのは お気に入りに入れようとすると「名前」のところに出てくるもののことです。IEではアドレスバーの横か下に出ているもの、またソースの<title>〜</title>のところです。

blogのトップページindex_areaでは 「Blogの名前」 だけ
個別ページpermanent_areaでは 「記事のタイトル」 だけ
そのほかのページでは 「Blogの名前+記事のタイトル」 という風にしてみました。
エリアごとに分けることでページソースにはtitleタグは一つだけなのでこれで良いような気がしますがいかがでしょうか。

<head>〜</head>
の中の
<title>〜</title>のところを以下に置き換えました。



<!--index_area--><title><%blog_name></title><!--/index_area-->
<!--permanent_area--><title><%sub_title></title><!--/permanent_area-->
<!--category_area--><title><%blog_name>-<%sub_title></title><!--/category_area-->
<!--date_area--><title><%blog_name>-<%sub_title></title><!--/date_area-->

上記だけではpage-X.htmlなどでtitleがURLになってしまうのでさらに下記を付け加えました。
こんなにたくさんtitleを書くとは・・・
<!--not_date_area-->
<!--not_index_area-->
<!--not_permanent_area-->
<title><%blog_name></title>
<!--/not_permanent_area-->
<!--/not_index_area-->
<!--/not_date_area-->

悩みつつ・・・きょうはここまで。
[2015/01/16]tb(-)/com(0)
phpで作る簡易掲示板
・・・
phpの使えるサーバーでは
簡易掲示板が各ページに設置できます。
ページの好きなところへ

<form method="POST" action="/pinkbaby/index.php">
お名前<input type="text" name="personal_name"><br>
コメント<textarea name="contents" rows="3" cols="30">
</textarea><br>
<input type="submit" name="btn1" value="投稿する">
</form>

と書きます。
ページの拡張子は 「.php」とします。

そしてフォルダの中に 「keijiban.txt」と名付けたメモ帳を入れておくとそこに書き込まれ
コメントは投稿フォームの下に出ます。

DEMO

お名前
コメント




きょうはここまで。
[2015/01/15]tb(-)/com(0)
ホームページ作成その1 初めてホームページを作るにはメモ帳から始めます
・・・
私の環境はInternet Explorer11 (インターネット エクスプローラー11)windows8.1です。
先ず、メニューからメモ帳を選びます。

<html>

</html>


と書きます。
htmlとは HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略語だそうです。
意味はウェブページ記述のためのマークアップ言語。とのこと。
ちょっとわからないけど、まぁ良いですよね。

<html>で始まり「/」を付けた</html>
で終わります。

この中にいろいろと入れ込んでいきます。
全体図は

<html>
<head></head>
<body>
</body>
</html>


それでは
<head></head>
この中に見た目には見えない設定を書き込んでいきます。
ホームページを見ていてお気に入りに追加しようすると「名前」というところに書かれている文字列は
<title></title>
この中に入れます。

<title>私のホームページ</title>
こんな感じです。これを<head></head>
の中に入れます。


<html>
<head><title>私のホームページ</title></head>
<body>
</body>
</html>

こうなりました。

次に
<body>
</body>
の部分には実際に私たちに見えているものを入れていきます。書いてみましょう。
<body>
今日のお天気は晴れです。<br>ちょっと寒くてウォーキングに行きたくないです。
</body>


これを入れ込んだ全体図

<html>
<head><title>私のホームページ</title></head>
<body>
今日のお天気は晴れです。<br>ちょっと寒くてウォーキングに行きたくないです
</body>
</html>


これで出来ました。
<br>というのは改行ということです。

それでは保存してみます。
メモ帳の上の方にある「ファイル」をクリックして「名前を付けて保存」をクリック
例として ファイル名 test.htmll
*.txtという文字は消してください。
これで保存されているところに出来ている test.html がホームページです。
まだほかのだれも見ていないパソコンの中だけのものです。


きょうはここまで。
[2015/01/14]tb(-)/com(1)
fc2Blog「新しく記事を書く」ページでオリジナルアイコンの入力「ブックマークレット」を実行し別小窓からタグをコピー
・・・
fc2Blogでコメント欄に絵文字入力はstrollblogさんに教えていただいて以前やったことがあり、たくさんの掲示板にも、他社のいくつものBlogにも設置できたことがあり現在も使わせていただいています。

その時記事欄にも絵文字入力支援というスクリプトがあるとは知っていましたが、その時はしないでいました。
今回友達から頼まれてお天気アニメを作りましたので、それをBlogの記事の初めに今日の天気として挿入したくなりました。
でもコメント欄と違ってテンプレートに書き足すのではないんですよね。
記事を書くところは操作できません。

それで再びstrollblogさんのところで教えていただこうとしたところ、

「ブックマークレットを実行後、絵文字設定のリンクをクリックし、サーバーにアップロードした画像定義ファイルのURLを登録してください。 」
と言う事が全く解りませんでした。質問者の中にはこの点を質問している人もいましたが、
本当に初歩的なことらしいのですね。
「ブックマークレット」と検索していろいろなサイトで勉強させていただきました。
出ているページを英語に翻訳するとか、そのページに書かれているリンクを書き出すとかtextareaを別ページで出すもの、またそのページ内の画像を消すとか、いろいろ教わって実行できました。

記事欄にも絵文字入力支援を実際に設置したことがある方の記事も読ませていただき、その通りにやってみましが、
どうしても「新しく記事を書く」ページでブックマークレットを実行してもうんともすんともいわないんです。

多分出てきて並んでいる画像をクリックすれば記事内にタグが挿入されるらしいのですが、どうしてもできないんです。

丸二日くらい考えに考え、、クリックすれば挿入されるのでなくても、せめてコピー&ペーストでと思ったのですが、どうも別ページにならなくて同じページの上に参照ページが出てきていてそこから記事を書くページに戻れないし、消すと記事を書くページも消えてしまいます。
ファイル挿入ボタンから入れればいいんですが、なんだか気持ちが収まりません。

そこで以前ホームページで使ったことがある
<a href="Javascript:w=window.open('URL','説明,'scrollbars=yes,Width=700,Height=450');w.focus();">LINK</a>
というものをやってみました。これをHTMLで保存してみるとリンク文字が出てきますよね。それっをクリックすると、小さいウィンドウが開くわけです。
このリンク文字を右クリックすると「お気に入りに追加」というものがあったのでクリック。
そのお気に入りに入ったものを右クリックして「プロパティ」を見ると
なんと今までたくさん練習で書き込んでいたJavascriptが
Javascript:w=window.open('URL','説明,'scrollbars=yes,Width=700,Height=450');w.focus();
ともう書き込まれていて、
そのお気に入りををクリックすると見事小さな別ウインドウが現れたんです。本当にうれしかったです。

これをやって初めてブックマークレットの作り方がわかりました。
概要はリンク文字を右クリックしてお気に入りに入れ、お気に入りに入ったものを右クリックしてプロパティのURL欄に半角スペースは%20に「"」は%22に書き換え一行にしたJavascriptを張り付けると言う事でした。


お気に入りに入れる前の例にとしてyahoo!です。
 yahoo!

↑この「yahoo!」でやってみるとしたら
お気に入りに入れたもののプロパティのURL欄
Javascript:w=window.open('http://www.yahoo.co.jp/','説明','scrollbars=yes,Width=700,Height=450');w.focus();
のhttp://www.yahoo.co.jpの部分を出したいアドレスに書き換えます。

出てくる小窓には見本の画像と共に<img src="画像のアドレス" width="50" alt="画像の説明">
のように張り付けタグを書いておきコピーして記事を書くところへ貼り付けます。
このブックマークレットはgoogle chrome、firefoxともできました。
たくさんのアイコンを貼っておいて画像のプロパティからアドレスを取得してもいいですね。(^^♪
今のところこんなところです。  

きょうはここまで。
[2015/01/13]tb(-)/com(0)
TABLEを重ねてすっきりした掛け線風なTABLEを作る
・・・
TABLEを作る時
bordertable.pngTABLE border とすると左のようなTABLE
ができます。
なぜか線が二重になっています。




先日少しTABLEをいじっているとき、TABLEの中にまたTABLEと訳が分かりませんでしたが、その訳の一つがわかりました。
TABLEを重ねることによって最初のTABLEの背景が視覚的に見えることになるんだそうです。

二重のTABLE
My Blog いつつば
検索エンジン Yahoo!,Google


見える線の太さを調整するために中側のTABLEに 「cellpadding="10" cellspacing="1"」を指定します。cellpaddingとは
padding、つまり内側に増やすスペース??、そしてcellspacingの方は線の太さがかわります。

以下はHTML

<TABLE style="margin-left : auto;margin-right : auto" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<TR>
<TD>
<TABLE style="margin-left : auto;margin-right : auto" border="0" cellpadding="10" cellspacing="1">
<TR bgcolor="#ffffff">
<TR bgcolor="#ffffff">
<TD style="border:0px solid #ccc;" bgcolor="#DCF3F7" colspan="2">二重のTABLE</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>My Blog</TD>
<TD>いつつば</TD>
</TR>
<TR bgcolor="#ffffff">
<TD>検索エンジン</TD>
<TD bgcolor="#ffffff">Yahoo!,Google </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
[2015/01/12]tb(-)/com(0)
横並びのDIVはウインドウサイズで変化
・・・
tebleタグでは「width:100%;」など指定が必要ですが
DIVタグ では[float:left;]で横並びさせているのに、ウィンドウサイズが狭くなれば、ひとりでに縦並びになるようです。

DEMO

1
2
3
4
5




HTML

<div class="box">1</div>
<div class="box2">2</div>
<div class="box">3</div>
<div class="box2">4</div>
<div class="box">5</div>
<br clear=left>

CSS

div.box {
float: left;
width:100px;
height:100px;
border: 1px solid #ccc;
background: #ccc;
}
div.box2 {
float: left;
width:100px;
height:100px;
border: 1px solid #ccc;
background: #fff
[2015/01/09]tb(-)/com(0)
ウインドウサイズに合わせたTABLE、max-widthも指定
・・・
以前はTABLEタグを使ってホームページを作ったこともありましたが、近年はDIVタグを使うことがほとんどなんです。
ところが
既存のショッピングカートをウインドウサイズに合わせたものにしようと思ったら、TABLEの中にTABLE、またその中にTABLEまたその中にもTABLEと際限なくTABLEが作られていて参りました。

私も作ったことは有るので解るのですが、作るときは割と簡単なのですよね。できているTABLEのTDの中にTABLEを入れていけばいいのですから。

でもそれを改造しようとしたら本当に訳が分かりません。

DIVタグの方は一々名前がついているのでわかりやすいですよね。

そこで改めてTABLEを組んで必要なものを入れ込んでいくことにしました。

<table style="border:0px solid #ccc; width:100%; max-width:600px;margin-left : auto;margin-right : auto">
<tr>
<TD style="border:1px solid #ccc; width:20%;valign:top;" bgcolor="#DCF3F7">1水色</TD>
<TD style="border:1px solid #ccc; width:80%;valign:top;" bgcolor="#FFFFFF">2白</TD>
</tr>
<tr>
<TD style="border:1px solid #ccc; width:20%;valign:top;" bgcolor="#DCF3F7">3水色</TD>
<TD style="border:1px solid #ccc; width:80%;valign:top;" bgcolor="#FFFFFF">4白</TD>
</tr>
</table>

TABLEの幅は
「width:100%; 」 としますが、どんな大きなパソコンでも目いっぱいというと見ずらいということもありますので、そんな時は
一番大きなサイズを指定しておきます。ここでは600pxです。
「max-width:600px」
そして左右からの割合を指定し真ん中に来るように
「margin-left : auto;margin-right : auto」
とします。

追記にDEMOがあります。
ウインドウの幅を狭めると小さくなっていきます。
[2015/01/07]tb(-)/com(0)
リンク文字の背景領域でもクリック可能にする
・・・
エントリータイトルなどリンクの文字だけではなく背景も含めてクリックできるようにするには

HTML
<h2>エントリータイトル</h2>

CSS
h2 {
font-size:20px;
}
h2 a{
display:block;
border-left: 20px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
background: #f0f8ff;
padding: 10px;
}

DEMO
水色のところ全体がクリックできる

DEMO エントリータイトル DEMO


[2015/01/03]tb(-)/com(0)
cssを使って「文字にマウスオーバーで画像を現わす」
・・・
「ブログ上の文字」という文字にマウスオーバーすると画像が現れます。

ブログ上の文字
いつつばのクローバー


スタイルシートにcssを書き込んで記事を書いていると時の経過と共にどれがこのためのcssか解らなくなってしまいます。ここにHTMLとCSSを関連して記しておきます。

HTMLは

<a class="thumbnail" href="リンク先のアドレス">ブログ上の文字<span><img src="画像のアドレス" /><br />ここに画像の下に出る文字</span></a>

CSSは

<style>
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ccc;
padding: 5px;
left: -1000px;
border: 1px double #000000;
visibility: hidden;
color: #000000;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -100px;
left: 50px; /*position where enlarged image should offset horizontally */

}
</style>
[2014/12/29]tb(-)/com(0)
パソコンでスマホサイズ「google chrome」リサイズウィンドウ
・・・
パソコンを初めて持った時windows98でした。
XP、 Vistaを経て今はwindows8.1
動画も見ようと大きな画面を購入したのですが、ふと気が付くとなんと世はスマホ時代、
大きなパソコンで作った画面サイズはXP、 Vistaで見ると横スクロールしないと全部が表示されません。

機種によってはパソコンで見るのと同じように見えるのもあるらしいのですが、なんといっても私はスマホを持っていませんので確かめることができません。

初めはスマホサイズの細いページも作ってスマホの方はそちらに誘導するように考えましたが、
横幅にあわせて変化するようcssにbody width:100%;を適用してからはタップやマウスで横幅を狭めてその様子を見ていました。

ある日塾に通っている友達が「あっ、それ教わった」と言って私にもおすそわけしてくれました。
それは「google chrome」リサイズウィンドウということです。

さっそくダウンロードしてみると本当にです。
最少320x480まで見ることができます。
ただこれがスマホでもこうみえるのか?不安はありますが、スマホを持っていない者としては限度です。
[2014/12/27]tb(-)/com(0)
CSSを使ったタブメニュー
・・・
よくトップページなどに使われているタブメニューをcssだけで作ってみました。
この例ではHPを4ページ作ってそれぞれリンクを貼りました。
cssで.box .box2それぞれを float:left; で横並びにし
.box2の下線をなくしてそれぞれのページのメニューのリンクに当てます。
DEMO



続きはそれぞれのページです
[2014/12/24]tb(-)/com(0)
windows8日本語でアカウント作っちゃった時
・・・
私は一年ちょっと前に・・・正確には昨年の10月にwindows8を買い、マイクロソフトにアカウントを作りました。その時、何も考えず漢字の名前を入れてしまいました。それは本名ではなかったのですが、そのことで別に困ったこともなく使っていました。その後windows8.1にアップしました。

しかしそれから二ヵ月後の12月になんとパソコンを物理的に壊してしまいました。画面にヒビが入ってしまったのです。保証も効かないということで、新しく同じものを買いました。
その時、マイクロソフトにまた設定をしなければなりません。メールアドレスを入れると、なんとびっくり、買ったばかりの新しいものなのに今までのパソコンで設定した通りのスタートページが現れたのです。
とてもびっくりしましたが、楽だなと思いました。二ヶ月間タイルアイコンなど大小作り設定した自画自賛のスタートページです。

ところがFlashでSWFを作って保存しようとしたところアカウント名が漢字だと保存できないということに遭遇しました。
せっかく作ったのにデスクトップにさえ持ってこれません。
それでとてもいろいろと検索して名前を英数字にしようとしましたが、どうしても変えることはできませんでした。
仕方なく新しい英数字のローカルアカウントを作って、そちらでFlashを保存することにしました。
ところが管理人ではないのでいちいち前の漢字のアカウントの了解を得なくてはなりません。まあそれは自分なので反対はされませんが(笑)面倒です。
そこで新しい方もAdministatorというように変更しました。両管理人ということです。そして新しい方は前のメールアドレスを登録してありません。登録しさえすればあの二ヶ月間とても苦労もし、楽しくもあったスタートページの設定が一瞬でやってくるでしょうが、また日本語の名前になるかもしれないのです。
検索によるとダウンロードにも影響があるらしいですものね。

その後「起動の時に入る方のアカウント」を設定し、現在に至っています。

たまに前のアカウントに行ってみると、かっこいいなぁと思います。
もう精力を使い果たしてこちらを直す元気がありません。それによく考えたらだれにも見られる訳ではないですよね。(笑)
というわけで結論は漢字で作っちゃった場合、私は新しいアカウントを作ったということです。

もし新しい方だけにするには漢字の方をマイクロソフトひも付けを解除し新しい方をひも付けし、漢字の方を削除
ということになるらしいですが、ここはやってないのでなさるには自己責任でお願いします。
[2014/12/22]tb(-)/com(0)
Windows8.1でデスクトップに「シャットダウンボタン」
・・・
パソコンをいじるのが好きで一日中何かをしている私は
パソコンから呆れられてか
たまにデスクトップのスタートボタンwinbtn.jpgがマウスでクリックできなくなります。
すると電源を切ったり再起動をすることができなくなります。
こんな時こそ再起動して回復したいのにと慌てますよね。
この時は本来右端にマウスやタップで現れるはずのメニュ-も現れません。(泣)

いったいどうしたらいい?
ってことで
デスクトップに「シャットダウンボタン」を作っちゃいました。
作り方はとても簡単




デスクトップ画面の何もない所で右クリックし、「新規作成」→「ショートカット」をクリック。

開いたウインドウに
C:\Windows\System32\shutdown.exe /s /t 00
↑を貼り付け「次へ」→「完了」をクリックで作成完了です。


ちゃんとシャットダウンしていますという文字列も現れるので安心な気がしますね。

とりあえずは電源を切ってから起動します。
[2014/12/21]tb(-)/com(0)
fc2blogでウィンドウの幅が狭くなると、横並びのメニューがプルダウンメニューに変わる
・・・
アクセス解析を見ていると最近はスマートフォンでホームページを見ている人が多くなってきました。

そこで「ウィンドウの幅が狭くなると、横並びのメニューがプルダウンメニューに変わる」というのをやってみました。

デスクトップでやってみるとできたのでfc2blogテンプレートに挿入しようとしたところIE 11でメニューが変わりませんでした。

google chromeやfirefoxでは幅を狭めるとプルダウンメニューに変わるのに
IFだけはどうしてもできませんでした。
デスクトップや他のサーバーではできるのに、fc2blogだけができないのです。
どうもcssの
「@media screen and (min-width: ○○px)」
ということを読み込まないらしいのです。
四苦八苦、していろいろやってみました。
かなりいろいろダウンロードもしましたが、それらは役立たず、
結果
<meta http-equiv="X-UA-Compatible" content="IE=9" />
をhead内に書いたところできるようになりました。
fc2blogではIE7を使っているらしいことがわかりました。
IE9以後は「@media screen and (min-width: ○○px)」
も読み込めるんだそうです。
ほんとうに丸々2日間もかかってしまいましたが、分かったときは本当にうれしかったです。

参考サイト:http://webdesignerwall.com/demo/mobile-nav/
[2014/12/20]tb(-)/com(0)

recent comment

最新の記事

月別アーカイブ

recent trackback

ブログ内検索

RSSフィード

*最新記事のRSS
*最新コメントのRSS
*最新トラックバックのRSS

TB_People

カレンダー

08 | 2020/09 | 10
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -

Amazon

ブロとも一覧

ブロとも申請フォーム

この人とブロともになる

リンク


| ホーム | next次ページ
Template production /preview