ファンアートをいただきました!&プロフィールのカスタマイズ方法

スポンサーリンク

スポンサーリンク

スポンサーリンク

またまた、私のブログのオリキャラを描いてくださった慈悲深い方いらっしゃいました!

 

これで4人の方に描いていただきました!

感謝の極みです!

ありがたや~ありがたや~

 

 バーチャルブロガーのぼーる丸さんが描いてくださりました!

 私のブログの読者様でもあり、私も読者であり、バーチャルブロガーでもある、ぼーる丸 (id:ballmaru) さんが描いてくださりました!

www.ballmaru.com

 

制服姿の風子、ユキに加えてシャルまでも!

至極、最強に最高に可愛いですね!

 

 

ぼーる丸さんのブログでは、絵の上手くなる方法や、自作漫画を公開していて

最近はお絵かき講座パルミーの無料講座を全受講するまでの時間を競う「カリキュラムRTA(リアルタイムアタック)」を開催しているようです!

皆さん、参加してみてはいかがでしょうか?

www.ballmaru.com

 

描かねばいけないイラスト&描きたいラストが溜まっているのと、サブブログの記事作成とやらねばいけないことが多いので参加を諦めました(⇐おい)

 

私たちのイラストを描いてくださり

 

本当にありがとうございました!!

 

べ、別にファンアートなんて貰ったって別に嬉しくなんてないんだからね!

 

でも、私まで描いてくれたことには感謝するわ!////

 

本当は嬉しいくせに!天邪鬼なんだから~!

 

べ、別に嬉しくなんてないわよ!////

 

制服姿のシャルちゃん可愛いですね!

 

ペロペロしていいですか?

 

いいわけないでしょ!

 

さり気なくとんでもないこと言ってんじゃないわよ!あんた!

 

すりすり

 

さーわーるーなー!!

 

プロフィールカスタマイズ

ちょっと、そこのダメガネ!

 

ダメガネとは聞き捨てならないわね!

 

それでなんだね?シャルよ

 

f:id:UrushiUshiru:20180421011219j:plain

私のブログのプロフィールがあんたの画像になってんだけどどういうことなの?

 

デフォルトの設定でこうなってるんですな

 

仕方ないね

 

仕方なくないわよ!どうにかしなさいよ!!

 

どうにかってどういうことなの?

 

プロフィールを私の画像に直しなさいってことよ!!

 

 PC版のプロフィールカスタマイズ

f:id:UrushiUshiru:20180420213317j:plain

目標はこのようなサイドバーのプロフィールにします。

 

<center><div class="shadow"><img src="画像のURL" width="280" height="280"></div></center>
<p><strong><a href="https://charlottehibi.hatenadiary.jp/entry/about">シャル(シャルロッテ)</a></strong></p>
<p>このブログの主人公の金髪碧眼美少女。</p>
<p>天邪鬼な性格で人前な中々素直になれないという典型的なツンデレキャラ。</p>

<!--フォローボタン-->
<div class="follow-btn" >
<span style="font-size:80%">フォローする</span><br>
<a class="hatena" href="https://blog.hatena.ne.jp/UrushiUshiru/charlottehibi.hatenadiary.jp/subscribe" target="_blank"><i class="blogicon-hatenablog lg"></i>         <span class="text-small">はてな</span></a>
<a class="twitter" href="https://twitter.com/intent/follow?screen_name=UrushiUshiru" target="_blank"><i class="blogicon-twitter lg"></i>         <span class="text-small">Twitter</span></a>
<a class="feedly" href="http://feedly.com/i/subscription/feed/https://charlottehibi.hatenadiary.jp/feed" target="_blank"><i class="blogicon-rss lg"></i>         <span class="text-small">Feedly</span></a>
</div>

 上記のコードを使用します。

 

2,3行目の「<p>~</p>」で囲われた部分は本文ですので、プロフィールに描きたいことを書きましょう。

「<p>~</p>」は増やしても減らしても構いません。

 

9~11行目を以下のように修正します。

  •  9行目の「UrushiUshiru/charlottehibi.hatenadiary.jp」を、「(自分のはてなID)/(自分のブログのURLの「http://」を除いた部分)」に変更
  • 10行目の「UrushiUshiru」を「自分のTwitterアカウントの@を抜いた部分」に変更
  • 11行目の「https://charlottehibi.hatenadiary.jp」を「自分のブログのURL」に変更

 

以下のサイトの「サイドバーに入れる」の箇所のCSSコードをそのままコピーします。

上記のフォローボタンのコードも以下のサイトを参考にしてます。

www.yukihy.com

 

 

f:id:UrushiUshiru:20180416005536j:plain

④ はてなブログの管理画面にアクセスして、「デザイン」⇒「①スパナマーク」⇒「②デザインCSS」に上記のコードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

 

f:id:UrushiUshiru:20180420215736j:plain

次に「スパナマーク」⇒「サイドバー」⇒「+モジュール追加」をクリックします。

 

 

f:id:UrushiUshiru:20180420215553j:plain

⑥ 「ブログの説明」の枠に先程の修正したHTMLコードを貼り付け、「適用」をクリックします。

※元からある「プロフィール」は削除してください。

 

f:id:UrushiUshiru:20180420221132j:plain

⑦「変更を保存する」をクリックして設定を保存したら完了です。

 

 

スマホ版のプロフィールカスタマイズ(pro)のみ 

<style type="text/css">
/*プロフィール消す*/
       .hatena-module-title{
               display:none;
        }
       .profile-wrapper{
               display:none;
        }
</style>

上記のコードをコピーします。

元からあるプロフィールを消します。

 

f:id:UrushiUshiru:20180416171142j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に上記コードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

<div class="hatena-module-profile">

    <div class="profile-description">
       <p><center><div class="shadow"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/U/UrushiUshiru/20180323/20180323190133.jpg" width="280" height="280"></div></center><br />
       <p><strong><a href="https://charlottehibi.hatenadiary.jp/entry/about">シャル(シャルロッテ)</a></strong></p><p>このブログの主人公の金髪碧眼美少女。</p><p>天邪鬼な性格で人前な中々素直になれないという典型的なツンデレキャラ。</p></p>

        <!-- フォローボタン -->
        <center>
        <div class="content-inner-follow-buttons" >
        <div class="follow-title"><span style="font-size: 8px">フォローする</span></div>
        <a class="hatena" href="https://blog.hatena.ne.jp/UrushiUshiru/charlottehibi.hatenadiary.jp/subscribe" onclick="window.open('https://blog.hatena.ne.jp/UrushiUshiru/charlottehibi.hatenadiary.jp/subscribe', '', 'width=500,height=400'); return false;">
        <i class="blogicon-hatenablog lg"></i><br>
        <span class="inner-text">Hatena</span>
        </a>

        <a class="twitter" href="https://twitter.com/intent/follow?screen_name=UrushiUshiru" target="_blank">
        <i class="blogicon-twitter lg"></i><br>
        <span class="inner-text">Twitter</span>
        </a>

        <a class="feedly" href="http://feedly.com/i/subscription/feed/https://charlottehibi.hatenadiary.jp/feed" target="_blank">
        <i class="blogicon-rss lg"></i><br>
        <span class="inner-text">Feedly</span>
        </a>

        </div>
        </center>

    </div>

</div>



<style type="text/css">

SNSフォローボタンのCSS

</style>

上記のコードを以下のように変更します。

 

また、36行目のSNSフォローボタンのCSSを以下のサイトから取得してください。

ちなみに、上記コードのフォローボタンのHTMLは以下サイトからの参考になります。

www.ituore.com

 

f:id:UrushiUshiru:20180421005458j:plain

はてなブログの管理画面にアクセスして、「デザイン」⇒「①スマホマーク」⇒「②タイトル下」に変更した上記コードを貼り付けます。

貼り付けたら「変更を保存する」をクリックして保存します。

 

 

f:id:UrushiUshiru:20180421005732j:plain

 以上で、スマホ版ブログのプロフィールカスタマイズも完了です。

 

 

まとめ

プロフィールをカスタマイズする人はそんなにいないと思いますが、私のサブブログのように、バーチャルブロガーになりきってブログを書く場合は必要な場合もあると思います。

皆さんもプロフィールをカスタマイズしてバーチャルブロガーになりきってみてはいかがでしょうか?

 

ブログの記事書きながらカスタマイズするのしんどっ!

 

あああ!しんどいいいいい!!

 

私にそんなこと言ってどうするの?バカなの死ぬの?

 

記事作成とブログカスタマイズに疲れたので慰めて欲しいでござる!

 

漆さん?私のシャルちゃんに手を出そうだなんて100億年早いですよ?

 

ああああああああああ!やめて!お願いだから!!!

 

今のうちに逃げよっと・・・

 

最後まで読んでいただきありがとうございました!