注目タグ

テンプレート・プラグイン

トピック詳細

simple_white ブログタイトル横の丸い画像

simple_white ブログタイトル横の丸い画像

プロフィール画像と違うものにしたいときはどうしたらいいのでしょうか?
また、画像の枠内に画像が収まらず、なんともおかしな状態になってしまいます。直す方法はありますか?

あるいは、こちらの丸い画像を消す方法ってありますか?

http://maroyan0214.blog.fc2.com/

2015年04月09日 21:07  by マロン&ブレア

コメント一覧 2件中、1~2件表示

  • アレコレ試した末
    HTMLを
    <!--myimage--><!--プロフィールイメージ-->
    <div class="plofili_img">
    <a href="<%url>">
    <div class="plofili_img_mask" style="back ground: url(<%image>) no-repeat center center;backgrou nd-size: 130px auto;">
    に書き換えて

    スタイルシートを
    .plofili_img_mask img {
    max-width: 130px;
    float: left;
    position: absolute;
    }
    に書き換えたらなんとか収まりそうです。

    質問者さんのプロフィール画像を借りてきて
    自分のブログで実験しただけなので、ゼッタイ確実とは言えませんが
    良ければ試してみてください。

    2015年04月15日 14:22 by 標野ゆき

  • 修正するのはともかく
    この画像を消す方法はそんなに難しくないです。
    テンプレートのHTMLから以下の部分を削除しちゃえば表示されなくなります。

    <a href="<%url>">
    <div class="plofili_img_mask" style="back ground: url(<%image>) no-repeat center center ;background-size: 200px auto;"></div>
    </a>

    HTMLのかなり前のほうにあるので、見つけやすいとは思いますが
    わかりにくいときはCtrl+Fでページ内検索をかけてみてください。


    この部分の表示方法を指定しているのはスタイルシートの以下の記述です。
    .plofili_img {
    width: 220px;
    text-align: center;
    float: left;
    margin: 0 48px 0 0;
    border-bottom: 1px solid #dadada;
    }

    .plofili_img_mask {
    width: 110px;
    height: 110px;
    border-radius: 55px;
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    position: relative;
    z-index: 1;
    }

    .plofili_img_mask img {
    max-width: 200px;
    float: left;
    position: absolute;
    }

    そこまでは自分にもわかるのですが
    見よう見まねでいじったくらいではイイカンジになりませんでした^^;

    HTMLのタグを抜き出している中で太字にしている個所が
    プロフィール画像を表す変数なので、これをほかの画像アドレスに書き換えれば
    画像だけは変更できますが、表示したい部分を丸枠の中に収めるのはかなり困難というのが正直な感想です^^;

    2015年04月10日 23:25 by 標野ゆき