ガジェットに丸画像フォト、プロフィールをかわいらしく表示するソース。

ガジェットのプロフィール画像に丸フォトを掲載する...
ま、四角でもよいのでしょうが、何かしらの演出的な効果をイメージする手立として
使う例も多く見られます。

で、私も別なブログに掲載してるので備忘録意味合いでソースを書き込んでおきますね

前置きですが、このソースは当テンプレート以外..soratemplatesのガジェットに
標準で入れ込んであったソースで、他ＴＰでも反応は確認しております

http://www.soratemplates.com/



ガジェット内で反応..記事内ではＨＴＭＬ記載で反応
作成ページに張り付けては、無視されます

Munere veritus fierent cu sed, congue altera mea te, ex clita eripuit evertitur duo. Legendos tractatos honestatis ad mel. Legendos tractatos honestatis ad mel. , click here →


画像は、２００ＰＸほどで事前に用意してください

大きすぎると丸ではなく、枠が欠ける...




ソースを確認

<div class="about-widget-wrap"><div class="about-widget-image">

<center>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAgYfiPRKPho2kXGPss0-qRg6kPvgZ8H_ECGTgGm1_8StW26iMCg_Pqk9WMr9o1Kr7gXO9mt0qEqaJS6J7xl3SzlJWsn4YAqnEpyC9kwAklivZl0JKtb5p8QnFSsIJbqS55U2BDqm8QzJ/s1600/asdf.JPG" alt="About Me"original="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAgYfiPRKPho2kXGPss0-qRg6kPvgZ8H_ECGTgGm1_8StW26iMCg_Pqk9WMr9o1Kr7gXO9mt0qEqaJS6J7xl3SzlJWsn4YAqnEpyC9kwAklivZl0JKtb5p8QnFSsIJbqS55U2BDqm8QzJ/s1600/asdf.JPG" style="

        border-radius: 100%;

    border-image-source: initial;

    border-image-slice: initial;

    border-image-width: initial;

    border-image-outset: initial;

    border-image-repeat: initial;

    border-width: 1px;

    border-style: solid;

    border-color: rgb(235, 235, 235);

    margin:0;

    padding: 5px;

/" /></center>

</div>

<div style="text-align: justify">Munere veritus fierent cu sed, congue altera mea te, ex clita eripuit evertitur duo. Legendos tractatos honestatis ad mel. Legendos tractatos honestatis ad mel.

, <a href="#" style="

    text-decoration: underline;

">click here →</a></div>

<style>

.about-widget-image {

    max-height: 260px;

overflow:hidden;

margin-bottom: 15px;

}

</style>

</div>

画像コードを書き換えれば反応...

画像コードの取り出しは、...

一度作成画面で画像を表示させる

サイズを指定後、マウス操作で画像のアドレスをコピーして張り替えてください