気になる…(きになるてん)

アクセスカウンタ

プロフィール・プライバシーポリシー

ほど良い情報をお届けしたいブログ

きになる…(きになるてん)

ブログテーマ | PC | グルメ | おすすめ | ひとりごと | ThinkPad | BABYMETAL | アニメ・マンガ |

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

<<   作成日時 : 2015/12/11 20:57   >>

トラックバック 0 / コメント 0

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

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

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

サンプル:
画像


文字に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を埋め込む” と “文字を任意の位置で改行”の要領で作成したスタイルシート

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


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


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


ではでは。


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

広告
広告

テーマ

関連テーマ 一覧

• サイト内検索

ブログ 記事一覧

  ―こんな記事も読まれています―

パンチが効いていれば人気ブログランキング


月別リンク

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文

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

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

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

画像

ブログ “ 気になる… ” は

ほど良い情報をお届けしたい

見た目は子犬!頭脳はおっさん!

なブログ です(´・ω・)

広告


 • サイト内検索

ブログ 新着記事

 ―NEW!―
記事がお気に召せば
(^ω^`)ブログをご覧いただきありがとうございます
ブログ主:Takasui

見やすいブログ 〜テキストの改行・画像等を横並び〜 気になる…(きになるてん)/BIGLOBEウェブリブログ
文字サイズ:       閉じる