はじめに
こんにちは！
本日はWordpressでブログの中にSNS（Twitter、Insta、LINE）などのアイコンが入っている
かっこいいプロフィールをつくりたい！
ということで、下記記事でネットに落ちているHTMLとCSSで
つくってみたのですが、、、、、それがこちら・・・！
ウィジェットのカスタムHTMLを使ってかっこいいプロフィールを作ってみた！
むむむむむ、、、、すこしずれていますね・・・
本当は背景画像とアイコン画像を重ねたり、SNS（ツイッター、インスタ、ライン）のアイコンの位置をきれいに真ん中に入れたい・・・！
ということで今回はアイコンがWordpressでずれてしまった場合の解決方法を紹介いたします！
プロフィール用にCSSを修正してみる！
では、さっそく上記の画像のプロフィールカードを理想の形に修正していきます！
二点修正を加えていきます！
1. 背景画像と、アイコン画像を重ねる
2. SNSのアイコンの位置が右下にずれているものを修正する
1. 背景画像とアイコン画像を重ねる！
左の画像から、右の画像のようにプロフィール写真の位置を修正してまいります！(ソースコードは最後に載せておきます）
プロフィールアイコン画像を上に移動させるには
.prof .icatchのmarginを-100px（画像サイズで調整ください）することで解決いたしました！
線に関しては今回は消して、重ねる形にしております！
こうするだけでもおしゃれなプロフィール画像になりましたね！
2.SNSのアイコンがずれているのを直す
次にSNSボタンで、それぞれのアイコンが右下にずれてしまっている現象を解決いたします！（ちなみにLion blog ライオンブログを利用しております）
このように右下にずれてしまっているFontawesomeのアイコンの位置を修正いたします！
真ん中になおってよかったです・・・
メインはアイコンの縦と横の位置を修正していく必要があります！
アイコンサイズによって変わりますので、カスタムCSSで確認しながら中央に修正をお願いします！
縦の位置：line-heightで編集
横の位置：transform:translate(-25%)で編集
上記できれいに真ん中へずれを修正することができました！
おしゃれなプロフィールのソースコード
HTMLとCSSののソースコードをいれておきます！
参考は下記のすばらしいプロフィール作成の紹介をしている記事になります！
■HTMLソースはこちらになります。それぞれ背景画像、プロフィール画像、リンク先は調整ください。
|
1 |
<div class="box prof"> <p class="icatch"><img src="背景画像URL" alt="背景画像"></p> <p class="circle_icon"> <img src="プロフィール画像リンク" alt="プロフィール画像"> </p> <p class="name">お名前</p> <p class="txt" align="center"> 自己紹介文 </p> <!-- ▼SNSボタン（不要なSNSは消してください）▼ --> <ul class="icon"> <li class="twitter"><a href="ツイッターのリンク先" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="insta"><a href="インスタのリンク先" target="_blank"><i class="fab fa-instagram"></i></a></li> <li class="of_site"><a href="お好きなリンク" target="_blank"><i class="fas fa-desktop"></i></a></li> </ul> <!-- ▼ボタン▼ --> <p class="irai_btn"><a href="お好きなリンク" target="_blank">お好きなテキスト</a></p> </div> |
■CSSは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
.prof .icatch{ margin:0 auto -100px auto; } .prof .circle_icon{ width:150px; height:150px; border-radius:50%; overflow: hidden; /*border:3px solid #FF0000;*/ margin:-50px auto -30px auto; } .prof .name{ padding:0 15px; text-align: center; font-size: 30px; font-weight:900; color:#249bd5; margin:0px 0; } .prof .icon{ margin:14px 0 0 0; text-align: center; padding:0 15px; } .prof .icon li{ display: inline-block; margin:0 2px; width:60px; height:60px; border-radius:100%; font-size:28px; background-color: #6cc655; line-height:1.7; } .prof .icon li a{ display: block; color:#fff; transform:translate(-25%); } .prof .icon li.facebook{ background:#3b5998; } .prof .icon li.twitter{ background:#55acee; } .prof .icon li.of_site{ background: #f0ad4e; } .prof .icon li.insta{ background-image: linear-gradient(-135deg,#1400c8,#b900b4,#f50000); } .prof .irai_btn{ margin:-10px auto 0 auto; } .prof .irai_btn a{ display: block; width: 270px; height: 55px; line-height: 50px; color: #FFF; text-decoration: none; text-align: center; background-color: #4ba9d4; border-bottom: solid 5px #2c86af; border-radius: 5px; margin: 0 auto; } .prof .irai_btn a:active{ margin-top: 6px; border-bottom: none; -webkit-transform: translateY(6px); transform: translateY(6px); } .prof .irai_btn a:hover { background-color: #f9c500;/*ボタン色*/ border-bottom: solid 6px #f39800; /*下線色*/ } |
またブログ執筆をしている方でもHTML、CSS、Javascriptの基礎的な知識はもっていただくことをおすすめしております。下記記事で詳しく紹介しておりますので、気になる方は御覧ください！
人生が変わるかも？本気でプログラミング教室に関して解説しております。
知ってる人はやっている・・・・・
ネットショッピングでポイントを+1%貰う方法はこちらを登録するだけ！
