沖縄☆パソコン家庭教師!

パソコンを楽しむための、パソコン操作ガイドです。誰でも、楽しくパソコンを活用するための情報をご案内しま~す!みなさ~ん、沖縄でパソコン生活をはじめよう!(Windows XP ~ Windows 10)

お問い合わせはこちら
YouTube のスタート入門講座をはじめました!

 ブログ関連 ブログの設定

サイドバーに画像を追加する方法①

今回は、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(ミンネ)はこちらから。

同じカテゴリー(ブログ関連)の記事
この記事へのコメント
あっあっあっ・・・・・有難うございます。
ここまで丁寧に・・もう一度、「有難うございます。」
たーちゃんパパにお願い出来てホント感謝します。
私みたいなド素人に強い味方が付いた感じです。

又、私のように困っている方を助けてあげて下さい。
そして、いつまでも、このブログを続けて下さいね。
Posted by kazuちゃんkazuちゃん at 2008年09月19日 17:12
kazuちゃん さんへ

いや~、そこまで、言われると、
ちょっと恥ずかしいような・・・(* ̄∇ ̄*)エヘヘ

でも、なんにしても、初めは、素人ですから・・・
私も、そうでしたよ~!kazuちゃんさんp(*^-^*)q がんばっ♪
Posted by 怪獣タクトンとゆかいな仲間たち怪獣タクトンとゆかいな仲間たち at 2008年09月19日 19:58
またまた・。
コピー→貼り付け。は、出来たのですが、赤い下線部には
何を入れるのですか??すみませんが教えてください。
Posted by kazuちゃんkazuちゃん at 2008年09月24日 15:57
kazuちゃん さんへ

ヾ(* ̄▽ ̄*)ノこんばんわ♪

実際に、kazuちゃんさんのブログを参考に、
コードを作ってみましたので、そのまま、
コピーして貼り付けて使ってみて下さいね。

画像をクリックすると、その写真が掲載されている
ページが表示されます。

また、画像の下の名前の部分もクリックすると、
同じページが表示されます。

つまり、好きなページの写真を貼り付けて、
その写真が掲載されているページへ、
ジャンプ(表示)することが可能です。

その後、表示と動作を確認して問題がなければ、
最初のコードと見比べて違いを見て下さい。

変更した箇所が判ると思います。(⌒-⌒)ニコニコ...

それから、貼り付ける写真については、
サイドバーの幅より、小さいものに限りますね。
大きくては、その幅以上は、上手く表示できないからです。

写真のサイズとアドレスを確認する方法は、
写真の上で、右クリックすると、メニューが表示されるので、
プロパティをクリックしてください。
写真の詳細情報が表示されますので、
こちらで、確認可能ですよ!kazuちゃんp(*^-^*)q がんばっ♪
Posted by 怪獣タクトンとゆかいな仲間たち怪獣タクトンとゆかいな仲間たち at 2008年09月24日 21:24
有難うございます。
沢山、時間の有る時、頑張ってみます(主人が!)。
たーちゃんパパは、何でも分かるんですねっ。

私は、もぅ~、チンプンカンプンで??、頭が痛くなります(笑)
これからも、宜しくお願いします。
Posted by kazuちゃんkazuちゃん at 2008年10月01日 16:42
kazuちゃん さんへ

ヾ(@⌒ー⌒@)ノおはよう♪

好きでやっていることですから、
でも、日々勉強ですよ~!(=⌒▽⌒=) ニャハハハ♪

kazuちゃんもp(*^-^*)q がんばっで~す♪(ご主人も!)
Posted by 怪獣タクトンとゆかいな仲間たち怪獣タクトンとゆかいな仲間たち at 2008年10月02日 08:43
何とかやってみましたが・・。
サイドバーでは下の方が見にくいので、「記事一覧の上部」っていうのが有ったので・・。出来る事ならば、ここに「犬の洋服、どうですか?」の、一覧(横一列で5枚位)は入らないでしょうか?
一応、そのままにしておきますので、時間の有る時、アドバイス頂けると嬉しいです。
今回は、自分で出来る所まで頑張りました。
「やる時やらねば!!」(^.^)/~~~
Posted by kazuちゃんkazuちゃん at 2008年10月09日 18:22
kazuちゃん さんへ

ヾ(@⌒ー⌒@)ノおはよう♪

サイドバーでの表示は問題なく出来たようですね!

「記事一覧の上部」の表示も可能なのですが、
サイドバーの一番上に表示を移動することも可能ですよ!

「ブログの設定」→「サイドバー」で
「カスタムプラグイン」の表示位置を変更できますよ!

「記事一覧の上部」表示のソースコードも作ってみますので、
ちょっと、お待ち下さいね~!(⌒-⌒)ニコニコ...
Posted by 怪獣タクトンとゆかいな仲間たち怪獣タクトンとゆかいな仲間たち at 2008年10月11日 10:32
kazuちゃん さんへ

ヾ(@⌒ー⌒@)ノこんにちは~♪

遅くなりました~!

ソースコードを修正して、
動作確認をしましたので、ご参照下さいね!(*⌒-⌒*)


下記のアドレスに詳細をアップしました。

ブログ名: テンプレートのカスタマイズ工房-test-
URL: http://styles.ti-da.net/

パスワードを設定していますので、

「てぃーだブログ 管理画面」の
「コミュニティー機能」→「メッセージ」へ、
パスワードを送りますね!(⌒-⌒)ニコニコ...
Posted by 怪獣タクトンとゆかいな仲間たち怪獣タクトンとゆかいな仲間たち at 2008年10月13日 16:17
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。
てぃーだイチオシ
< 2024年05月 >
S M T W T F S
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
過去記事
マイアルバム
プロフィール
怪獣タクトンとゆかいな仲間たち
怪獣タクトンとゆかいな仲間たち

☆はじめまして、
たーちゃんパパで~す!

只今、フリーで活動中です!今までは、仕事が忙しく、出張で家にいる事が少なくて、子供の成長を見ることが、出来なかったので、今は毎日が、べったりで、子供中心の生活です。いろいろ、発見があって楽しい毎日です!

最近から、たーちゃんも、パソコンで遊ぶようになり、いろいろと覚えてきたので、このブログがパソコンの参考書になればいいな~!もちろん、皆さんにも!(⌒-⌒)ニコニコ...

もうみっつのブログ

怪獣タクトンとゆかいな仲間たち-子供中心生活!-

ブログをカスタマイズ!「ブログスタイル」

簡単ホームページ作成サービス「グーペ」【ホームページ作成講座】

も、☆ヽ(▽⌒*)よろしぅ♪

サイトマップ]はこちら!

アクセスありがとう!
お問い合わせ
QRコード
QRCODE

Back to Top