<--!リンク--> 〇ブログお役立ち|(No.1582.1508.1507.1506.1474)| あんなこと、そんなこと、どうでもいいこと・・・

あんなこと、そんなこと、どうでもいいこと・・・

;気まぐれに書いてます^^
あんなこと、そんなこと、どうでもいいこと・・・ TOP  >  〇ブログお役立ち

ブログ記事内に設置する横並びの画像リンクを作る方法

ブログ記事内に設置する横並びの画像リンクを作る方法

先日、ご紹介したブログ記事内に複数の画像を横一列に並べる方法を応用して、ブログ記事内に設置できる横並びの画像リンクを作ってみました。

自分のパソコン(Windows7)にもともと入っているオマケのペイントソフトで、三枚の画像の縦横比を揃えて(この場合は正方形にしてみました)、ついでに画像に文字を入れて、その画像を使って画像リンクにしてみました。(デザインのセンスは無視して下さい・・汗)。




タグコードは、こちらになります。

<div align="center"><a href="移動先のURL①"title="カーソルを乗せた時の説明文①" target="_blank"><img width="130" src="画像URL①"></a><a href="移動先のURL②"title="カーソルを乗せた時の説明文②" target="_blank"><img width="130" src="画像URL②"></a><a href="移動先のURL③"title="カーソルを乗せた時の説明文③" target="_blank"><img width="130" src="画像URL③"></a></div>


赤字の数字を足したものが(この場合は390)が、ご自身のブログの記事の幅より大きいと2段になってしまいますので、ご注意ください(記事の幅より少なめが無難だと思います)。

あと、三種類の画像の大きさが、それぞれ違っても、縦と横の比率が同じであれば、同じ大きさで表示されます。

緑字title="カーソルを乗せた時の説明文①"は不要であれば削除して下さい。


以上、ブログ記事内に設置する横並びの画像リンクを作る方法をご紹介してみました。

 
お店ブログをやってる方とかは、お店までのアクセスとか、お客様の声、イベント情報などのページへのリンクに、このようなものを記事ごとに設置するのも、"あり"かな~なんて思います。

で、これは、こちらの無料のボタン作成サイト⇒ボタン素材 自動生成サイト - ButtonMakerアフラット で作った画像にリンクを貼ったものです。


※これも、デザインセンスは無視して下さい(汗)。

お気に入りの物を何種類か作っておいて、お使いのパソコンのメモ帳か、あるいはアメブロの下書き機能を利用して保存しておけば便利かなーなんて思います。

なにかの、参考になれば、うれしいのですが・・
スポンサーサイト
[ 2014年01月21日 13:03 ] カテゴリ:〇ブログお役立ち | TB(0) | CM(0)

ブログ記事にマーカーを引く方法

マーカーを引きたい文章を以下のタグで囲います。

<font color="#000000" style="BACKGROUND-COLOR: #ffff00; FONT-SIZE: 15px">あなたなしでは、生きていけない!</font>


このように表示されます。
        
あなたなしでは、生きていけない!

赤字の箇所がマーカーを引いた時の文字の色です。

青字の箇所がマーカーの色です。

緑字の箇所がマーカーを引いた時の文字の大きさです。(数字を多く、大きくすると文字が大きくなります)


文字の色を、赤、マーカーの色をグレーにして、文字サイズを大きくしてみます。

<font color="#ff0000" style="BACKGROUND-COLOR: #cccccc; FONT-SIZE: 20px">あなたなしでは、生きていけない!</font>


このように表示されます。
        
あなたなしでは、生きていけない!


お好みで文字の色、大きさ、マーカーの色を調整してみて下さい。

※参考までに⇒HTML,CSS カラーコード一覧表 | 背景色や文字色の設定


参考になると、よろしいのですが・・( °◡°)


※自分の色のセンスは無視して下さいませ。     m(_ _ )m
[ 2013年11月14日 02:49 ] カテゴリ:〇ブログお役立ち | TB(0) | CM(0)

各種アンダーライン

そんなの知ってるよーって方も多いかと思います。

どうぞ、そういう方はスルーしちゃって下さいませ。  ペコリ  m(_ _ )m


記事の中の強調したい箇所にアンダーライン各種を引く方法です。

アメブロさんに元々備わっているボタンでアンダーラインを引くと、こうなります。

         

ここテストに出ます。

あまり目立たないと思います。

こちらは如何でしょう。
         
ここテストに出ます。


さらに、強調してみます。
         
ここ絶対テストに出ます。


色と太さを変えてみます。
         
テストには出ないけど、憶えておいた方がいいですよ。


で、方法ですが、下のタグ(山括弧→<  >で囲まれた、半角英数文字、記号)の中の線の種類、太さ、色の箇所をそれぞれ指定してやります。


<font style="border-bottom:3px double #ff0000;">ここ絶対テストに出ます。</font>


赤色の数字が線の太さになります。多く(大きく)なると太くなります。

青字の箇所が線の種類になります。
主な線の種類です。

実線⇒ solid

点線 ⇒ dotted

破線 ⇒ dashed

二重線 ⇒ double


緑の箇所が線の色になります。
主な色です。

赤⇒ff0000

青⇒0000ff

緑⇒006600

他にも色は、色々あると思います(笑)。

検索で「カラーコード」と入れて調べると、カラーコードのサイトがたくさんあります。

自分が気に入っているいるのは、こちらのサイト様です。よかったら参考にして下さい。

⇒HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

あと、二重線(double)の場合、線の太さを3より小さくすると、一重線?(シングル)になっちゃいますので、注意して下さい。


お使いのパソコンのメモ帳にでも何種類か作って保存しておくと、便利かなーなんて思います。


参考になると、うれしいのですが・・( °◡°)
[ 2013年11月13日 02:27 ] カテゴリ:〇ブログお役立ち | TB(0) | CM(0)

リンクを貼る時にとても便利なブックマークレット

自分、以前ブログにリンクを貼る時は、そのページのURLをメモ帳に一旦コピーしてから、アメブロさんや、その他のブログサービスのリンクボタンを使ってリンクを貼ってました。

でも、このブックマークレットを使うと表示させたい文章を書く手間が省けます。

で、今はリンクを貼る時は、こればっかり使ってます。

ご紹介してみたいと思います。


⇒URLコピー用ブックマークレット: Blog - 19XX

上↑のリンクをクリックして頂くと、少し下の方に次のような箇所があります。

bandicam 2013-11-12 02-24-23-515

で、矢印の箇所Copy htmlをお使いのブラウザの「お気に入り」あるいはブックマークに登録しておくと、リンクを貼りたいページを開いた時に、この登録してあるCopy htmlをクリックすると、次のような小窓が開きます。

bandicam 2013-11-12 03-29-57-122


で、矢印の箇所をコピーしてOKをクリックします(OKをクリックしないと次へ進めないです←自分がよくやるミスです^^;)


で、再度このサイト様のリンクです。

⇒URLコピー用ブックマークレット: Blog - 19XX

最初、要領を呑み込むのに少し手間がかかるかもしれませんが、憶えちゃうと、とても便利です。


参考になると、うれしいのですが・・(o^3^o)



[ 2013年11月12日 02:52 ] カテゴリ:〇ブログお役立ち | TB(0) | CM(0)

文字、文章(テキスト)を流すには・・

文字、文章(テキスト)を流すタグ(半角英数文字列)をご紹介してみたいと思います。

「ブログを書く」でHTML表示にして(タグ編集エデイタを設定されている方は、そのままで)、流したいテキストを以下のタグで囲んで下さい。

①右から左へ流す場合です。

<Marquee>右から左</Marquee>


右から左


②流す幅を指定します。
赤字の数字で調整して下さい(多くなると長くなります)。

<Marquee width="200">横幅を決めた</Marquee>


横幅を決めた


③右へ流す場合です。

<Marquee direction="right">右へ進む</Marquee>


右へ進む


④左右に流す場合です。

<Marquee behavior="alternate">左右へ動く</Marquee>


左右へ動く


⑤流すテキストに背景色を着ける場合です。
赤字の箇所に、お好みのカラーコードを記入して下さい。

<Marquee Bgcolor="#ccffff">背景色付き</Marquee>


背景色付き


※参考までに⇒HTML,CSS カラーコード一覧表 | 背景色や文字色の設定




参考になれば、うれしいのですが・・(;^_^A
[ 2013年10月26日 02:43 ] カテゴリ:〇ブログお役立ち | TB(0) | CM(0)
プロフィール

awantan

Author:awantan
なんだか良く解りませんが、
ポチポチ頑張ります。;^^

メインは、こちらの方です。

ワンタンのアメブロ

検索フォーム
ブロとも申請フォーム
QRコード
QR