ブログ関連 ブログの設定
サイドバーに画像を追加する方法①
今回は、kazuちゃんさんのリクエストで、サイドバーに
「写真(自分で撮った画像)を載せたいのですが、どうすればいいのですか?」
と言う質問でしたので、「カスタムプラグインの登録」を利用して、
サイドバーに画像(写真)を追加する方法を紹介したいと思います。
(その他、ブログパーツ・アフィリエイト広告などの追加も可能です。)
設定は、
「管理画面TOP」→「ブログ環境設定」→「カスタムプラグインの登録」で行ないます。
「カスタムプラグインの設定」については、こちらを参照して下さい。
今回は、サンプルコードを用意しましたので、こちらを使用します。
サンプルコード(サンプルコードは、画像1枚を3段に並べています。)
サンプルコードをコピーします。その後、「カスタムプラグインの登録」で、貼り付けて使用して下さい。
こちらが、実際に貼り付けて使用したサンプルコード画面です。
←クリックすると拡大表示します!
上記、サンプルコード画面の中の赤い下線部分を修正して使用してください。
(赤い点線で囲まれている部分が、画像1段分のコードです。この部分をコピー&貼り付けで増やすことで、画像の段数を増やすことができます。)
サンプルコードの「サイドタイトル」「写真へのリンク」「画像サイズ」「ページへのリンク」「名前」などの部分をお好みに合わせて変更して使用して下さい。
実際にサイドバーに画像を追加したサンプル完成例です。
こちらが、サンプル完成例です。(⌒-⌒)ニコニコ...
今回のサンプル完成例については、スタイルシートも併用して、写真に白い枠をつけていますが、テンプレートをカスタマイズするため、危険をともないますので、スタイルシートの説明については、次回、行ないたいと思います。w( ̄o ̄)w オオー!
※以下に、記事を追加修正しました。
【サンプルコード】<!-- ↓ここから -->
<div class="photoimg">
<div class="sidetitle">サイドタイトル</div><!-- end sidetitle -->
<div class="side">
<div class="sidebody">
<div style="border-top:1px solid #cccccc;padding:3px 0px 3px 0px;">
<div style="text-align:center;"><a href="http://kidslife.ti-da.net/"><img src="//img01.ti-da.net/usr/takuton/profile.jpg" width="150" height="150" alt="怪獣タクトン" title="怪獣タクトンとゆかいな仲間たち" border="0" /></a><br />
<a href="http://kidslife.ti-da.net/" target="_blank"><strong>怪獣タクトン</strong></a>
</div><!-- end text-align -->
</div><!-- end border-top -->
<div style="border-top:1px solid #cccccc;padding:3px 0px 3px 0px;">
<div style="text-align:center;"><a href="http://kidslife.ti-da.net/"><img src="//img01.ti-da.net/usr/takuton/profile.jpg" width="150" height="150" alt="怪獣タクトン" title="怪獣タクトンとゆかいな仲間たち" border="0" /></a><br />
<a href="http://kidslife.ti-da.net/" target="_blank"><strong>怪獣タクトン</strong></a>
</div><!-- end text-align -->
</div><!-- end border-top -->
<div style="border-top:1px solid #cccccc;padding:3px 0px 3px 0px;">
<div style="text-align:center;"><a href="http://kidslife.ti-da.net/"><img src="//img01.ti-da.net/usr/takuton/profile.jpg" width="150" height="150" alt="怪獣タクトン" title="怪獣タクトンとゆかいな仲間たち" border="0" /></a><br />
<a href="http://kidslife.ti-da.net/" target="_blank"><strong>怪獣タクトン</strong></a>
</div><!-- end text-align -->
</div><!-- end border-top -->
</div><!-- end sidebody -->
</div><!-- end side -->
</div><!-- end photoimg -->
<!-- ↑ここまで -->
↓ 只今、ランキング参加中なので、クリックをお願いしま~す!(⌒-⌒)ニコニコ...
[PR]
minne(ミンネ)はハンドメイド作品のオンラインマーケットです。
手作り作品のネット販売が、月額利用料「0円」で行えます。
お金のやりとりはminneが代行するので、初めての方でも安心です♪
パソコン、スマホどちらからでも
すぐにあなたの作品を販売できるminne(ミンネ)はこちらから。
ここまで丁寧に・・もう一度、「有難うございます。」
たーちゃんパパにお願い出来てホント感謝します。
私みたいなド素人に強い味方が付いた感じです。
又、私のように困っている方を助けてあげて下さい。
そして、いつまでも、このブログを続けて下さいね。
いや~、そこまで、言われると、
ちょっと恥ずかしいような・・・(* ̄∇ ̄*)エヘヘ
でも、なんにしても、初めは、素人ですから・・・
私も、そうでしたよ~!kazuちゃんさんp(*^-^*)q がんばっ♪
コピー→貼り付け。は、出来たのですが、赤い下線部には
何を入れるのですか??すみませんが教えてください。
ヾ(* ̄▽ ̄*)ノこんばんわ♪
実際に、kazuちゃんさんのブログを参考に、
コードを作ってみましたので、そのまま、
コピーして貼り付けて使ってみて下さいね。
画像をクリックすると、その写真が掲載されている
ページが表示されます。
また、画像の下の名前の部分もクリックすると、
同じページが表示されます。
つまり、好きなページの写真を貼り付けて、
その写真が掲載されているページへ、
ジャンプ(表示)することが可能です。
その後、表示と動作を確認して問題がなければ、
最初のコードと見比べて違いを見て下さい。
変更した箇所が判ると思います。(⌒-⌒)ニコニコ...
それから、貼り付ける写真については、
サイドバーの幅より、小さいものに限りますね。
大きくては、その幅以上は、上手く表示できないからです。
写真のサイズとアドレスを確認する方法は、
写真の上で、右クリックすると、メニューが表示されるので、
プロパティをクリックしてください。
写真の詳細情報が表示されますので、
こちらで、確認可能ですよ!kazuちゃんp(*^-^*)q がんばっ♪
沢山、時間の有る時、頑張ってみます(主人が!)。
たーちゃんパパは、何でも分かるんですねっ。
私は、もぅ~、チンプンカンプンで??、頭が痛くなります(笑)
これからも、宜しくお願いします。
ヾ(@⌒ー⌒@)ノおはよう♪
好きでやっていることですから、
でも、日々勉強ですよ~!(=⌒▽⌒=) ニャハハハ♪
kazuちゃんもp(*^-^*)q がんばっで~す♪(ご主人も!)
サイドバーでは下の方が見にくいので、「記事一覧の上部」っていうのが有ったので・・。出来る事ならば、ここに「犬の洋服、どうですか?」の、一覧(横一列で5枚位)は入らないでしょうか?
一応、そのままにしておきますので、時間の有る時、アドバイス頂けると嬉しいです。
今回は、自分で出来る所まで頑張りました。
「やる時やらねば!!」(^.^)/~~~
ヾ(@⌒ー⌒@)ノおはよう♪
サイドバーでの表示は問題なく出来たようですね!
「記事一覧の上部」の表示も可能なのですが、
サイドバーの一番上に表示を移動することも可能ですよ!
「ブログの設定」→「サイドバー」で
「カスタムプラグイン」の表示位置を変更できますよ!
「記事一覧の上部」表示のソースコードも作ってみますので、
ちょっと、お待ち下さいね~!(⌒-⌒)ニコニコ...
ヾ(@⌒ー⌒@)ノこんにちは~♪
遅くなりました~!
ソースコードを修正して、
動作確認をしましたので、ご参照下さいね!(*⌒-⌒*)
下記のアドレスに詳細をアップしました。
ブログ名: テンプレートのカスタマイズ工房-test-
URL: http://styles.ti-da.net/
パスワードを設定していますので、
「てぃーだブログ 管理画面」の
「コミュニティー機能」→「メッセージ」へ、
パスワードを送りますね!(⌒-⌒)ニコニコ...