SNSボタン下のauthorアイコンについて

  • このトピックには12件の返信、2人の参加者があり、最後にみきにより9年、 5ヶ月前に更新されました。
12件の返信スレッドを表示中
  • 投稿者
    投稿
    • #52710
      hide
      ゲスト

      WordPress 4.7.3
      バージョン: 2.4.8b

      いつもsimplicity2を利用させていただいております。

      SNSボタン下のauthorアイコンを指定の画像に変更する方法をご教授いただきたいです。
      よろしくお願い致します。

    • #52713
      かうたっく
      ゲスト

      こんばんは!
      物凄く強引なやり方かもしれませんが。CSSで対処してみました。

      .post-author .fa-user {
        display:none;
      }
      .fn:before{
        content: "";
        background: url(画像のパス) no-repeat; 
        width: 16px;
        height:16px;
        background-size: contain;
        display:inline-block;
        padding-right: 2px;
      }

      .post-author .fa-userは、アイコンフォントを消す記載で、次の.fn:beforeで新たな画像を配置して16pxの大きさに画像を入れるスタイルです。

      もっと良い方法があるかもしれませんが

    • #52714
      アバター画像わいひら
      キーマスター

      分かりやすい方法で言えば、author-link.phpテンプレートの<?php echo $auther_icon_tag; ?>部分を「指定の画像タグ」に変更すればできるかと思います。

    • #52715
      かうたっく
      ゲスト

      4行目の

      content: "";

      こちらは
      content: “”;
      です。

    • #52718
      hide
      ゲスト

      ご返信ありがとうございます。

      >>かうたっくさん
      アイコンは消えたのですが、画像のパスを入れても画像が表示されませんでした。素人のため、原因はわかりません…。

      >>わいひらさん
      申し訳ございません。指定の画像タグに変更するやり方がわからないのですが、例えば「http://~~~ico2.jpg」という画像を挿入する場合、どのように変更するのかご教授いただきたいです。

      お手数おかけしますが、よろしくお願い致します。

    • #52723
      みき
      ゲスト

      指定の画像タグに変更するやり方がわからないのですが、例えば「http://~~~ico2.jpg」という画像を挿入する場合、どのように変更するのかご教授いただきたいです。

      わいひらさんではありませんが。。。
      <?php echo $auther_icon_tag; ?>をに変更すれば可能だと思います。
      ※検証はしていません。

      こんな感じ

      <span class="post-author vcard author"><?php echo $auther_icon_tag; ?><span class="fn"<?php is_single() ? '' : ''; ?>><?php
      if ( is_twitter_follow_id_author_visible() && get_twitter_follow_id() ): //TwitterID表示の場合 ?>
      <a href="https://twitter.com/<?php echo esc_html( get_twitter_follow_id() ); ?>" target="_blank" rel="nofollow">@<?php echo esc_html( get_twitter_follow_id() ); ?></a>
      <span class="post-author vcard author"><img src="" /><span class="fn"<?php is_single() ? '' : ''; ?>><?php
      if ( is_twitter_follow_id_author_visible() && get_twitter_follow_id() ): //TwitterID表示の場合 ?>
      <a href="https://twitter.com/<?php echo esc_html( get_twitter_follow_id() ); ?>" target="_blank" rel="nofollow">@<?php echo esc_html( get_twitter_follow_id() ); ?></a>
    • #52724
      みき
      ゲスト

      そのまま書いたので消えてしまった。。。

      <?php echo $auther_icon_tag; ?>を<img src="" />に変更すれば可能だと思います。

    • #52727
      かうたっく
      ゲスト

      なぜでしょうねぇ^^;
      わいひらさんおっしゃる、そのPHPファイルを編集する場合
      <img class="aligncenter" src="画像のパス" alt="" width="" height="" />

      といれて、CSSで追記するとかどうでしょうか?

      .post-author img {
        width: 16px;
        height: 16px;
        display: inline;
      }
    • #52730
      アバター画像わいひら
      キーマスター

      単に、画像を適切な大きさにリサイズして、画像タグで書くだけです。
      <img src="http://~~~ico2.jpg">
      。
      <IMG>-HTMLタグリファレンス
      画像タグの使い方は、「img html」」で検索すれば、その他にも出てくるので、調べて利用してみてください。

    • #52732
      アバター画像わいひら
      キーマスター

      あら、タブを開いたまましばらく何かした後に書いたら、みなさんも書かれていて、書き込みがかぶってしまいました;
      ありがとうございます。

    • #52737
      かうたっく
      ゲスト

      お疲れ様です^^

      CSS再チャレンジしました

      .post-author .fa {
        display: none;
      }
      .fn:before {
        content: "";
        background: url(画像のパス) no-repeat;
        padding-left: 20px;
        display: inline;
        background-size: auto 16px;
      }

      これで、画像のパスを貼り付ければ、問題ありません。・・・と思います。ちょっと気になったので^^;
      <img src="画像のパス">も良いですよね❦

    • #52756
      hide
      ゲスト

      わいひらさん、みきさん、かうたっくさん

      ご丁寧に解説してくださりありがとうございます。
      お三方にご教授いただいたおかげで無事解決できました!

      これからもsimplicity2を利用させていただきます。

    • #52757
      みき
      ゲスト

      解決できて良かったです!!

12件の返信スレッドを表示中
  • トピック「SNSボタン下のauthorアイコンについて」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)