アメブロ フッター下のいいね！した人にアイコンをつける方法

フッター下の「いいね！した人」にアイコンを付ける方法

※CSS編集用デザインを採用されている方向けです。

「ブログを書く」で絵文字のボタンをクリックして、試しに「グッド！マーク」⇒を、アイコンとして文字の左側に表示することにしてみました。

「デザインの変更」⇒「CSSの編集」で、以下のコードをご自身のアメブロの「現在使用中のブログデザインCSS」の末尾に追記してみて下さい。

/* 「いいね！した人」にアイコンを表示 */
.articleLinkArea .iineEntryCnt{
padding-left: 17px;
background-position: 0px 0px;
background-repeat: no-repeat;
background-image: url(http://stat.ameba.jp/blog/ucs/img/char/char2/187.gif);
}

赤字部分が、アイコンとして表示する画像のURLですので、お好みで他の画像に変更してみて下さい。

（※フッターとはページ、記事の一番下にあたるコンテンツ部分の事です。）


☆ブィブィ　ゞ（＾_＾）v

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

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

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

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

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

<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>

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

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

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


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

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

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

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

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

なにかの、参考になれば、うれしいのですが・・

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

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

<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

各種アンダーライン

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

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


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

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

         ⇓

ここテストに出ます。

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

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


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


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


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

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

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

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

実線⇒ solid

点線 ⇒ dotted

破線 ⇒ dashed

二重線 ⇒ double


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

赤⇒ff0000

青⇒0000ff

緑⇒006600

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

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

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

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

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


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


参考になると、うれしいのですが・・（ °◡°)

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

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

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

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

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


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

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

---

---

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

---

---

で、矢印の箇所をコピーしてＯＫをクリックします（ＯＫをクリックしないと次へ進めないです←自分がよくやるミスです＾＾；）

自分みたいな機械音痴でも設置する事が出来ました。

自分の拙い説明より、こちらのサイト様の説明を読まれたほうが解りやすいかもです　（汗）。


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

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

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


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