ＪＩＪＩの手習い

取りあえず、CSSで

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #ｆｆｆ;
  }
  a {
    color: #ddd;
  }

てすと文字色 #696969
てすと文字色 #4f4f4f
てすと文字色 #3f3f3f
てすと文字色 #333333



2カラム　ジャネイカ　autumn1
スタイルシートの上から１／３程度に下記記述あり
font-sizeを:12px;から１７ｐｘに変更されたところです。

colorのhex部分（#696969）を変更する

/*記事部分ここから*/
.main{
width:500px;
color:#696969;
font-size:12px;（現在17px）

googleフォトを張り付けています。




貼り付け（埋め込み）方法は、爺爺の手習いにあります。
http://jiji.shiga-saku.net/e1351007.html


--------------------------------------------------------------------------

画像の挿入の時に左寄せ（右寄せ）などを指定して横に文章を入れる時、そのままだと画像がずれるので改行などで調整されていると思います。
今回は、これを簡単に直す方法を説明します。


ここに文章1111111111111111

ここに文章222222222222222

ここに文章33333333333




普通に左寄せで続けて画像を挿入すると上のようになります。

画像を挿入すると次のような文字列が表示されます。

<img src="//img01.shiga-saku.net/usr/j/i/j/jiji/P1180138sk21k-s.JPG" align="left" width="200" alt="" title="" >ここに文章1111111111111111


このずれを解消する方法は文章の終わり（上の例ではここに文章1111111111111111の後ろ）に、
<clear="all">　　　　（注：　＜　＞　も必要です。）　
を追加すると下のようになります。



ここに文章1111111111111111


ここに文章222222222222222


ここに文章33333333333

20150919 追記
8月中に修正が入ったみたいで今月は、「ブックマーク等」も一つにまとまり見やすくなりました。
今までyahooからのアクセスが1件も表示されていませんでしたが8月から表示されるようになりました。
これも直されたようで仕様がどうなっているか解りませんがこれで正常になったような気がします。


先月中ごろから、滋賀咲くのアクセス元の「ブックマーク等」が分解されて見にくくなりました。

滋賀咲くさんに聞いてみると

「アクセス解析のアクセス元は「どこ」から「どのページ」にアクセスされているのかが表示されています。
同じ「ブックマーク等」でもURLが異なるのは「ブックマークされているページ（URL）が異なる」ためです。
利用者（ブログ閲覧者）がブックマークするのは「トップページだけ」とは限らないので、
複数のページがブックマークされているのは、広くサイトが見られていると言えるかと思います。」

と言われたのですが、6月までは一つにまとまっていたので何かが変わったのだと思うのですが？(*_*;

いつの間にか滋賀咲くブログの管理画面が機能アップされている。

去年の１0月か11月頃からだと思うのですが管理画面に過去のPV、訪問記録が追加され、最近ブログランキングが追加され機能アップされています。

今年になってWindowsでしか機能しなかったデザインモードがＬｉｎｕｘでも使えるようになっていることに気づいた。

その他にも機能改善が行われているみたいなのだがお知らせがない。

折角使いやすいように機能アップされているのならもっとアナウンスしたほうが良いのではと思います。

あまり使うことはないのですが画像の上にカーソル（マウスポインター）を置いた時に画像を切り替える方法を調べましたので記録しておきます。

画像の上にカーソルを置くと画像が変わります。

これのHTMLは以下のようになります。
<img src="//img01.shiga-saku.net/usr/i/n/f/infojiji/P1114946.JPG" onmouseover="this.src='//img01.shiga-saku.net/usr/i/n/f/infojiji/P1114944.JPG'" onmouseout="this.src='//img01.shiga-saku.net/usr/i/n/f/infojiji/P1114946.JPG'" border="0" vspace="2">

説明は
<img src="①最初に表示する画像" onmouseover="this.src='②カーソルをおいた時の画像'" onmouseout="this.src='③カーソルを離した時の画像'" border="0" vspace="2">

①と③は同じ画像で②はカーソルを置いた時の画像です。

簡単なやり方は画像の挿入を標準で行うと
<img src="//img01.shiga-saku.net/usr/i/n/f/infojiji/P1114946.JPG" alt="" title="">
上のようなHTMLタグが挿入されるので挿入されたタグの赤字の部分を切り取って上の説明の①②③の部分に該当の物を貼り付けて使用してみてください。

滋賀咲くブログなどが使っているCLOGの「デザインモード」がwindowsパソコンでしか動作しないことを初めて知りました。

XPが終了してlinuxbeanを入れてみたのですが、デザインモードのアイコンが表示されません。

Clogシステムのヘルプページに書いてあるのですが、今時windowsのみでＭａｃやｌｉｎｕｘで動作しないとは思いませんでした。

お恥ずかしい話ですが、以前にデザインモードの使い方の記事も書いていました。

Windowsで見た場合



赤丸の部分が表示されないのでMACやLinuxではデザインモードが使えない。
MACのみでご使用の方は「デザインモード」があることに気づかないかもしれませんね。
(MACは環境がないので直接は確認していません。)


ブログも大分慣れてきたのでデザインモードは画像の位置合わせや改行などの調整に使うだけですが、あると便利です。
CLOGシステムを直して頂けるとありがたいのですが、取りあえず私は爺爺の手習いに通りすがりさんからコメント頂いたuser agent switcherをブラウザーにアドオンし、必要なときにwindows−IEに変更して使っています。

遅くなりましたが前回の2014/01/25写真をブログ上で簡単に拡大表示する方法。（滋賀咲くBlog）の最後で参考表示した方法を説明します。

この方法はlightboxを使用しますのでテンプレートをカスタマイズする必要があります。
自信のない方は諦めて前回の1と2の方法で試してください。
また、確認したのは滋賀咲くBlogだけで他の「Clog」のブログサービスを利用しているものに適応するは確認しておりません。

方法
管理画面でブログの設定のテンプレートをクリックし、使用中のテンプレートのカスタマイズをクリック

上の画像をクリックするとこの機能を使って大きく表示されます。

編集・再選択のカスタマイズで[トップページ]と[個別記事]の<title>の上の行に次の文字列をコピーして貼り付けてください。

<link rel="stylesheet" href="https://shiga-saku.net/js/lightbox251/css/lightbox.css" type="text/css" media="screen" />
<script src="//shiga-saku.net/js/lightbox251/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="//shiga-saku.net/js/lightbox251/js/lightbox.js" type="text/javascript"></script>


上の画像をクリックするとこの機能を使って大きく表示されます。
トップページと個別ページにコピーし保存をクリックすれば完了です。



ブログを書くときにする事
画像を挿入するときに表示方法をサムネイルで取込む。
<a href="//img01.shiga-saku.net/usr/i/n/f/infojiji/P1110012_2.JPG" target="_blank">
<img src="//img01.shiga-saku.net/usr/i/n/f/infojiji/P1110012_2-s.JPG" width="100" alt="" ></a>
（青字の部分はブログごとに異なる）
のように書き込まれますので、target="_blank"を消して代わりにrel="lightbox"を張り付ければOKです。

前にも説明しましたが、サムネイル（最初に表示される画像）が小さすぎるときは上の-sを消し、100の数字を大きくすれば大きくなります。

rel="lightbox"の文字列は記事編集画面右上のメモ帳に貼っておくと便利です。

初めに
この方法は、滋賀咲くBlogのように「Clog」のブログサービスを利用しているものに適応すると思いますが、確認したのは滋賀咲くBlogだけですのでよろしくお願いします。


画像を挿入するときに表示方法をサムネイルで取込むと

<a href="//img01.shiga-saku.net/usr/i/n/f/infojiji/P1110012_2.JPG" target="_blank">
<img src="//img01.shiga-saku.net/usr/i/n/f/infojiji/P1110012_2-s.JPG" width="100" alt="" ></a>
のように書き込まれます。


これは
<a href="写真の保存アドレス/拡大画像.jpg" 表示方法（target="_blank"）>
<img src="写真の保存アドレス/表示画像.jpg" width="大きさ" alt="名前"></a>
このような意味です。


上の表示方法のtarget="_blank"　を下の文字列に変えるだけで拡大表示ができます。
（青字の部分はブログごとにそれぞれ違います。）


枠の中に表示
数字は表示枠の大きさです。
写真が大きくてもこの枠内に収まり、スクロールバーが出ます。

rel="gb_page_center[600, 450]"




枠なし表示
取込んだ写真の大きさで表示されます。
消すとき（元の画面に戻る）は画面右上の半分隠れた×を押します。（これが少しネックですね）

rel="gb_image[]"




参考
この表示が一番適当なのかもしれませんがテンプレートのカスタマイズをしないといけないので後日説明します。



20140602追記