ドキュメント掲載とラベル追加

今日の勉強事：ドキュメント掲載

今日は予め作っておいたドキュメントをスライドショー？
…ともかく、bloggerに掲載してみよう！というお勉強の実践です。

見れないとき用のリンク先。
自己紹介にも満たないようなそれでも自己紹介なんですよ。
といった感じのものを試しに作ってみたのですがいかがでしょう？
Google＋Blogger、ともに便利ですね…。
単なる自己紹介でも、こうやって少し手を入れるだけで「見てやろうかな？」って
気持ちが動きそうなものを作れるんだなぁ…同じ文字の羅列でも違いを感じました。

覚書：ラベル追加

「やる！」といって忘れておりましたラベルの追加なのですが、
投稿ごとに編集しなおしてラベル追加って面倒くさいので、一括でやれる方法ないかな？
と、探してみました。
自分自身が忘れそうなので、メモとして残そうと思います。

うん。これで忘れてしまった時も大丈夫だ。

今日はここまで。

今日の習い事。

GIFアニメをつくろう！…と、いうことで。
ためしに作ってきました。

このGIFアニメは、GIFアニメスタジオさんにて作成させて頂きました。
何故か編集時に、設定しておいたサイズを間違えていたみたいで、バナーサイズとしては一般的ではないですが…まぁ、練習ということで。

ところで、数日触っていない間に画像フォルダが画像挿入時に表示される様になってますね。
いつの間に…という感じですが、やはり不満の声が高かったのでしょうかね？
ためしに、過去upしておいた画像を持ってきてみました。


サムネイル付きで原寸画像もあるよ！
数週間前の私の努力は無に帰しましたが、こういった仕様変更、有難いですね。

今日はここまで。

今日習ったこと。

Bloggerに関しては、ラベルについて知りました。
所謂「タグ」なんですね。
覚書を今後探す必要出てきたときどう探そうかなぁ。と思っていたところでした。
後日、落ち着いてラベル分けしようと思います。

レイアウトなお話。

マウスオーバーで色を変えたり、画像をランダム表示させるスクリプトなんかを教わりました。
ほかにも、centerタグは使われなくなってきている！などなど…。
ためしに何か新しく入れ込めたらな、と思います。画像そろえてきてランダム表示のページ作ってみる。とか。

他には、ブログのタイトルに関してもちょっと目から鱗なことに気づかせて頂きました。
これは忘れずノートにメモったので今後、自分に生かせていけたらいいな。と思ってます。

それにしても、クロームにある「要素の検証」って本当に便利ですね…。
「ソースを見る」よりもっともっと便利で有難い機能だなぁ。
クローム触ってる人でいじったことない人は一度いじってみることお勧めしますよ。
手探りでHPやブログをいじるには、大変便利ですから…（凄く実感してます）

と、今回はここまでということで。

今日のお勉強

数日前の覚書で、「TOPとは別にイメージを持ってきて、独自にTOPのCSSを改変したときに使うといい具合になる時の設定。」
…とかいってメモを残していましたが、早くも使う日が来ました。
で、ブログのタイトル代わりに入れ込んでいた画像を消して、同じ画像を別途別のページを作ってきて入れてきました。
入れただけだとやっぱり、別ブラウザからみるとレイアウト崩れが酷いです…。
これから地味～に、別のブラウザ表示との差異を埋めていく戦いがはじまる…！
IE8かな？せめて若干のレイアウトの違いはあってもそんなに酷くなく見れるように調整していきたいです。

長い戦いになりそうです。徐々にあっぷあっぷしてきました。（ヽ´ω`）ﾌﾌ…

ちなみに、「タイトルに画像を使用する」手法でレイアウトをいじっていた時の私が組んでいた設定はこれです。
.tabs-outer{margin-top:-50px;}
.descriptionwrapper{font-size:10px;}

今回の編集ですっごい設定増えた。これからも増えるんだろうな。覚えきれるかな…！

今日はここまで。

個人的な覚書：原寸画像

今日は、いつも習っていることをぽちぽち乗せるでなく、個人的に調べ上げたメモを残そうと思います。

「何を調べたの？」と、いいますと…
ずっと気にしていたんですよね。【画像URL】のこと。

Bloggerを触り始めて、個人的に気になったことが画像だったのです。
普通、画像ってPC内に保存してあるものを、サーバーに保存して記事などに載せますよね？
当然、保存先のURLというものが生成されているはず。

で・す・が。

Bloggerの記事編集画面を見ると画像の保管場所が出てこないんですよね！
ちょっとこれ困るんですよね！

どうも、画像の保存容量は無限？だとかどうだとか調べ回ってみてチラチラと目にしているのですが
同じ画像を使いまわしたい時ってあるじゃないですか。
例えば、昔投稿した画像を比較するために持ってきたい時とか…。
ブログのTOPを画像で飾ったけど、期間限定で元に戻したいときとか…

元画像はもうPC内に残していなくて、Web上にしかない場合、
保管していたところからDLできるようにはなっているのですが、それをDLしてもう一度画像投稿って…
ぶっちゃけ、同じ画像がフォルダに何枚も生成されるって鬱陶しくないですか？
保存容量に限りがある所だと、同じ画像を何枚もアップロードするのって無駄すぎて困るんですよね。

なので、どうにかして何度も同じ画像をupせずに、既に保存してある画像使いたい！
…と思って調べ回りました。

＊保存した画像はどこにある？

保存したときのウィンドウを見てみましょう。

Picasaというところにあるようですね。
もしくは、Google+な人は「もっと見る」というコマンドから「写真」というところをクリックすれば
アルバムとして画像の保管してあるところに飛べたりします。

…よくわかんないのが、どっちもURL違うって所なんですけどね。

サムネイル画像という、自動的にサイズを小さく表示したりした、リサイズされた画像を利用したい場合は、Picasaから編集すると便利なようです。
添付している画像の赤枠で囲んでいる所をお好みにいじってみればいいと思います。

縮小画像を使うなら、上記で良いのですが…アップロードしたときのそのままの「原寸画像」を使いたいときは…
再びですが、Picasaか、「もっと見る」の所から「写真」をクリックして飛んで、表示させたい画像でURLコピーを押します。

ここで注意しておきたいことがひとつ。

PicasaのURLだと「https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2ng8BAnZnjjh_8GSbejznV48P_ha9Ze25s3iEAzp2s1l5dXyQoh2YCMO-zSnfioeV9SXJp0P7ZuRv8wBuL7KxYdNVHb64r1AZWb-K4e32SLlJezBao7zITHBd2PwNv7B_u7AeejkKWg/s144/1.jpg」

Google+からだと「https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA2ng8BAnZnjjh_8GSbejznV48P_ha9Ze25s3iEAzp2s1l5dXyQoh2YCMO-zSnfioeV9SXJp0P7ZuRv8wBuL7KxYdNVHb64r1AZWb-K4e32SLlJezBao7zITHBd2PwNv7B_u7AeejkKWg/s646/1.jpg」

ものすごーくURL似てますね。各々のURLへ直接飛んでいただくとわかるのですがこのままだと表示サイズが原寸じゃありません。
ここに一工夫すれば原寸表示されるのだそうです。…調べるの苦労しましたorz

ここまでくればもう簡単です。画像のURLの「/s144/1.jpg」、「/s646/1.jpg」…
ここの「/s○○○/」を「/s0」（数字の0を半角入力）にしてみましょう。
すると、原寸画像が出てきてくれます。

もしかしたら、もっとちゃんとした表示方法などがあるのかも知れないのですが、私が調べ上げた結果では今のところこれが一番なのかなーって。
よそ様のHPとかから、画像を拝借…とかではなく、自身のサイト（？）からのみなので大丈夫かな？
自分にだけわかるような書き方にしてもよかったのですが、誰かがみても理解できるように頑張って説明風にしてみました。
見事にいっぱいいっぱいで至極わかり難い感じになっていますが、ね。orz

今回はここまで。

覚書。

.widget-content img{margin-bottom:-33px;margin-top:-33px;}
.header-inner{margin-top:-40px;}
ちょっと覚書。テンプレートをいじってみたときのタグを残しておこうと思います。
これは、TOPとは別にイメージを持ってきて、独自にTOPのCSSを改変したときに使うといい具合になる時の設定。
ただし、私が今使用しているテンプレートの時のものなので、全てがこれでいい具合になることはありません。
…それにしても、テンプレートいじってIEでみるとレイアウト崩れが酷いですね…（元に戻した理由がそれ）

今日習ったこと

「文字に影をつける」

ということを習いました。
見出しに影をつけてみたので、所々影の付いた部分ができていると思います。

ただ、悲しいかなIEでは影の表示ができないらしく、googlechrome等でないと表示されないようです。
色んなブラウザがありますが、IEさん頑張れ超がんばれ…

CSSもぽちぽち勉強中。

改行いれると画像下に出ちゃうんですね。ちょっと文字を入れ込むときに使う感じかな？
メモメモ…。
タグっていっぱいあって覚えるの大変ですね。
英語覚えるの苦手なので書き取りして覚えるべきか。

今日はこの辺にて。