この前、もう1つの新ブログを公開したことを、このブログで宣伝させてもらいましたが、もっと宣伝したくなったので、サイドバーに画像付きで、新ブログのリンクを貼ってみました。本日は、『はてなブログ』のカスタマイズ!サイドバーに画像編と題しまして、その方法を備忘録として書き留めておきたいと思います。
完成図
こんな感じでサイドバーに新ブログの宣伝をしてみました。ちょっと画像が大きすぎるような気がしますが、まぁよしとしましょう。
それでは、実際にサイドバーに画像を貼り付ける方法について解説していきたいと思います。
1.まず画像を準備する
まずは画像を準備しましょう。このブログの場合サイドバーの横幅が300pxなので、300pxの画像を用意しました。何となく正方形にしたかったので、約300×300でトリミングして形を整えました。
2.画像のアップロード
フォトライフに画像をアップロードしましょう。
アップロードが終了したら、アップロード先のフォルダを開き『フォルダを編集』をクリックします。
そしたら、先ほどアップロードした画像を選択して、『ブログに貼り付ける』を選んで『HTMLタグ』をコピーします。
3.HTMLタグの編集
ダッシュボードに戻ってください。そしたら、以下の手順で進んで、先ほどコピーしたコードを貼り付けます。
- デザイン
- サイドバー
- モジュールを追加
- HTML
このままだと画像をクリックした時、フォトライフが開いてしまうので、以下の○○○○○の部分に任意のリンク先を書きます。私の場合、新ブログを宣伝したかったので、リンク先は、新ブログのURLになります。
<a href="○○○○○">
4.スマホ表示のカスタマイズ
スマホ表示の方は、お好みですが、スマホでもサイドバーと同じ画像付きURLを付けたいのなら、先ほど設定したHTMLをコピーして貼り付けるだけです。ちなみに貼り付ける場所は、『フッタ』の『フッタ』がおすすめです。
さいごに
今回の『はてなブログ』のカスタマイズは、サイドバーをちょこっといじってみました。当ブログでは、この他にも、少しカスタマイズした箇所があるので、興味ある方は過去記事も見てくださいね。