見やすいブログ ~ウェブリブログのサイドバーに写真・画像を表示~

いろいろなブログを拝見していると、「ブログのサイドに写真付きプロフィールを付けている人多いけど、ウェブリブログは出来ないのかな?」と思い、色々と試してみて今のようになりました。

最初に断っておきますが、私はCSSの勉強なんかした事ないので、セオリー無視でしています。
まぁ、素人のたわごとと思って、軽い気持ちで見てください(^-^)

ちなみに、今回作成方法を紹介しようと思っているのはこの画像の写真部分です。
画像


本来なら、「写真・画像を貼りつけて文字を回り込ませる」という事をするのが普通のようですが、これだとただの写真・画像の横に紹介文というようなものになり、おもしろくないので
■マウスオーバーで文字が出てくる
■写真クリックで違う写真が表示される
 という事を出来るようにしてあります。

アクセスの解析をすると、私のブログの場合サイドバーの上にある画像をクリックした人は誰もいませんし、誰も見ていないようですw

完全に自己満足ですw


この画像部分を作成するためには、他にも
■写真と文字部分を横並びにする
■文字の“気になる…”をクリックするとブログトップページが表示される
■文字列の任意の部分で改行する
 と言う事が必要ですが、それはまた後日に順を追ってブログに書いていこうと思います。
※2015/12/11 記事にしました→見やすいブログ ~テキストの改行・画像等を横並び~


さて、マウスオーバーで文字が表示されて、写真をクリックすると別枠で画像を表示させるのには、ウェブリブログの「画像貼付」の機能を流用しています。

--------------------
私は有償の『プレミアムオプション』に入り、以下の設定をしていますので、同じ設定をしていないとサイドバーにCSSを書いても、クリック時の動作が異なりますので、ご了承ください。

【画像ページ設定】→【設定画面へ】→【画像ページを表示しない(画像ファイル自体を表示する)」を選択
--------------------

ウェブリブログでサイドバーに写真・画像を貼りつける方法ですが“本文編集”画面の【画像貼付】ボタンで作成されたCSSを加工してコピーし、サイドバーに貼り付けるというのが簡単です。

ただし、通常の状態だと大きい画像がサイドバーに貼りつくので、写真の大きさのコントロールが必要です。
また、画像の上にマウスを置くと「画像を等倍で表示します」と出ますので、これを任意の文字にする必要があります。


ウェブリブログの機能を使い作成されたCSSのどこを変更すればいいのかを以下に説明していきます。


デフォルトのCSS:
--------------------
<div align="center"><a href=" 【①クリックしたときに表示される写真のURL】 " target="_blank"><img src=" 【②表示されている写真のURL】 " width="302" height="96" class="up-image" alt="画像" title="画像を等倍で表示します" /></a></div>
--------------------
※赤文字の数字はアップした写真のサイズに準拠しています
※デフォルトでは①②のURLは同じです
※本来、CSSの出だしにある<div align="center">は中心にくるのを表していますが、ウェブリブログのサイドバーではどうしても左によります
※ちなみに記事本文中であれば<div align="center">の"center"を"left""right"とすれば左・右によります


赤文字の数値を変更する事で写真の縮尺を変更できます。私のブログの場合は、正方形の写真を用意しwidth="65" height="65"としています。

こうする事により【②表示されている写真のURL】の写真がこのブログのサイズで表示されます。

また、【①クリックしたときに表示される写真のURL】に違う写真のURLを記載しておくとクリック時に違う写真が表示されます。


私が行った手順は、まずウェブリブログにログオンし、“設定” → “オプション” → “ファイルマネージャー”の『設定画面へ』クリックで表示されるファイルマネージャーの“画像置き場”を選択し写真をアップロードしました。

その後、アップロードした写真を開いて(“ファイル”欄の文字をクリックすればブラウザで写真が表示されます)、URLをコピーし(写真を開かなくても“ファイル”欄の文字を右クリックして、IEなら「ショートカットのコピー」・Google Chromeなら「リンクのアドレスをコピー」でコピー出来ます)、説明しているCSSの【①クリックしたときに表示される写真のURL】の位置にコピーしたURLを貼りつけました。


マウスオンで「画像を等倍で表示します」の文字を変更するのは青文字部分を変更する事で、任意の文字を表示させる事が出来ます。


ちなみに画像を表示させるだけなら以下のようになります。
--------------------
<img src="画像URL" alt="説明文等" style="border:none;width:65;height:65;">
--------------------


いかがでしょうか?これでまた一歩ウェブリブログのデフォルトから離れて、オリジナルなブログになった気がしませんか?


私は若い頃バイクに乗っていて、カスタマイズを自分でよくしていたんです(^-^)
そのせいか、こういった変更は大好きでして。

もうホント自己満足の世界なんですけどね。でも、この些細な事が大事だと思っています。


と言う事で、私のひとりごとに付き合っていただきありがとうございました。


ではでは。


関連記事:
見やすいブログ ~幅・フォント変更(ウェブリブログ)~
見やすいブログ ~広告も大事でしょ?~
見やすいブログ ~フォントの話~
見やすいブログ ~CSS フォント一括変更~

次の記事→見やすいブログ ~テキストの改行・画像等を横並び~



 ・ブログ 記事一覧
  ―こんな記事も読まれています―

この記事へのコメント

このブログへのお問い合わせ

ブログ名:
きになるてん
読者メッセージを送る
パンチが効いていれば人気ブログランキング