近頃、ホームページビルダー付属のウエブビデオスタジオに凝っている私。
先日七夕がありましたよね。そこでキラキラ光る星はどうやっって書くんだろうと、ペイントやペイント3Dを使って四苦八苦。





ネットサーフィンしていると
「GIMP(ギンプ)でキラキラ星型の作り方」という記事を見つけました。
参考にさせていただいて作ってみました。
先日七夕がありましたよね。そこでキラキラ光る星はどうやっって書くんだろうと、ペイントやペイント3Dを使って四苦八苦。





ネットサーフィンしていると
「GIMP(ギンプ)でキラキラ星型の作り方」という記事を見つけました。
参考にさせていただいて作ってみました。
コメント(0) |
Microsoft Edgeで新しくページを閲覧しようとしたとき、前回閉じた様子を記憶していなくて必ず外れたところに出るんです。
私の場合左側が左に行っていて見えないので移動して見ていたんです。つまり閉じるときはすべてが見える位置なのですが、再度開けると左側が左に行ってる。考えようによっては、左側が左に行ってるように記憶しているともいえるんですが、
なんだかイライラしてしまうので検索したら、
良い位置の時にXを右クリックしたまま左側をダブルクリックすると良いとのことだったのでやってみたら治りましたので、
覚書しておきます。
私の場合左側が左に行っていて見えないので移動して見ていたんです。つまり閉じるときはすべてが見える位置なのですが、再度開けると左側が左に行ってる。考えようによっては、左側が左に行ってるように記憶しているともいえるんですが、
なんだかイライラしてしまうので検索したら、
良い位置の時にXを右クリックしたまま左側をダブルクリックすると良いとのことだったのでやってみたら治りましたので、
覚書しておきます。
コメント(0) |
fc2blogでyoutubeをウインドウサイズに合わせて可変する方法
テンプレートのスタイルシートに
iframe {
max-width: 100%; !important;
}
と書きこむ。
テンプレートのスタイルシートに
iframe {
max-width: 100%; !important;
}
と書きこむ。
コメント(0) |
httpsでページを作っているとき
「セキュリティで保護されたコンテンツのみ表示」と出て上手く表示されないときがあります
jqueryのjsを呼び込んでいるとき
自分の他サイトのhttpからですとこの表示が出るそうです。
そこでこのfc2blogのhttpsのサイトの場合はその同じファイルのアップロードに
jqueryのjsをアップすると
上手く表示されるようになりました。
但し、fc2blogでは(.)や(/)のついたファイルはアップできません。と出てアップできませんでした。
そこで(.)や(/)を(-)に変えてアップしましたところ上手くいきました。
「セキュリティで保護されたコンテンツのみ表示」と出て上手く表示されないときがあります
jqueryのjsを呼び込んでいるとき
自分の他サイトのhttpからですとこの表示が出るそうです。
そこでこのfc2blogのhttpsのサイトの場合はその同じファイルのアップロードに
jqueryのjsをアップすると
上手く表示されるようになりました。
但し、fc2blogでは(.)や(/)のついたファイルはアップできません。と出てアップできませんでした。
そこで(.)や(/)を(-)に変えてアップしましたところ上手くいきました。
コメント(0) |
cssにbeforeとafter があるということで
直前の記事、クリックすると+になるをクリックすると+がーになるをお勉強です。
今度もチェックボックスを使います。
クリックすると+がーになりますよね。
ここまでのHTMLとCSSです
HTMLは
<body>
<input type="checkbox" id="check1" class="hiraku-hidden">
<label for="check1" class="hiraku-open">ありがとう</label>
</body>
CSSは
<style>
.hiraku-hidden {
display: block;;/* チェックボックス、今は表示*/
}
.hiraku-open {
display: block;
padding: 10px;
width:400px;/* 高さ不要 */
border:1px solid #ccc;
background: #fff;
cursor: pointer;/* ポインターが手の形 */
position: relative;/* 親に相対的位置 */
}
.hiraku-open::before,.hiraku-open::after {
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
*/content: '';が不明ながら ― になる。beforeとafterで同じ所に二つある */
}
.hiraku-open::after{
transform: rotate(90deg);
*/afterで一本を90度回転させる。*/
}
/* クリッされたら縦棒を横棒にして-にする */
.hiraku-hidden:checked + .hiraku-open:after {
transform: translateY(-30%) rotate(0);
}
</style>>
何をしたいかというと
クリックで展開するメニューなどです。
追記に記載
直前の記事、クリックすると+になるをクリックすると+がーになるをお勉強です。
今度もチェックボックスを使います。
クリックすると+がーになりますよね。
ここまでのHTMLとCSSです
HTMLは
<body>
<input type="checkbox" id="check1" class="hiraku-hidden">
<label for="check1" class="hiraku-open">ありがとう</label>
</body>
CSSは
<style>
.hiraku-hidden {
display: block;;/* チェックボックス、今は表示*/
}
.hiraku-open {
display: block;
padding: 10px;
width:400px;/* 高さ不要 */
border:1px solid #ccc;
background: #fff;
cursor: pointer;/* ポインターが手の形 */
position: relative;/* 親に相対的位置 */
}
.hiraku-open::before,.hiraku-open::after {
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 5%;
*/content: '';が不明ながら ― になる。beforeとafterで同じ所に二つある */
}
.hiraku-open::after{
transform: rotate(90deg);
*/afterで一本を90度回転させる。*/
}
/* クリッされたら縦棒を横棒にして-にする */
.hiraku-hidden:checked + .hiraku-open:after {
transform: translateY(-30%) rotate(0);
}
</style>>
何をしたいかというと
クリックで展開するメニューなどです。
追記に記載
コメント(0) |
最初にbefore and afterを学習しました。
このように ありがとう とだけ書いた文字の
最初がbefore後がafterだとわかりました。
<p class="example">ありがとう</p>
<style>
.example:before{
content: 'あ';
color: skyblue;/*色を変える*/
}
.example:after{
content: '』';
color: red;/*色を変える*/
}
</style>
ちなみに
閉じているときは+
開くとーは
beforeとafter絶対的位置で同じにしてそのうちの一本を90度回転させると解りました。
このように ありがとう とだけ書いた文字の
最初がbefore後がafterだとわかりました。
<p class="example">ありがとう</p>
<style>
.example:before{
content: 'あ';
color: skyblue;/*色を変える*/
}
.example:after{
content: '』';
color: red;/*色を変える*/
}
</style>
ちなみに
閉じているときは+
開くとーは
beforeとafter絶対的位置で同じにしてそのうちの一本を90度回転させると解りました。
コメント(0) |
cssでtransformという物を使うと与えられた要素を回転、拡大縮小、 傾斜、移動することできると言うことで
やってみました。
transform: rotate(90deg)ですと90度回転するという。
マウスが乗っているとき、またクリックしている間などあるけれど
クリックしたらまたクリックするまでそのままというのがやりたかったので
調べるとチェックボックスを使う方法が見つかった。
親に
position: relative;を指定し
..check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
visibility: hiddenを書かないとチェックボックスが出る。
有っても動きは同じです。
htmlで
wrapをdivにしたら機能しないので
調べたら
labelを使うといいらしい。
<label class="wrap">
『LABELとは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。 関連付けを行うことにより、ブラウザでラベル(もしくはラベルのアクセスキー)をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。』
とのこと
なるほど
css
<style>
.wrap {
position: relative;
}
.check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
.translate{
margin-top: 100px;
padding: 10px 20px;
border: 1px solid #59b1eb;
background: #59b1eb;
text-align: center;
color: #fff;
width: 320px;
height: 30px;
transition: all 1s ease;/*これでゆっくり*/
cursor: pointer;;/*これでカーソルが手の形*/
}
input:checked ~ .translate{
transform: rotate(90deg);
}
.translate2{
margin-top: -52px;
padding: 10px 20px;
border: 1px solid pink;
background: pink;
text-align: left
color: #fff;
width: 160px;
height: 30px;
}
</style>
HTMLは
<label class="wrap">
<input class="check" type="checkbox">
<div class="translate">translate</div>
</label>
<div class="translate2">translate2</div>
水色の四角をクリックしてみてください。
やってみました。
transform: rotate(90deg)ですと90度回転するという。
マウスが乗っているとき、またクリックしている間などあるけれど
クリックしたらまたクリックするまでそのままというのがやりたかったので
調べるとチェックボックスを使う方法が見つかった。
親に
position: relative;を指定し
..check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
visibility: hiddenを書かないとチェックボックスが出る。
有っても動きは同じです。
htmlで
wrapをdivにしたら機能しないので
調べたら
labelを使うといいらしい。
<label class="wrap">
『LABELとは、フォームの中でフォームの項目名と構成部品(チェックボックス、ラジオボタンなど)を関連付けるためのタグです。 関連付けを行うことにより、ブラウザでラベル(もしくはラベルのアクセスキー)をクリックした際に、その構成部品をクリックしたのと同じ動作が可能になります。』
とのこと
なるほど
css
<style>
.wrap {
position: relative;
}
.check {
position: absolute;
z-index: 99999;
visibility: hidden;/*これで非表示*/
}
.translate{
margin-top: 100px;
padding: 10px 20px;
border: 1px solid #59b1eb;
background: #59b1eb;
text-align: center;
color: #fff;
width: 320px;
height: 30px;
transition: all 1s ease;/*これでゆっくり*/
cursor: pointer;;/*これでカーソルが手の形*/
}
input:checked ~ .translate{
transform: rotate(90deg);
}
.translate2{
margin-top: -52px;
padding: 10px 20px;
border: 1px solid pink;
background: pink;
text-align: left
color: #fff;
width: 160px;
height: 30px;
}
</style>
HTMLは
<label class="wrap">
<input class="check" type="checkbox">
<div class="translate">translate</div>
</label>
<div class="translate2">translate2</div>
水色の四角をクリックしてみてください。
コメント(0) |
クリックしたくなるよう指や手の形にしたいのに
textというそうですが | のような縦の線が出ているとき
cssに
cursor: pointer;
また画像の場合
<img style="cursor: pointer;" id="close_2" src=
とすると手の形になった
textというそうですが | のような縦の線が出ているとき
cssに
cursor: pointer;
また画像の場合
<img style="cursor: pointer;" id="close_2" src=
とすると手の形になった
コメント(0) |
ブログのindewxページのアドレスに
?all
と付け加えると出てくるのが全記事一覧ページですが
そこの記事タイトルにアイコンを付ける方法です。
HTML編集で
<!--titlelist_area-->
の中
<--titlelist-->
の中に
<img src="アップしたアドレスを調べentry-<%titlelist_eno>jpg">
と記入する。
アップするとき付ける画像のアドレスは
記事番号が560だったら
entry-560.jpg
と付けてアップし
記事を書く
記事番号は記事の管理で#を押すと今までの番号が出るのでその次の番号が新しい記事番号!!!!
とっても苦労したがやっとできた。
すごくうれしい。
参考にさせていただいたのは
http://interest2014.blog.fc2.com/blog-entry-17.html
全記事一覧にもサムネイルを付けてみた - INTEREST(インタレスト)さまです。
ありがとうございます。m(__)m
?all
と付け加えると出てくるのが全記事一覧ページですが
そこの記事タイトルにアイコンを付ける方法です。
HTML編集で
<!--titlelist_area-->
の中
<--titlelist-->
の中に
<img src="アップしたアドレスを調べentry-<%titlelist_eno>jpg">
と記入する。
アップするとき付ける画像のアドレスは
記事番号が560だったら
entry-560.jpg
と付けてアップし
記事を書く
記事番号は記事の管理で#を押すと今までの番号が出るのでその次の番号が新しい記事番号!!!!
とっても苦労したがやっとできた。
すごくうれしい。
参考にさせていただいたのは
http://interest2014.blog.fc2.com/blog-entry-17.html
全記事一覧にもサムネイルを付けてみた - INTEREST(インタレスト)さまです。
ありがとうございます。m(__)m
コメント(0) |
listをflexで横並びさせているとき
永遠に(?)横並びしているのをウインドウ幅にあわせて折り返すためには
ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist {
display: flex;
flex-wrap: wrap;/* ウィンドウ幅で折り返す */}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:260px 2px 0 2px;
width:220px;
color:#999;
border:1px solid #ccc;
}
display: flex;と共に
flex-wrap: wrap;を指定する。
感動的です。
永遠に(?)横並びしているのをウインドウ幅にあわせて折り返すためには
ul.catlist {
list-style:none;
margin:auto 0;
padding:0;
font-size:12px;
}
.catlist {
display: flex;
flex-wrap: wrap;/* ウィンドウ幅で折り返す */}
.catlist li a {
display:block;
margin:0 2px 12px 2px;
padding:260px 2px 0 2px;
width:220px;
color:#999;
border:1px solid #ccc;
}
display: flex;と共に
flex-wrap: wrap;を指定する。
感動的です。
コメント(0) |
親に display: flex;
伸びる子にflex: 1;
固定している子にwidthを指定で横並びしているレイアウトで
ウィンドウ幅が狭くなった時、子の回り込みを解除するには
例
@media screen and (max-width: 600px) になった時
親のdisplay: flexをdisplay: block;に変え
伸びる子のflex: 1を消し
max-width: 600p;
width:100%;
これで回り込み解除できた。
伸びる子にflex: 1;
固定している子にwidthを指定で横並びしているレイアウトで
ウィンドウ幅が狭くなった時、子の回り込みを解除するには
例
@media screen and (max-width: 600px) になった時
親のdisplay: flexをdisplay: block;に変え
伸びる子のflex: 1を消し
max-width: 600p;
width:100%;
これで回り込み解除できた。
コメント(0) |
Google ChromeではFlashが推奨されていませんね。
Chromeで.swfを再生する方法を調べてみました。 参考にさせていただいたサイト
Chromeで.swfを再生する方法を調べてみました。 参考にさせていただいたサイト
コメント(0) |
最新のiTunesがパソコンにインストールされているかを確認しようとしたところ
iPadの方のメッセージを読めということで見ると、このパソコンを信頼するかと出ていた。信頼するをクリックしたら
写真が送られてきた。
良かった。
思い当たるのはIPadケースが閉じるとロックされる機音が関係しているかも、
設定では新しいソフトウエアの更新プログラムがあれば自動的に確認にチェックが入ってる。
iPadの方のメッセージを読めということで見ると、このパソコンを信頼するかと出ていた。信頼するをクリックしたら
写真が送られてきた。
良かった。
思い当たるのはIPadケースが閉じるとロックされる機音が関係しているかも、
設定では新しいソフトウエアの更新プログラムがあれば自動的に確認にチェックが入ってる。
コメント(0) |
初めは画像にオンマウスでタイトルが現れていたと思うんですが、いつの間にか表示されなくなっててしまいました。
そこでいろいろ調べまして
出来たのでメモして置きます。
コメントにカスタマイズ絵文字入力機能の
第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>');
}
}
赤い字を書き足しました。
(注)
¥ は半角にしてください。
¥の後半角空けると四角に囲まれている。
そこでいろいろ調べまして
出来たのでメモして置きます。
コメントにカスタマイズ絵文字入力機能の
第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>');
}
}
赤い字を書き足しました。
(注)
¥ は半角にしてください。
¥の後半角空けると四角に囲まれている。
コメント(0) |
ホームページを見ている人は80%位出そうですね。
オンマウスはマウスが載った時のイベントですが
タッチするスマホにはマウスがありません
編集時
<div class="yes_ontouchstart" ontouchstart="">
を加えるとできるそうです。
参考
オンマウスはマウスが載った時のイベントですが
タッチするスマホにはマウスがありません
編集時
<div class="yes_ontouchstart" ontouchstart="">
を加えるとできるそうです。
参考
コメント(0) |
.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はこちら
参考にしたサイト
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はこちら
参考にしたサイト
コメント(0) |
FC2blogの拍手ボタンの画像
エントリーの記事の中に有るため、エントリーの画像の大きさをcssで設定すると
ものすごく大きくなってしまう
そんな時は
エントリーの記事の中に有るため、エントリーの画像の大きさをcssで設定すると
ものすごく大きくなってしまう
そんな時は
コメント(0) |
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のソースをご覧ください。
.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のソースをご覧ください。
コメント(0) |

container100%をwrapper75%(赤枠)とright23%(pink背景色)に分け。
wrapper(赤枠)を100%と考えleft24%(yellow背景色)main74%空色背景色に分ける。
demoはこちら
コメント(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
実験的に一つのカテゴリだけやってみてもいいかもしれませんね。
参考にさせていただいたのは
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
実験的に一つのカテゴリだけやってみてもいいかもしれませんね。
コメント(4) |
りんご/ どりーみー/ りんご/ どりーみー/
|
ウィンドウズ8.1ですが
急にパソコン画面のすべてが大きくなってしまいました。デスクトップのアイコンもすごく大きくて所狭しと全面を陣取り、さいとをみてもものすごく大きい。
いろいろと試したけど治らない。
最後にですくとっぷの何もないところを右クリック画面の解像度を開き
1600X900となっていたところを以前のように1920X1080としたところrなおりました

急にパソコン画面のすべてが大きくなってしまいました。デスクトップのアイコンもすごく大きくて所狭しと全面を陣取り、さいとをみてもものすごく大きい。
いろいろと試したけど治らない。
最後にですくとっぷの何もないところを右クリック画面の解像度を開き
1600X900となっていたところを以前のように1920X1080としたところrなおりました

コメント(0) |
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)
とわかり
そのほかの更新プログラムをインストールしました。😥
早かったですね。
更新プログラムを陰で自動的にアップするよう設定してあるにもかかわらず
「更新して再起動」が現れ
それをすると
「回復 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)
とわかり
そのほかの更新プログラムをインストールしました。😥
早かったですね。
コメント(0) |
パソコンが調子が悪くリカバリかリフレッシュしか道がないのではじゅめてリフレッシュしてみた。
使いがってよくしていたのに殆ど設定し直しだ。
ただファイルやお気に入りは残されたので、少しはよかった
使いがってよくしていたのに殆ど設定し直しだ。
ただファイルやお気に入りは残されたので、少しはよかった
コメント(1) |
さくら/
|
コメント(0) |
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>
コメント(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);
ここがスピード
なぜか動かなくなっていました。
きょう、直そうとしたら、どうやったのか全く分からなくなっていました。
四苦八苦の末やっと直せました。
ほんとにこれは書き留めておかなくてはなりません。
ページ全体を自動スクロールさせる方法です。
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 17:51】
javascript |
トラックバック(-) | ▲
コメント(0) |
cssにおいてdisplayを使うといろいろとすごいことが起きる。
display:block;
1.これだと確実に改行されます。
2.aに設定すると
文字だけではなく全体がクリック可能に
3.そしてコンテンツの表示
それに対し
display: none;
では非表示
使い方としては
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 360px) {
}
などとウインドウの幅を設定するスタイルシートで960pxでは表示 360pxでは非表示。
またはその逆。
のように設定できる。
例えばは幅が狭くなるとメニューカラムは消えてメニューアイコンが現れるなどに使える。
ほんとにすごい。びっくりです
display:block;
1.これだと確実に改行されます。
2.aに設定すると
文字だけではなく全体がクリック可能に
3.そしてコンテンツの表示
それに対し
display: none;
では非表示
使い方としては
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 360px) {
}
などとウインドウの幅を設定するスタイルシートで960pxでは表示 360pxでは非表示。
またはその逆。
のように設定できる。
例えばは幅が狭くなるとメニューカラムは消えてメニューアイコンが現れるなどに使える。
ほんとにすごい。びっくりです
コメント(0) |
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>
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 10:38】
javascript |
トラックバック(-) | ▲
コメント(0) |
*このタイトルというのは お気に入りに入れようとすると「名前」のところに出てくるもののことです。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-->
悩みつつ・・・きょうはここまで。
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-->
悩みつつ・・・きょうはここまで。
コメント(0) |
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
きょうはここまで。
簡易掲示板が各ページに設置できます。
ページの好きなところへ
<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
きょうはここまで。
コメント(0) |
どりーみー(07/05)
ジージョ(07/04)
どりーみー(12/19)
どりーみー(10/11)
りんご(10/10)