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

前回の記事、見やすいブログ ~ウェブリブログのサイドバーに写真・画像を表示~の続きです。

今回は下のサンプルの写真横のテキスト類作成方法と、写真とテキスト類を横並びにする方法です。

横並びにする方法を流用すれば、複数枚の写真を横並びにする事も出来ます。

サンプル:
画像


文字にURLを埋め込む:
--------------------
<a href="トップページのURL">気になる…</a>
--------------------
赤文字にブログトップページのURL(あくまで私のブログをサンプルにしているのでトップページのURLですが、任意のURLを入れてください)、青文字に表示させたい文字を入れてください。
これで文字にURLが埋め込まれます。


文字を任意の位置で改行:
私は
--------------------
<p> 文字 </p>ここで改行される
--------------------
のやり方が簡単と思いしています。

サンプルの内容ならば
--------------------
<p></p>
<p>彼は日夜世界平和を考えています</p>
<p>…私もいっしょに</p>
--------------------
となっています。

他にも“範囲を指定して何文字で改行する”という方法もありますが、3行程度であればこっちの方が簡単と思います。

ちなみにサンプルのように「気になる…」のうしろでも改行させたいので、先述のスタイルシートは<p><a href="トップページのURL">気になる…</a><p>としています。


横並び:
横並びのスタイルシートは
--------------------
<table>
<tr>
<td>左側に表示させたいスタイルシート</td>
<td>右側に表示させたいスタイルシート</td>
</tr>
</table>
--------------------
と、なります。

サンプルをもとに考えると

左側に表示させたいスタイルシート:
前回の記事、見やすいブログ ~ウェブリブログのサイドバーに写真・画像を表示~の要領で作成したスタイルシート

右側に表示させたいスタイルシート:
今回の記事で紹介している“文字にURLを埋め込む” と “文字を任意の位置で改行”の要領で作成したスタイルシート

を入れて、フリースペースのサイドバーに出来たスタイルシートを貼りつければ、サンプルと同じような横並びの写真+テキストがサイドバーに表示されます。


と言う事で、今回はウェブリブログのサイドバーに横並びの写真+テキストを表示させる話でしたが、前回と今回の記事はブログ記事を書くにあたっても応用がきくと思います。


特にウェブリブログを使用している方のお役に立てばと思い記事にしてみました。


ではでは。


関連記事:
見やすいブログ ~幅・フォント変更(ウェブリブログ)~
見やすいブログ ~広告も大事でしょ?~
見やすいブログ ~フォントの話~
見やすいブログ ~スタイルシート フォント一括変更~
見やすいブログ ~ウェブリブログのサイドバーに写真・画像を表示~

"見やすいブログ ~テキストの改行・画像等を横並び~" へのコメントを書く

コメントありがとうございます。

返答が必要なコメントのみ、ニックネーム“ブログ主”でコメントさせていただきます。

人気ブログランキング参加中よろしければ気が済むまで投票して下さい。

お名前:
メールアドレス:
ホームページアドレス:
コメント:

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

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