bloggerの見出しに背景画像を付ける

見出しのhタグにbackground-image で画像のURLを指定してやれば何となく簡単に出来そうです。この背景に使う画像のある場所が自分のレンタルサーバーなどなら話は簡単。でもこれがgoogleフォトにある画像を使おうとすると、はてどうすればいいのか？

その画像をが表示されたhtmlへのリンクなら簡単に取得できますが、はて、一枚の画像そのもののURLを取得するにはどうすれば良いのか？

googleフォトにある画像へのリンクを取得する

YOUTUBEの動画などはブログやホームページにその動画を埋め込む為のコードが取得できます。しかし、googleフォトにある一枚の画像へのリンクは？？？？？

方法としたら、例えばh3タグの背景に画像を入れようとした場合、以下のようにすれば良いわけですが、問題はこのxxxxxxの画像のurlをどうして取得すればいいのか？と言う事になります。

<h3 style="background-image:url(https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.jpg); color: white; margin-top: 0px; padding: 0.5em; text-align: left;">h3タグの背景に画像を入れる</h3>

少し見にくいですが、ご勘弁を！
このxxxxxに入るリンクを取得出来さえすれば、あとは訳もなく出来ます。

レンタルWebサーバーなどに画像データをアップしておいて、この画像ファイルへリンクするのなら簡単にできます。厄介なのはgoogleフォトにある一枚の画像だからなのです。

そこでチョット考えてみたら、自分のgoogleフォトにある画像をブログに貼り付ければ、そこにその画像のURLが書き出されている筈です。このURLをコピーして貼り付けてやればいいのでは？
試しに画像を貼り付けてやってみました。

htmlに切り替えてで表示してみると、画像表示の部分は以下のようなコードになっています。少し違う部分もあるかもしれませんが、肝心なのは赤字で示した https://から.jpg までの部分です。

<div class="separator" style="clear: both; text-align: left;"><a
href="https://xxxxxxxxxxxxxxxxxxxxxxx.jpg"imageanchor="1" style="margin-left: 1em;
margin-right: 1em;"><img border="0" data-original-height="512"
data-original-width="1200" src="https://xxxxxxxxxxxxxxxxxxxxxxxxx.jpg"
width="320" /></a></div>

随分と長ったらしいコードになっていますが、xxxxxxの部分は文字を伏せた部分なので、実際にはもっと長い文字列が入っています。

この「https://からxxxxx.jpg」までがgoogleフォトに保存されている、このトマトの画像のURLと言う事になりますから、この部分を選択してコピーしておきます。

見た目のバランス調節をして完成！

画像のURLが分かれば 前述のh3タグのstyle=の中にこのURLを貼り付け てやればメデタク見出しの背景にこの画像が配置されることになります。
やってみたらこれが大正解でした。

後は、画像と文字が旨くバランスのとれるように、文字サイズやこの文字の上下に余白を入れて画像が見やすくなるくらいに縦幅を広げてやれば出来上がり。

h3の上下のpaddingを0.5em に広げてやって見え方を調節したものが、最終的な下の見出しになりました。

全て完了したら、URLを取得するために、仮配置した画像は削除して全て完了です。

もっと簡単な方法もあるのかもしれませんが、今の自分にレベルで出来るのはこれくらいまでかな。

完成！
 

h3タグの背景に画像を入れる。縦幅を欲しいので、2行になるくらいに見出しの文を調節した方がいいです。 

この後でもっと簡単な方法でgoogleフォトの画像のURLを取得する方法を知りました。

それはGoogleフォトで使う画像を表示しておいて、右クリックで現れるメニューから「画像アドレスをコピー」をクリックすればアドレスがクリップボードにコピーされるという方法でした。

手順もこの方が手短に済みそうです。

試しにやってみたところ確かに同じような結果になりました。でも書き出されたURLは自分がやった方法とはかなり違っていましたが、URLは少し短くなっています。

ただ、気になる情報もあり、それによれば、この方法ではリンクは永続的なものではなく数日で切れてしまうといった話でした。この書き込みは2017年の日付でしたので、少し古い情報ではありますが、気になります。

そう言えば、以前はGoogleフォトの写真のURLはもっと簡単に知ることが出来るようになっていたと記憶しています。これで取得したURLで何かの地図へ画像を貼り付けたら、その後、その殆どは写真は表示されなくなっていた事がありました。
もしかしたら、このリンク切れを起こしていたのかもしれません。

実際、2つのURL取得方法で得られるアドレスは、片や最後は画像ファイル名になっていて、いかにも画像のアドレスを表しているようですが、新しい方法で取得したURLはアドレスというようなものでは無さそうでした。

リンク切れ試験

試しに両方表示させておけばそのうちにその結果も分かるのかもしれません。
新しく知った方法で同じ画像を貼り付けておいて見ます。永続的に画像のリンクが生きているのかどうかの試験です。

解決！モバイルに反映されないCSSの問題

ナント、テーマのxmlファイルをアップロードする事で全てが解決！ 

今朝から奮闘してきた件名の件がようやく解決しました。
オンラインでテーマのhtmlで追加したCSSはPC画面では反映されるのですが、モバイル画面では何をどうしても変化してくれないという訳の分からない障害でしたが、これがようやく解決です。

テーマを弄る時にバックアップはとっておきましたが、ダウンロードされたxmlファイルの中のCSSをパソコンのエディタで書き換えてまずは保存します。

ここからバックアップファイルをリストア。

そして「テーマ」→「カスタマイズ」→「元にもどす」でこのファイルを選択してアップロードしてやると、ナント、何事もなかったようにモバイルにもCSSが反映されていました。

ただ、これはそれまでにも何回かやってみた事で、これまでは駄目だったのですが、突然この方法で旨くいったので訳が分かりません．．．．．。（もしかしたらバックアップのファイル名を変えたような記憶も．．．．．．）

もしかして、これって常識？ これが仕様？

考えてみれば、オンラインで書き換えない限り、パソコン上にあるxmlファイルは常に最新と言う事になりますから、単純にこれを書き換えてアップすればいいと言うことで、特別面倒なものでも無さそうです。

しかし、それならば、カスタマイズからのあのhtml編集には何の意味があるんだろうか？

以前からのhtmlファイルのバックアップをそのままリストアしても駄目だったものが、ファイル名を変更した事により何かの辻褄が合った？そう考えるしか無さそうです。それにそれ以後はオンラインでも問題は起きていないのですから、解決したものの気持ちの悪い話です。

何はともあれ、手立てが見つかっただけでもヨカッタヨカッタ

---

話は全く変わりますが、見出しにgoogleフォトの画像を背景画像にしてみようと始めたところ、これが予想に反して意外に簡単に出来てしまいました。見出しのバリエーションが増えました。

blogger モバイルにCSSが効かない

何ともおかしな挙動をする新しいblogger

blogger の表示がパソコン表示なら問題ないのですが、モバイルではCSSが全く反映されていません。以前のbloggerでは何も問題は無かったのですが、新しいblogger になって、初めてhtmlの中のCSSを弄った途端の症状です。

勿論、モバイルの表示設定では「カスタム」を選択しているのですが、全く駄目な状態です。

ヘルプに何か書かれていないか？と探してみましたが、こちらは未だに以前のblogger でのヘルプで全く役に立ちません。だいたい、大きな変更をするのなら、その前にヘルプ情報くらいしっかり新しいものに書き換えてから初めて欲しいものです。

その後、テーマのhtml の中で .mobile を付けてモバイル用のCSSで何とかしようと思ってやってみても全く反映されない状態です。

症状をよく見てみると

■テーマのhtml内に書かれているCSSはPC表示では問題なくこれまでと同じように反映されているが、モバイル表示では全く反映されていない。
■記事の中に書かれたstyleの指定はMobileでも反映される。

こうした状況を踏まえてこれからの記事はどうすればいいのか？
答えは冗談になりそうな嘘みたいな話だけど、記事の中で全てstyleを指定していく。PC でもモバイルでも同じように、指定したスタイルを反映する方法は今の所はこの一つしか無さそうです。でも、いちいちそんな事していられないし、そんな事していたら、投稿記事全体の統一感を保つのも難しそうです。

bloggerさん、どうなっているんじゃい！
でも、何故か解決しちゃいました。

解決！モバイルに反映されないCSSの問題

bloggerのCSSがモバイルに反映されない問題が何となく解決したようです。でも原因が分からないので気持ち悪いです。

uranari-hitori.blogspot.com

とうとう「以前のbloggerに戻す」が消えた！

新しいbloggerへの完全移行で以前のbloggerに戻れなくなってしまった！ 

これまでも新しいbloggerに移ったり、また以前のbloggrに戻ったり、とあっちへ行ったりこっちへ来たりを繰り返して来ましたが、とうとう、新しいblogger に固定されてしまったようです。

自分ではこれまでのインターフェースの方が使い勝手は良かったのですが、戻れないと言う以上、新しいインターフェースに慣れるしかありません。一番の問題は「上級者向け」のカスタマイズメニューが消えてしまった事で、これによりCSSの追加も簡単には出来なくなってしまいました。

カスタマイズの詳細設定といってもこの程度

たったこれだけ！

新しく変わったbloggerではCSSを追加するにはテーマのHTMLに直接書き加えるしか方法は無いようです。

このテーマのhtmlに直接書き込むというのはチョット怖いものがあります。おかしな所を変更したりしたらメチャクチャになってしまう危険を孕んでいるので、htmlを触る時にはまずバックアップを摸ってから、が原則でしょうね。

テーマのカスタマイズから「HTMLを編集」を選択するとテーマの編集画面が出ますが、自分の場合は、これまでのbloggrertの時に追加してきたCSSはこのhtmlの550行辺りから記述されていました。

これまではCSSの追加画面ではリアルタイムで変化するプレビュー画面を見ながら細かな調節が出来ましたが、新しいBloggerではこれが出来ず、書き換えては保存し結果を見る、といった事を繰り返していくしか無さそうです。

この先、以前のようなもう少し簡単にCSSを書き加えられるようなインターフェースに変わっていってくれれば良いのですが、今のままでは何とも使いにくいbloggerになってしまったと思うしかありません。

実際には自分のこのブログも大凡のカスタマイズは済んでいるので、これから先CSSを弄る事は今までのようには無いのかもしれません。

自分がこれまでbloggerを使ってきたのも、CMが入らない事とカスタマイズ出来る範囲が広いという事が大きな理由でした。wordpressに比べると遥かに少ない情報の中で少しづつカスタマイズしてきましたが、その作業が結構楽しいものだったのです。

今回の変更でそうした楽しみも減ってしまったように感じますが、現在のテーマのテンプレートには変更する必要は無いという自信の表れなのでしょうか。

しかし、以前のような詳細設定を加えてほしいです！

新しいBlogger

IFの変わった新しいBlogger

８月中にはGoogle のブログサービスである、Blogger のインターフェースが新しいものに変わるようでBlogger の管理画面に入るとそのようなアナウンスが表示されています。一度試しておくようにと書かれているので、新しいBloggerに入ってみました。
一見あまり変わりも無いようですが、一番気になるのは「テーマ」のカスタマイズ関連でした。
これまではCSSを直接弄らなくても、かなり細かな部分までのカスタマイズが出来ましたが、新しいBloggerでは本当に簡単なカスタマイズしか出来ないようでした。

これってどうなの？改悪？

それにCSSを追加して自分の好みに合わせようとしても、これまでにはあった「CSSを追加」が見つかりません。それどころか上級者向けの設定画面さえ無いようでした。

別にこれまでにカスタマイズはほぼ完了しているので、それ程の変更も無いと思いますが、それでもCSSを変更修正する度に「HTMLを編集」からページ全体のhtmlを開いて、目的のCSSの記述を見つけなければならないのはかなり面倒な事です。

自分の環境では超不安定

他にも、モバイルではMobile 画面を表示する、にして、レイアウト選択はカスタムにしても、それが反映されず、何をどう変えてもＰＣ画面のモバイル版にはなってくれなくなってしまいました。
苦労の末、元にもどったものの、またCSSを何処かを弄くると、モバイル画面がおかしくなってしまいます。
PC画面では何をどうしてもこちらの意図したとおりの変更が出来ているのにモバイル版だけが駄目。
Blogger の新しいインターフェースへの移行期で不安定になっているのか？
それにしても、もう少し簡単にCSSを追加・変更できるようにならないと面倒くさいだけのBlogger になってしまいます。

結局元に戻して時期を待ちます

最終的には元の古いインターフェースに戻して、改めてバックアップしてあったCSSをコピーし、「CSSを追加」画面でペーストして元にもどれました。
自分の場合だけなのか、今は移行期でこんなものなのか？
自分の場合はまだ暫く変更無しでこのままでいた方が無難なようです。そのうちに何とかなって来るでしょう。

WordPress 悪戦苦闘

この間からのWordPress導入に悪戦苦闘中です。ブログサービスの中でもこのblogger は割と分かりにくいといいますが、WordPressはサーバーに本体を入れて、そこから設定していくだけに尚更のこと、結構難しいです。
しかし、この見た目を変えていく作業は面倒でも好きな作業で、少しずつ見た目が変わっていくのは楽しいものです。
しかし、いつまでもそんなことしていても仕方ないのでこのあたりで良しとしなくては！




しかし、このWordPress、導入時に手順を間違えるととんでもない事になります。
まずテーマを決めたら真っ先にやるのはこのテーマのコピー「子テーマ」を作り、カスタマイズはそれに対して行うこと。
これを知る前にスタイルを弄ってしまったので、この間の変更はオリジナルのスタイルシートに書かれてしまい、これが後に災いを招く事に！！
酷い目にあいました。
やはり手引き書の一冊くらいは手元に置いた方が良さそうです。

MWeb その２

iMac　Macbook Air 　iPhone の３つにインストールして、これらが同期をとれるように何とか設定が終わりました。原稿データを保存する共有フォルダをDropbox に設定したので、書いている途中でもここに一旦保存しておけば即同期され、その後はどれでも続きを書くことが出来るようになりました。


ところが、です。
なんと同期できるのは原稿だけで、CSSファイルは各々の中に保存されているのでこれは共有は出来ないのです。
しかし待てよ！

このCSSファイルもDropboxに置いて、各々このCSSファイルをスタイルシートとして指定すればこれも共有できるのでは？と思いつきました。

やってみようとしたらスタイルシートはデフォルトの位置にしか置けないようで、そのような設定が元々ありませんでした。
　　残念！！

MWeb

Mac用 Blogエディター

Macのブログエディターとしてはかなり名の知られているアプリなのだそうですが、今まではオンラインで書いてしまっていたので専用のエディタがあるなんて知りませんでした。
かなりの高評価をされている「MWeb」ですが、英語版なので使い方を覚えるのには一苦労。特に初期設定には手こずりました。
英語版と言っても作者は2バイト文字圏の中国の方なので同じ2バイト文字を使う日本では安定しているようです。


ブログの原稿を書くのは「マークダウン」で進めますが何種類かのマークは上にボタンがあるのでキーボードショートカットを覚えるまではこれを使えばよさそうです。
プレビュー画面がリアルタイムに書き換わっていくので間違いには即、気付いて修正できます。驚くのは動作が軽いことで、最近の重くなっていくアプリ（自分のパソコンがロートルなだけですが）に慣れてしまった自分には超速とも言える軽さです。

Mac用というだけにiOS版も出ていて、どちらでの作業も同期されますから、時間が空いた時にiPhoneで書いて、後でMacでゆっくり仕上げる、といった事も出来ます。これは有り難い機能です。

唯一つ問題は、英語版なので日本語の細かな説明書があればいいのですが、ネット上でもあっさりした説明しかされていないので、使い方の詳細がなかなか分からない事。
とは言っても基本的な使い方についてはマニュアルは必要無いかもしれません。

単純な文章ならほぼ問題は無いのですが、bliogger でオリジナルで継ぎ足したcssを適用した場合にはMWeb上では確認出来ないため、オンラインで修正するしかないようです。

使いこなせばかなり便利に使えそうです。

blogger モバイル版のフォントサイズと行間

パソコン用の画面スタイルはまぁまぁ何とかなりましたが、さてモバイルバージョンではどうなのでしょう。これまでモバイルバージョンはオフにしてあったので問題無かったのですが、これをオンにするとこちらの見え方も調節しなくてはなりません。iPhoneで見てみたところ、何とも読みにくい、見難い画面です。

まずＰＣバージョンではほぼ見やすくなったフォントサイズでしたが、モバイルバージョンでは文字が小さくて読みやすいとは言えません。これに加えて行間が詰まりすぎ。
さて、ＰＣバージョンはカスタムCSSの追加でスタイルの調整が出来ましたが、モバイルバージョンの調節はどうやったらいいのか？

いろいろ調べて見た結果、ようやく分かりました。全体（PCバージョン）のCSSを追加する場合、例えば投稿本文のスタイルの場合のセレクタは「.post-body」になります。ですからこのクラスのセレクタにスタイルを設定すれば投稿本文のスタイルを変える事が出来るわけです。例えば自分のこのブログの場合は以下のようになっています。

.post-body{
font-size:1.1em;
line-height:1.7;
text-align: justify;
}

　　　フォントサイズ：1.1em
　　　行間：1.7
　　　テキストアライン：均等（各行の右端が揃うように）

と、簡単なものです。
さて、モバイルの場合はどうすればいいか。
どうやらモバイルバージョンの場合は全てが「.mobile」で括られているようです。という事は上記のCSSのセレクタの部分の先頭に「.mobile」を付け加えるだけで済むことになります。
具体的には

.mobile .post-body{
font-size:1.2em;
line-height:1.7em;
text-align: justify;
}

となり、フォントサイズを大きくして、行間は変えていませんが、指定方法がemなのでフォントサイズが大きくなった分、結果的に行間も広がります。「.mobile」を頭に付け加える、たったこれだけの事でPCバージョンとMobileバージョンのスタイルを変える事が出来ました。

png画像の透明背景

blogger テーマのカスタマイズ画面

少し前に書いた ”png画像の透明背景”については旨くできたという事だけで、その手順については触れずに簡単に済ませてしまいましたが、そこをもう少し具体的に説明します。これは自分自身で辿り着いた訳ではなく、人様のサイトでたまたま見掛けたものです。
ただ、この方の説明とは少し違っていましたが、似たような所をコメントにして無効にしてみたところ、これで投稿の中の画像に付いていた白枠やドロップシャドウが消えてスッキリし、背景を透明にしたpng画像も背景が白くはならず、透明で表示されるようになりました。

<まず最初にhtmlのバックアップをとっておいて下さい。>

具体的には「blogger」から「テーマ」を選び使用中テーマの「HTMLの編集」を選択するとこのテーマのhtmlファイル？が表示されます。開いた時には9行目あたりで600行以上が纏められ閉じられているので、行番号の右にある▶をクリックして展開します。
このリストの430行あたりに下のような記述がありますからこの範囲をコメントにして無効にしてから保存すれば前述のような結果になるはずです。

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,.BlogList .item-thumbnail img {
  padding: 5px;
  background: #fff;
  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.post-body img, .post-body .tr-caption-container {
  padding: 8px;
}

ただ冒頭でも述べたように、テーマが変わればこのCSSも少し違うのかもしれません。環境が変われば同じような結果にならない事も考えられますので試してみるのは自己責任で！

png画像の背景

投稿記事の中の画像はスッキリさせたくてpng画像にして背景は透明にしても、いざ貼り付けると透明にはならずに白い背景になってしまいます。おまけにお節介なドロップシャドウ付きです。

これをなんとか透明背景で貼り付けたいと今までも色々とやってみたものの、これまではどうしても上手くいきませんでした。

cssを書き換えれば良いのはわかっても、あの膨大なリストの中から該当する部分を探し出すのは容易な事ではありません。それに間違った所を書き換えたら目も当てられません。

今日も何とか！とやっていたらネットで解決法を説明しているところがありました。

これを設定している数行をコメントにしてしまい、投稿画面を見てみたら、おーー、スッキリ。

ようやく出来ました。

この前の投稿写真もうまく消えています。
具体的な手順は ＜こちら＞