『Seesaa』ブログで記事タイトルの右上に画像を表示させてみた

【カテゴリ：パソコン　ブログカスタマイズの記録】

このブログで、記事のタイトルの右上に星型の画像を表示させるようにしたので、その覚え書きです。


↑表示している箇所をキャプチャした画像

きっかけは『CSS』のマージン（margin）指定において、マイナスの値が指定できるというのが分かったからでした。

これを応用すれば、画像を色々な場所に直接表示させることが可能です。

せっかくなので、このブログに利用してみようと思い、色々と考えた結果、記事のタイトル部分の右上に画像を表示させてみることにしました。

画像はフリーの素材を検索したところ以下のサイトが見つかったので、その中にあった『星型丸ボタン』という素材画像を利用することにしました。

初期制作費０円〜沖縄発！ネットショップ構築サービス「EC-STADIUM」のBLOG:
http://ecstadium.ti-da.net/c126258.html

ただ、元の金色の画像は『JPEG』形式だったので、少々加工しました。

スポンサーリンク

具体的には『GIMP 2.8』というフリーの画像ソフトを使って透明度のある透過画像に変換し、『PNG』形式にエクスポートしました。

ファイル名は『star_gold.png』として保存しました。

しかし今ひとつ何か物足りない気がするので、今後は更に文字を加えるなどの加工、もしくは画像自体別のものに差し替えるかもしれません。

．．．

以下は、今回、記事タイトルの右上に画像を表示させるようにした際の手順です。

(1) 『ブログの管理メニュー』⇒『ファイルマネージャー』で、画像ファイルをアップロードします。



アップロードしたファイルの URL は『https://kingpcax.up.seesaa.net/image/star_gold.png』となりました。

(2)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『コンテンツ』をクリックします。



(3) 『記事』のコンテンツをクリックします。



↓以下のような画面が表示されます。


(4) 右上の『コンテンツHTML編集』をクリックします。



↓以下のような編集画面が表示されます。


(5) ソースコードを変更します。

以下は変更前のソースコードです。（変更箇所のみの抜粋）

<div class="blogbody">
<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>

以下は変更後のソースコードです。（変更箇所のみの抜粋）

<div class="blogbody">

<IMG SRC=https://kingpcfx.up.seesaa.net/image/star_gold.png width=80 height=80 ALT=star_gold border=0 style="position: absolute; margin:-45px 0px 0px 515px">

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>

【変更内容について】
・変更箇所ですが、赤字の行を『<div class="blogbody">』と『<h3 class="title">』の間に追加しています。

・元の画像のサイズは、97 × 97 ピクセルでしたが、『width=80 height=80』として 80 × 80 ピクセルで表示するように調整しました。

・『margin:-45px 0px 0px 515px』の箇所ですが、これは、タイトルの左上を基点にして上に 45 ピクセル、左から 515 ピクセルの位置です。
この値を調整し、変更する事で表示位置をずらすことができます。

(6) 『保存』ボタンをクリックして保存します。




↑『編集を完了しました。』と表示されます。

(7)『記事のHTML編集』画面を閉じ、更に『保存』ボタンをクリックします。（この『保存』は行わなくても反映されますが、念のためです。）




↑『設定を変更しました。』と表示されます。

以上です。

【追記】2012-09-30 02:20　左上に画像の表示を追加

記事タイトルの左上にも画像の表示を追加しました。



この状態でのソースコードの内容は以下です。

<div class="blogbody">

<IMG SRC=https://kingpcfx.up.seesaa.net/image/star_gold.png width=50 height=50 ALT=star_gold border=0 style="position: absolute; margin:-15px 0px 0px -20px">

<IMG SRC=https://kingpcfx.up.seesaa.net/image/star_gold.png width=80 height=80 ALT=star_gold border=0 style="position: absolute; margin:-45px 0px 0px 515px">

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>

【追記】2012-10-01 17:30　画像を変更

星型の画像を『セロテープ』の画像に変更しました。



『セロテープ』の画像は以下のサイトから落とし、回転の加工を加えました。

カラーテープ・マスキングテープ素材::フリー素材*ヒバナ *　 *:
http://hibana.rgr.jp/sozai-icon-tape.shtml

※画像を利用するにあたり、リンクの表示が条件となっていたため、サイドバーの『リンク集』にリンクを追加しました。

この状態でのソースコードの内容は以下です。

<div class="blogbody">

<IMG SRC=https://kingpcfx.up.seesaa.net/image/Cellotape_1_30.png ALT=Cellotape border=0 style="position: absolute; margin:-50px 0px 0px -50px">
<IMG SRC=https://kingpcfx.up.seesaa.net/image/Cellotape_1_315.png ALT=Cellotape border=0 style="position: absolute; margin:-45px 0px 0px 420px">

<h3 class="title"><a href="<% article.page_url %>" class="title"><% article.subject %></a></h3>
<% if:page_name eq 'article' -%>

スポンサーリンク