wepli.2

うぇぷり どっと に

『はてなブログ』のカスタマイズ!サイドバーに画像編

はてなブログ カスタマイズ

この前、もう1つの新ブログを公開したことを、このブログで宣伝させてもらいましたが、もっと宣伝したくなったので、サイドバーに画像付きで、新ブログのリンクを貼ってみました。本日は、『はてなブログ』のカスタマイズ!サイドバーに画像編と題しまして、その方法を備忘録として書き留めておきたいと思います。

完成図

こんな感じでサイドバーに新ブログの宣伝をしてみました。ちょっと画像が大きすぎるような気がしますが、まぁよしとしましょう。

20150428224148

それでは、実際にサイドバーに画像を貼り付ける方法について解説していきたいと思います。

1.まず画像を準備する

まずは画像を準備しましょう。このブログの場合サイドバーの横幅が300pxなので、300pxの画像を用意しました。何となく正方形にしたかったので、約300×300でトリミングして形を整えました。

2.画像のアップロード

フォトライフに画像をアップロードしましょう。

はてなブログ カスタマイズ

アップロードが終了したら、アップロード先のフォルダを開き『フォルダを編集』をクリックします。

はてなブログ カスタマイズ

そしたら、先ほどアップロードした画像を選択して、『ブログに貼り付ける』を選んで『HTMLタグ』をコピーします。

20150428230934

3.HTMLタグの編集

ダッシュボードに戻ってください。そしたら、以下の手順で進んで、先ほどコピーしたコードを貼り付けます。

  1. デザイン
  2. サイドバー
  3. モジュールを追加
  4. HTML

このままだと画像をクリックした時、フォトライフが開いてしまうので、以下の○○○○○の部分に任意のリンク先を書きます。私の場合、新ブログを宣伝したかったので、リンク先は、新ブログのURLになります。

<a href="○○○○○">

4.スマホ表示のカスタマイズ

スマホ表示の方は、お好みですが、スマホでもサイドバーと同じ画像付きURLを付けたいのなら、先ほど設定したHTMLをコピーして貼り付けるだけです。ちなみに貼り付ける場所は、『フッタ』の『フッタ』がおすすめです。

さいごに

今回の『はてなブログ』のカスタマイズは、サイドバーをちょこっといじってみました。当ブログでは、この他にも、少しカスタマイズした箇所があるので、興味ある方は過去記事も見てくださいね。

はてなブログでカスタマイズした8つのデザイン!全てのブログ初心者に捧ぐCSSとHTMLの備忘録 - wepli.2