はてなブログでオリジナルのプロフィールモジュールを設定する方法について2017-10-25はてなブログでオリジナルのプロフィールモジュールを設定する方法についてカスタマイズはてなブログ純正プロフィールモジュールでは満足できない!はてなブログの純正プロフィールモジュールも悪くはないのですが、人気ブロガーの多くがオリジナルのプロフィールモジュールを使用しています。HTMLモジュールで直接コードを書いているわけです。Focusにおいても、一つだけですがデザインを予め用意しています。利用していただければ幸いです。(なお、CSSさえパクればどのテーマでも使えます)オリジナルのプロフィールモジュールを設定する方法それではオリジナルプロフィールモジュールの設定方法をご紹介します。参考にしたのは「レポログ」さんのモジュールです。念のため完成形は次のようなものです。上から画像ニックネーム(id)自己紹介フォローボタンという構成です。フォローボタンは読者になるツイッターをフォローするFeedlyでフォローするの3つです。1つだけ、2つというように変えることもできますが、その場合は不要なHTMLコードを削除したうえで、CSSにも少し手を加える必要があります。画像を準備するまずはプロフィール用の画像を用意しましょう。サイズは幅300px以下となりますが、150~200pxくらいがおススメです。高さは見た感じ不自然でない範囲で。ちなみに見本はFaceQというアプリで作成しています。Windows8以降の人はPCでも作成できます(アプリストアで探しましょう)。画像が用意出来たらはてなフォトライフにアップロードしてURLを取得しておいてください。※URLははてなフォトライフ上で確認できますし、私のように面倒なタイプの人は一度自分のブログ内で画像を使用してそのソースコードを確認すればURLがわかります。デモサイトコードをコピペするデモサイトのコードは以下の通りです。class="profile-description"style="font-size:0.8em;text-align:center;"><p>起業して失敗⇒サラリーマンで再起<br/>「ワクワクこそ最強のライフハック」を合言葉に<br/>ワクワクするネタ探しの日々。class="profile-feedly">Feedly</div></a></div></div>へたくそなコードですみません。上記コードをいちどテキストエディタに貼り付けてください。HTMLモジュールに直接貼りつけると、作業がわかりにくいのでテキストエディタの方が良いです。ハイライト表示してくれるものだとさらに良いです。画像のURLを入れ替えるまずは画像のURLを入れ替えます。ganapati55"の部分を取得したURLと入れ替えます。記事に画像を貼りつけてURLを確認した場合は上記の見本のコードと似た感じでURL等を取得できるのでわかりやすいかもしれません。はてなフォトライフから取得した場合は、気にせずURLだけ貼りつけちゃって構いません。間に配置してください。ニックネーム・id部分を入れ替えるニックネームやidは見本の6・7行目が該当します。この部分を入れ替える手っ取り早い方法は、はてなブログの純正プロフィールモジュールからChromeのデベロッパーツールを使ってソースを特定し、そのままコピペしてしまう方法です。以下の画像を参考にして自分の純正プロフィールモジュールからソースを抜き出し入れ替えてみて下さい。以下の部分からHTMLソースをコピーする。そのうえで見本と比較しながら似たようなところを入れ替えてみてください。そんなに難しくないはず。自己紹介文章を入れ替える自己紹介文章は見本の9行目です。適当に入れ替えてください。HTMLタグの打ち方がわからないときはやはりブログの記事作成で一度作ってしまってHTMLコードを表示させてコピペすればよいかと思います。フォローボタン部分を入れ替える最後の入替はフォローボタン部分です。見本12~14行目ですが、見れば大体わかるかと思います。注意事項としてははてなブログの読者になる方でのサイトURLは「http://」は不要です。ドメインそのものを入力して下さい。Feedlyではhttpからアドレスをしっかり入力して下さい。HTMLモジュールにコピペ入替が完了したらサイドバーの設定画面よりHTMLモジュール内にコードをコピペします。最後に実際に読者に慣れるか、フォローできるか検証して、動作が確認できれ場完了です!!最後にアドバイスオリジナルプロフィールは見本をじっくり見ながら丁寧にコピペで入替すれば簡単にできます!オリジナルプロフィールモジュールのCSSテーマのCSS内に以下記載されています。Focus以外のテーマで使いたい人はどうぞ。18:30はてなブログでオリジナルのプロフィールモジュールを設定する方法について関連記事2018-01-11Focusでヘッダ部分を画像と置き換える方法テキストベースのヘッダ表示もシンプルで良いのですが、画像を...2017-11-01サイドバー内のはてなモジュールをタブ化して表示する方法はてなブログにおいてサイドバー内に配置するモジュールをタブ...2017-10-31投稿記事内で表示する目次の設定方法はてなブログテーマFocusで使用している記事内目次の設定方法に...2017-10-253カラム表示に必要な設定についてFocusで3カラム表示を実現するまでの手順をご紹介します。2017-10-23Focusでグローバルナビを追加する方法グローバルナビを設置する方法をご紹介します。「ワクワクこそ最強のライフハック」を合言葉にワクワクするネタ探しの日々。2018-01-12Focusの各アセット(吹き出しとかBOXとか)を簡単に使えるコピペデータを配布します2018-01-11Focusでヘッダ部分を画像と置き換える方法2017-11-22Focusで使用しているボタンとバルーンの使い方2017-11-21Focusで使用している主なカラーコード一覧2017-11-20引用などで使えるBOXデザインの使い方2017-11-02カテゴリアーカイブ(記事一覧)ページの見出し表示をCSSで変更してみました。▲はてなブログをはじめよう!ganapati55さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。