【はてなブログ】記事下関連カスタマイズしました！
皆さん、こんにちは(*´ω`*)
どうも、かりんです(`･ω･´)ゞﾋﾞｼｯ
今回は、記事下関連をカスタマイズしました(`･ω･´)
完成図
こちらが、完成図のスクショです♪
この記事を書いた人を追加
記事を書いた人を個別記事の一番下に記載しています(*´ω`*)
二人で運営しているので、デザインの記事下に固定してしまうと個別に変更できないので･･･( ´･ω･)
毎回定型文を挿入しなければいけない手間がありますが(;^_^A
でも、これでどちらが書いているのかわかりやすいのでいいかと思います！
一人で運営されてる方は、記事下に挿入しても大丈夫かと思います(*´ω`*)
PCでの表示
スマホでの表示
この記事を書いた人 HTML
この記事を書いた人 HTML
<div class="profile">
<div class="profile-title">この記事を書いた人</div>
<img class="profile-img" src="プロフィール画像のURL" /> <a href="https://はてなぶろぐURL/about">名前(id:はてなID)</a>
<p>自己紹介</p>
<p>Twitterなどのシェアボタン
</p>
</div>
この記事を書いた人 CSS
この記事を書いた人 CSS
/* この記事を書いた人ボックス */
.profile {
position: relative;
margin: 10px 0;
padding: 5px 10px;
background: #FFF;
border: solid 2px #000;
}
.profile p {
margin: 0 0 5px 0; padding: 0;
}
.profile a {
margin: 0 0 5px 0;
padding: 0;
font-weight: bold; color: #e8554e;
}
.profile .profile-title {
position: absolute;
display: inline-block;
top: -27px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 15px;
background: #000;
color: #ffffff;
font-weight: normal;
}
.profile-img {
float:left;
margin: 10px 10px 5px 0;
width:90px;
height:90px;
}
カスタマイズ次第ではいろいろと出来そうですね(*´∀`*)
とりあえず、シンプルな感じです♪
この記事が気に入ったらフォローを追加
参考にさせて頂いたブログ&記事はこちらです
PCでの表示
スマホでの表示
アイキャッチ画像とフォローボタンがあり、とても素敵なデザインです♪
とても参考になりました！ありがとうございます┏○))ﾍﾟｺ
関連記事の位置を変更
関連記事を記事下に移動させました(*´∀`*)
やり方はこちらのブログ＆記事を参考にさせて頂きました！
まとめ
見た目もだいぶよくなったと思っています(*´ω`*)
カスタマイズをいろいろして、いつ完成するのかまだわかりません(笑)
とりあえず、満足するまで？？かな？？(笑)
それではまた！
