掲載:2015年12月29日
20151229-01_s.jpg 先日、ブログ記入欄のお知らせに以下の物が有った。自分は、一度ブログを改装すれば後は余り触らない事にしているが、今回は自分が確認するためにも一応表示しておこうと追加した。

 其れが何かと言えば、上に書いた「このブログの人気記事 (直近24時間)」、是はコンテンツえを自分の入れたい場所に追加すれば其処に表示される。自分は、最新記事一覧の上にコンテンツを追加した。

 【Seesaaブログ】からのお知らせは以下。

 ----------
★ 【Seesaaブログ】人気記事コンテンツをリリースしました

ブログ内で人気のある(PV数の多い)記事をランキング形式でブログ上に表示できる、人気記事コンテンツをリリースしました。

これにより、よく見られている記事のタイトルとリンクをブログ上に自動的に表示することができ、ブログ訪問者を人気のある記事へと誘導しやすくなります。なお、ブログに設置後、コンテンツ内に人気のある記事が表示されるまで多少時間がかかります。はじめてご利用の際は、設置後しばらく時間をおいてからブログをご確認ください。

また本機能はマイブログ内のアクセス解析機能と連動するものではありません。本機能で利用するための先月分データがまだ存在していないため、後述します設定項目において期間を「先月」に指定しても2015年8月中は有効な情報が表示されません。期間として「先月」を指定したい場合には、2015年9月になってからの設定変更をおすすめいたします。

■利用方法
通常のコンテンツと同様に、マイブログ>デザイン>(PCまたはスマートフォンの)コンテンツで、人気記事コンテンツを任意の場所に追加し、「保存」をクリックすることで利用できます。ブログに追加するだけで機能しますが、以下項目を設定することも可能です。

【タイトル】
コンテンツのタイトルとしてブログ上に表示する文言を指定できます。デフォルトは「人気記事」です。

【期間】
集計の対象とする期間を「昨日」「24時間」「先週(月曜日〜日曜日)」「先月」から指定できます。デフォルトは「24時間」です。

【表示件数】
表示する件数を指定できます。最大50です。デフォルトは「5」です。

【ページビューを表示】
サンプル(43)というように、記事タイトルの右にページビュー数を表示することができます。デフォルトは「しない」です。

【順位を表示】
1.サンプル(43)というように、記事タイトルの左にブログ内での順位を表示することができます。デフォルトは「しない」です。

【人気記事が無いとき】
人気記事として表示できるものがない場合はこのコンテンツを表示しないようにできます。「なにもしない」を指定すると、人気記事の有無にかかわらず本コンテンツが表示されます。デフォルトは「なにもしない」です。

 -----------

※ 【Seesaaブログ】人気記事コンテンツをリリースしました:
 http://info.seesaa.net/article/424371442.html

    (*^‥^*)」 イヨッ
掲載:2014年07月24日
20140724-01.jpg 以前の背景色黒のブログに比べ、このブログは見易いですか?。皆さん如何ですか?。自分は見易い。ただ、自分でも少し困った事も有ります。

 そう、自分のブログの以前の記事を読む場合、ついつい横幅を今までより小さく、現在の状態では上のスイッチが2段に成る状態で、拡大レベル150%で見てしまいます。大変自分には見易いです。

 しかし、この状態で他のブログやHPを見れば、殆どの場合画面の一部分しか見えません。仕方なくフル画面にしないと読めません。是が少し大変です。

 レスポンシブWEBデザインのブログ、HPはまだまだ少ないです。でも、早くこの様に成って欲しい自分です。

 そんな見易いと思うレスポンシブWEBデザインのブログに向けて改装中ですが、現在少し停滞中です。その原因は、

@ CSSの文字大きさが解明出来ない
A 自分はアンドロイドのスマートフォンとタブレットしか持たないが、アイフォンの画面を先日確認、アイフォンは画面設定が出来ず、PC画面の拡大しか解らなかった。

 この2つが停滞の大きな要因。そう、どうすればいいか判らない。一気に意気消沈です。ただ、其れに関係の無い文字の相対的大きさ、間隔等の設定は少しずつ進めて行きたいと思います。

 そう、判らない事がまだまだ一杯有ります。

   (*^‥^*)」 イヨッ
掲載:2014年07月19日
20140719-01_s.jpg やっとブログ改装をスタートした。そうスマートフォンからタブレット、そしてPCまで同じ画面で確認出来る様にしたい。

 最初の目的から少し変更した。でも、忘れてはいない。本来の目的は、閲覧者が見易く操作しやすいブログ、そんな物を目指して居る。

 1カラムへの変更も一応は終了、スイッチも作動出来る状態になった。単純に考えれは、PCだけなら何時も見えてる2カラムのサイドスイッチの方が絶対に操作しやすい。そう、サイドバー落としと言われる手法である。でも、現状でもPC以外の閲覧者が40〜50%居られるのが現状である。

 そして、其のサイドバー落としにも直ぐ対処するのも可能な様に空きカラムの設定もしてある。しかし、何故2カラムのサイドバー落としにしなかったかと言えば、以前の状態でも文字が折れ曲がり、何段かで一つ表示をしていたため読みずらかった。それなのに文字を大きくすればもっと読みすらくなる。其れで2カラムは中止にし、1カラムにした。

 其れでこの状態、縦に長くなり、一応瞬時移動(爆)出来るスイッチを付けた。この時点で、閲覧者が今までのサイドスイッチを押すまでに1動作多く成ったのは申し訳ない。

 確かに、今の状態でもスイッをその項目に持って行った場合にその項目を表示すれば、動作は1動作で済む。其に障害と成るのがカテゴリの多さである。現在でも20を超えている。

 昨日、このブログを自分のタブレットとスマートフォン端末で確認してみた。その結果、現在ブログ上に有る黒色のバースイッチはこれ以上細くすれば指で押せない事が分かった。是がスイッチの高さ(太さ)の最低ラインと言う事だろう。細くするのは簡単だが、その分、充分に横や縦の間隔を取らないと画面拡大しないと押せない事態となる。

 実際やって見れば色々と判る事もある。其れは色々な考察中の中に有るので、取り合えずは、文字の大きさを変更することにした。手はじめはバーナー、所謂h1で示されるブログやHP内で一番大きな文字である。

 現在其処に指示してあるのは、フォント・文字の大きさ・パディングとマージンである。その前に、この相対指示に対しての基本も文字大きさは100%/1.5にしてある。そして、先程是を120%に上げた。

しかし・・・。

 ----------
body {
font: normal 120%/1.5 font-family: 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'MS Pゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}
#banner {font-family: 'Helvetica Neue', Helvetica, Arial, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'MS Pゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;
}
#banner h1 a {font-size:1.000em;}
.tag-title {font-size:1.200em;}
#banner .description {font-size:1.000em;}
.sidetitle {font-size:1.000em;}

・・・・・・

#banner{
background-color:#e3f9e3;
padding:0em 0em 0em 0em;
margin-bottom:0em;
}
#banner h1 a{
color:#333;
text-decoration:none;
}
#banner h1{
margin:0;
padding-top:0.400em;
padding-bottom:0.400em;
padding-left:1.000em;
}
#banner .description{
 ----------

 初期はpx設定、是をem設定に変更、基本を100%に設定(現状120%)した。初期のPx指示の大きさは通常文字の1.8倍〜2倍の大きさだったと思う。其処で最終的には1em、つまり基本の大きさで普通なら16pxの大きさに指示して是である。

 因みに現在のa文字の大きさは「1em」である。確かに、CSSは初期に書かれた物より、後に書かれた物を適用する様に成って居る。でも、後にこのh1への指示は無い。

 そして、画像をご覧下さい。バーナー部文字「忘れられた記憶」の文字左に1em(1文字)分の空白を入れて有る。その分は指示どうりに空いている。でも、上下をご覧下さい。是が何度見ても0.4em(文字大きさの0.4倍とは思えない開きである。

 確かに。命令を書くHTMLの隙間を開けて書けばこの様な事も起こりうる。色々知る限りの事はやって見たが改善されない。

 何方かお判りの方、是非お教え下さい。因みにこのブログのCSSはご存じとは思うが、以下から落とせる。餅屋は餅屋、ブログ改装、やれば色々起こり難しい。

 実際はこの最上段の文字、「忘れられた記憶」をスイッチ部と同様の文字まで小さくしたい。今でも小さくは出来るが、何か指示が可笑しな場所があり、其処を解明して改善しないと他まで可笑しくなる気がする。

※ このブログのCSS:
 http://m-jun.seesaa.net/styles-index.css

   (*^‥^*)」 イヨッ
掲載:2014年07月18日
20140718-01_s.jpg このブログの改装、思う様には中々行かず、先ほど何とかスイッチも動き出した。
そう、このスイッチには先日のサイトと同じようにJavaScriptが使ってある。幾つも使うと当然ブログは重く成るし、複合して使うとソースが干渉して両方の物が動かなく成ったりする。

 それ以前にどうすれば本当に見易く扱いやすいのか、自分はこう使うが人はどうするだろう?。とか、幅の違うPC・タブレット・スマートフォン、当然使い方も異なる。PCはマウスが有るが、タブレットとスマートフォンは一応普通に使えばフル画面で表示形態も小さい。

 操作は指、何というのですか?、フリックとかの操作も有りましね。昨日、一応はブログ内を移動出来るスイッチを付けました。一般的にはこの形態が多く有ります。この方式が使いやすいのか、横に3ページ程に分割する方が見易いのか、解らない。

 スイッチ、このタイプは画面と一緒に動く。最初移動させれば上に固定されるものの採用を考えた。其処までは良かったが、幅を縮小させれば、2段にも3段にも成って画面の半分以上がスイッチで隠れると言う事に成った。是では実用に向か無い。

20140718-02_s.jpg 確かに、専用ブログと言うのは作るに容易いが、共用というのもまた色々と違った考えを持たないと成立しない。何か触っていて、哲学的な考えもしないと・・・と思ったりしていた。

 ただ、まだ完全ではないが、IE等の拡大機能が100%使える様に成ったこと。これだけはいい。上下だけスクロールしていれば、横にはみ出た物が無い。因みに写真上が150%、下は200%、文字はその倍率で確実に大きくなって見やすい。

 一応は動き、消えてる字も有るが、気のついた、皆さんの閲覧の多い記事だけ修正しようと思います。何しろ色々な記事数が3700件余り。その前に、文字や間隔の修正をします。見易さ、使いやすさ、アイデア、何なりと意見を頂ければ幸い。

   (*^‥^*)」 イヨッ
掲載:2014年07月16日
20140716-01.png 以下の通り、此処母屋の改修工事を実施致しますのでご連絡申し上げます。尚、本当に手を付けて見ないと概要は全く不明です。

 その理由として、其々のサイトコンテンツの立ち上げ時の改装が全く異なること、それ以降のseesaa側の改装には一切手を加えて居ないことなどから手を入れて見ないと解らない状態です。

 何とか早期に読める状態にしたいとは考えますが、入れ替え一気に読めない状態が起こるかも知れません。

 どうぞご理解の上、ご協力をお願いします。

 尚、改装により、文字の大きさ及び色調、コンテンツ位置などが変わる場合が有ります。以前より使い易く見易いブログを目指しての改装ですので、改装途中で有っても、ご意見を賜りたく思いますので、コメントにて宜しくお願い申し上げます。

 尚、意見コメントは「お名前欄”匿名”と記入」でお願いします。

@ ブログ母屋改装工事: 忘れられた記憶

     URL : http://m-jun.seesaa.net/

A 改装工事期間: 2014年07月16日から当分の間

B 改装目的: 見易く閲覧し易いブログを目指し改装

C 改装方法: 記事を残し内部総入れ替えで「レスポンシブウェブデザイン」を目指す

  ・ 内部HTML/CSS(デザイン)/内部コンテンツHTMLの総入れ替え

D 改装順位:

@: デザイン設定をデザイン一覧の「超シンプル (右サイドバー) 」に変更
A: とりあえず全ての文字が読める状態を早急に確保
B: 「超シンプル (右サイドバー) 」の2カラムを1カラムに変更
C: 1カラムへの変更によるパターン崩れ等の修正
D: 290ピクセル対応への修正
E: 文字・マージン・パディングの修正
F: 文字大きさ・マージン・パディング等の相対化
G: 新規スイッチ類装着テスト(未だテストも有りません)
H: 新規スイッチ類装置
I: 全体修正
Xi: 完成

E 改装後に残る物:

@: 記事・写真・写真拡大機構

F 改造後に大きく変化すること(目標):

@: 背景色を黒から白に変更
A: 2カラムから1カラムに変更のため、右スイッチ類が無くなり他に移動
B: 記事部文字大きさ初期値を大きく設定(目標1.2倍)
C: プラウザ拡大/縮小機能に完全対応

   以上  宜しくお願いします。

   (*^‥^*)」 イヨッ

★ 忍法変わり身・・・えいやーでCSS変更、文字化け発生、意味不明。CSSで文字化けはしないだろうに。そして、幅がでかい!。(AM7:00)
・ 設定> 詳細設定> ブログ設定 の最新の情報に更新を何度も実行!
★ 幅が700程度で固まってびくともしません。この700程度の数字は何処にも存在しません。
・ 可笑しい!。
★ 1ヶ所束縛を発見、外すも450程度までにしか成らす。またも文字化け!。
★ 一応、幅の可変化はひとまずOK,最小幅290で制限。これで、小さな端末でも一応見られます。ただ、直接指示の文字が一部見えないものがあります。多分、白とか黄色指定だったのだと思います。
★ 記事は上段、その他のカテゴリー等は記事下に一応設置。今後、飛ぶスイッチ(リンク)を上部に設けます。とりあえずは1カラムに移行。

   (*^‥^*)」 イヨッ
掲載:2014年07月15日
改装のため、改造前を保管

 ----------
★ バーナー部(上から)

@ ブログタイトル
A ブログ説明(改造品)

★ コンテンツ部

@ 記事(改造品)

★ サイドバー(リンク)部分

@ 記事検索 (Yahoo!カスタム検索!改造品)
A カ テ ゴ リ(記入品)
B 最 新 記 事
C 最 新 コ メ ン ト
D 最 新 トラックバック
E カレンダー
F 過 去 ロ グ(開閉スプリクト追加)
G リ ン ク(記入品)
H プロフィール(記入品)
I RSS(改造品)
J ブログ画像
K QRコード(改造品)

★ フッター部分

@ Powered By
 ----------

   (*^‥^*)」 イヨッ
掲載:2014年07月14日
20140714-01_s.jpg 卓上実験の様に本当に計画通り動くのか、このブログに装着出来るのか、その点に附いて調査してみた。結果、

@ 今の状態では、カテゴリーの多い、記事数も多いサイトには何か他の要素を取り入れないと。「responsive-nav」単体での利用は難しい。

A カテゴリー数が5個程度の物で有れば、同様形態で使用は可能。ただ、何故かサイドバーが出た状態では、スムーススクロールが効かない。消えれば可能なのでスマートフォンなど記事が上下に長く成る端末使用時には使える。

B この物を実験していて感じたが、本当に良く考えないと本当に使いずらい(閲覧しにくい)物と成る。昔良く有ったHPに用も無い表紙扉に同じで有る。

C 使いこなすには、多分にJavaScriptとCSS・HTMLの知識が要るのは何れも同様である。

D この物は面白いとは思うが、この自分のブログに現状では向かない。要は、着ぐるみより体がでかいんです(爆)!。

※ 星が好き・・・:
 http://cococore.seesaa.net/
※ responsive-nav:
 http://responsive-nav.com/
   (*^‥^*)」 イヨッ
掲載:2014年07月12日
20140712-01_s.jpg ブログをレスポンシブウェブデザインにするには、素人的には本当に難しい。そして、数日前「responsive-nav」を見つけた。早速ダウンロード、是は素晴らしい、皆さんに日本語にしてお見せしなければとデモを日本語の案内にした。

 そう、殆どそのまま内容を魯山人に変えただけ。こんなことしてもいいの?と思われる方も居られるだろうが、内部を翻訳器で翻訳すればMITライセンス(MIT License)だったので出来る事。使い方は現在多く配布されれいるJAVAアプレットに大差ないと理解。ただ、現在は試用中と理解して下さい。日本人の考える著作権表示と言うのは、もう少し厳格に考えないといけない。

 そんな「responsive-nav」のデモ品の内部を日本語にしていると、構造が非常にブログに近い事に気が付いた。是なら、着ぐるみ出来るんじゃ無い?。そんな事で昨日着て見た。

 文字の大きさが可笑しいなど色々体に合わない所が有ったが、何とか着たというのが昨日。

 そして今日はもう少しだけ、体を着ぐるみ「responsive-nav」に合わせた。是には先日から読んでいた色々な「レスポンシブウェブデザイン」と言う物が役に立った。

 昨日と今日、何が違うかと言えば、本当に基本的なこと。文字の指定は通常はpx(ピクセル)指定やmedium・smallと言う大きさを直接指示してブログ・HP等を作られる事が多いと思うが、是を数値+単位(em 等)またはパーセントで指定する方法に内容を変えた。

 まだまだ可笑しな所、変更しなければ成らない所は一杯だが、昨日より「responsive-nav」に体をより合わせていると思う(爆)。

※ responsive-navの着ぐるみを着たブログ「星がすき・・・」:
 http://cococore.seesaa.net/
※ responsive-nav:
 http://responsive-nav.com/
※ MIT License - ウィキペディア:
 http://ja.wikipedia.org/wiki/MIT_License

 (*^‥^*)」 イヨッ
掲載:2014年07月11日
20140711-01_s.jpg 昨日、あの様な見事なデモをみてしまうと、ブログ・HPをお持ちの皆さんは何とかご自分のブログに採用したいと思われたはず。

 あれだけ出来ているのだから、着ぐるみの様にご自分のブログにも着せられるのでは?。

 とお考えに成られた筈、そうですね着せるのは簡単なのですが、あの様に動かすのが難しいのです。其れも、以前からブログを書いて居られる方は記事数も有り、其れを継承しての着ぐるみレスポンシブウェブデザインで無いと意味が有りません。

 新しくブログを開設する方、商用のHPを作られる方、記事数が数十件、組直しもいとわないかたには簡単に着ぐるみを着せる事が可能かも知れません。

 でも、このブログの様に、記事は3000件を超えてる、カテゴリーは25態度も有る、画像も一杯貼って有る、そんなブログは結構是が一筋縄では行きません。

 では、自分が本日着て見た、着ぐるみレスポンシブウェブデザインをお見せいたしましょう。是は元来HPを持たない自分が応援したい個人商店の案内ブログ、なので、1店舗1枚の案内、其れも数件しか有りません。なので、新規開設ブログに変わりません。

 なので、殆んど昨日のデモと変わりません。でも、一応、ブログで記事を普通に入力・修正が出来ます。ただ、カテゴリー(お店数を増やすには現在の所、HTMLの直接編集が)必要ですが、個人商店の方がお店のHPを御作りになるのは本当に簡単です。

 其れも、レスポンシブウェブデザイン!、スマートフォンからPCまで対応します。

 ではでは、未だ完全に未完成ですが、昨日同様ご覧下さい。

 そうそう、何故あんな場所にseesaaのPowerrogoロゴ?、はい長すぎて下のロゴが中々見えないため。何れ外に出します。実験では型が崩れて・・・。他の所ではOKなのですが、スプリクト内だからでしょうか?。

※ 他力本願・着ぐるみレスポンシブウェブデザイン!:
・ 「星がすき」
 http://cococore.seesaa.net/
※ responsive-nav.jsダウンロード先・使用方法:
 http://responsive-nav.com/

   (*^‥^*)」 イヨッ
掲載:2014年06月19日
 ブログ記入から10年余り、余りにも過去ログの年月日が長く成り、簡単な方法が見つかったので折り畳んだ。

 以前にも説明したと思うが、自分は折り畳みなどは余りしたくない人間だが、過去ログページなら差し障りが無いと思いjavascriptを採用、原典は以下。

※ 開閉スクリプトを改良(Seesaaで超簡単設置):
 http://monohonblog.seesaa.net/article/5147007.html
※ Movable Type作業メモ・長くなっている部分を隠す:
・ showhide.jsの入手先リンク:
 http://artifact-jp.com/mt/archives/200401/mtmemo0122.html


@ 上のリンクからshowhide.jsを頂いて来る。因みに内部は以下。

/* p2 - メニューカテゴリの開閉のためのJavaScript */

if(document.getElementById){
document.writeln('<style type="text/css" media="all">');
document.writeln('<!--');
document.writeln('.sidehide{display:none;}');
document.writeln('-->');
document.writeln('</style>');
}

function showHide(id){
var disp = document.getElementById(id).style.display;

if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}

function showHide(id){
var disp = document.getElementById(id).style.display;

if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
return false;
}



A このshowhide.jsを自分のブログにUPして、そのURLを記録する。

B seesaaブログの編集画面/デザイン/デザイン一覧/HTML編集画面:</head>の上に以下の文字を入れる。showhide.jsのURLはご自分のブログのURLに変更。

 <!-- この括弧で囲まれた部分は説明行で一般には不要 -->

<!-- 開閉スクリプト追加開始 -->
<script type="text/javascript" src="http://m-jun.up.seesaa.net/●●/showhide.js"></script>
<!-- 開閉スクリプト追加終了 -->



C 過去ログのコンテンツ設定画面 挿入テキスト(上部)に以下を記入。

<!-- 開閉スクリプト追加開始 -->
<a href="javascript:void(0);" onClick="showHide('hide1');" title="クリックする毎に伸び縮みします">▼ 見る ◆ 畳む ▲</a><BR>
<div class="sidehide" id="hide1">
<!-- 開閉スクリプト追加終了 -->



D 過去ログのコンテンツ設定画面 挿入テキスト(下部)に以下を記入。

<!-- 開閉スクリプト追加開始 -->
</div>
<!-- 開閉スクリプト追加終了 -->



E 各部を保存、念のため設定> 詳細設定> ブログ設定 の最新の情報に更新を実行して保存、終了。過去ログが折り畳まれており、ON/OFFが出来れば完了。

 この「showHide('hide1');」で指定したidの部分を隠します。複数使う時は、「hide1」というパラメータを変えれば可能です。

   (*^‥^*)」 イヨッ

このブログの人気記事 (直近24時間)
    最 新 記 事