どうもー！コミックバンド闇鍋の丼でございます！！


第44回でございます！今日は、昨日のお話の続きですね！






はい。
昨日のお話を一言で表すならば【今まで気になってたけどできてなかった細々としたブログの設定変更を、休日なのでやってみた】という感じでしょうか。


お問い合わせフォームやメニューバーの設置などとあわせて、自作バナー(的なもの)を横並びにできるようになったのでした！
で、昨日はスマホ版のメニューバー設置でつまずいたというお話までしかできず、自作バナー(的なもの)のお話が残っておったのです。


ということで、さっそく本題に入ってまいりましょう！

【④サイドバーに貼ってあるstand.fmとnote用のバナーを横並びにして、サイズも小さくしました！＠PC版】

はい。
「コイツはいったい何を言っているんだ」と思われている方も多々いらっしゃるかとは思います。
自分はブログを書き始めて１ヶ月半程度の超絶初心者でございます。
おまけにパソコンもクソほど苦手ときたもんだ……。


ですので、いろいろとネットで調べまくって試行錯誤したり、己の直感で操作してみたりしては、頭を抱えている訳であります。
きっと、もっとオシャンな方法があることでしょう。
だがしかし、今の自分はその領域に到達できていないのです。


ということで、素朴な疑問とその解決策になっていること請け合いですが、生暖かく見守っていただけると有難いです……(震え声)



【画像を普通にサイドバーに貼る方法】

まずは、今までどうやっていたかについてですね。
PC版の[ブログパーツ]で[フリーエリア]を使って設定していきます。



では、その[フリーエリア]の右端辺りにカーソルを持っていくと[設定]や[×]が出てくると思うので、[設定]の方を押してみましょう！


[フリーエリア]の設定画面が開いたでしょうか？
「自由にHTMLなどを記述することができます。」と書いてありますね。
よし、言うたな！？ほな、好きにやらしてもらうでぇ～！
……ということで、ここに好きに設定させてもらいましょう。


「え……でもコレ……何か白い枠とポチっと選ぶ●しか付いてないんやけど……」
不安に思いましたよね？わかります。これ、何に使うんやろうと……ね。


「あ！このデッカイ白枠に画像を引きずって入れればいいんやな！？」
やってみましょうか……まあ、ダメですわな。何かブラウザ上で画像が開かれただけでしたわ。


はい。
ものすごく行き詰まった感が出ましたが、安心してください！ちゃんと貼れますよ！(汗)


とりあえず、[フリーエリア]がどこにあるのかがわかったので、一度ここを離れましょう！
いつもブログを書く時に押しているハズの、[記事を書く]をポチっとお願いします。
記事を書く画面になりましたでしょうか？


はい。
それでは、その本文を入力する白い枠のところに、画像を置きましょう！
以前使った画像で既に画像フォルダに入っているという方は、そこから貼り付けましょう(貼りたい画像を選んで[貼り付け]を押すんや！)。


そうでない方は、記事タイトルの枠の下、[記事を書く]の← →の下にある[画像]を押して、出てきた灰色？ねずみ色？の枠のところに画像を引きずって入れてください。
で、同じように画像を選んで[貼り付け]を押すんや！


デッカイ白枠の中に画像が出てきましたかね？
じゃあ、１個で良い人はそのままで、２個以上並べたい人は同じように貼ってってください。


では、それぞれの画像にリンクを貼っていきましょう！
文字のフォントや大きさを変えるボタンが並んでるところに何かクリップみたいな謎マーク([－]こういうやつ)があると思うので、先ほど貼り付けた画像を選択した上で、そのクリップみたいな謎マークを押してください！


リンクの作成画面が出てきましたね！
そのリンク先URLの枠に、飛ばせたいページ(外部サイトでもいける)のURL入力しましょう。
え？既に何か入ってる？あ、大丈夫です。消し去りましょう。上書き上書き！


ターゲットについては、別ウィンドウで開くか同じウィンドウで開くかだけなので、好きな方を選んでください。
タイトルは、まあ……飛んでく先の名前でも入れときますか！
で、[挿入]を押しましょう。


残りの画像も同じように続けて入れておいてください！


はい。
これでバナーっぽい感じになりました！
普通に記事内で使う分には、これでもう大丈夫です。


だがしかし、サイドバーに貼る時は、このままやると縦に並んでしまうのですよ！
どうしても横に並べたい……どうしたものか……。
そして、この絵をそのまま先ほどの[フリーエリア]に貼っつけようとしてもできない……どうすれば貼れるんだ！！！！！
(今さっきリンクを貼った画像を選択して[フリーエリア]の白枠にコピペしようとすると、画像のタイトル？が表示されるよ！)


ということで、横並びの説明の前に、フリーエリアへの貼り付け方の説明に入っていきましょう。
本文の枠の上にある[HTMLタグ編集]を押してみてください！


どうでしょう？初心者にとっては絶望的な画面が表示されたのではないでしょうか……(汗)
……とりあえず、詳しい中身のことはよくわからなくても良いので、全部選択してctrl＋Cですわよ！


はい。
そしたら、また[フリーエリア]に戻りましょうか！(戻り方は上記参照)
あ、一発で設定できる自信が無い方は、下書き保存しておくと良いかも？？

[フリーエリア]のデッカイ白枠の中に先ほどコピーしておいた難しそうなやつを貼り付けましょう！今だッッ！ctrl＋V！！！


はい。貼れましたか？
ラベルにはコレが何かわかるような名前を付けておきましょう。
改行指定は[変換しない]にしておいてください。
タイトル指定については、好きな方をどうぞ！先ほどラベルに入力した名前を見える状態にするかどうかです。


で、最後にパーツの表示を[表示する]にして、[保存する]を押してください！


これで、PC版のサイドバーにバナー的な画像が表示されているハズです！


複数の画像を貼り付けた人は、縦に並んでいると思います。
このままでも問題ない場合は良いのですが、横に並べたい人は次に進みましょう！


ちなみに、画像のサイズを変えたい場合は、それぞれの画像のheightとwidthをいじってやれば良いですよ！ 
(height="〇〇" width="〇〇"の〇のところに好きな大きさを入れてみてくださいね )





【画像を横並びに貼る方法】

はい。では、本日のメインディッシュ！
画像を横並びに貼る方法に入っていきましょう。


先ほど[フリーエリア]に貼り付けた難しそうな記述を少しいじっていきますよー！


tableというタグを使っていきますよー！
こんな感じで<table>と<tr>と<td>で挟んでみてください！
(このブログのPC版サイドバーに貼ってあるstand.fm＆noteバナーのような並びになるハズです！)





サンプルなので<a>の中を〇や△で表現してますが、先ほど設定したタイトルやURLなどが入っていますよ！


はい。
挟めましたでしょうか？では、保存してみてください！
どうでしょうか……横に並びましたか……？(汗)
まだ縦に並んじゃっているという方は、<td>が無くなっちゃってたりしませんか？大丈夫でしょうか？！


簡単に説明しますと、この<td>は表の内容(データ)が入っているところ(セル)です。
<tr>は、表の行の部分を表していて、今回は１行に横並びにしたいので<tr>を１対使っています。
２行にしたい場合は、１行分ずつ<tr>と</tr>で挟むと良いのだと思います。


ちなみに、自分は枠は必要ないので表示していませんが、それぞれの画像をエクセルの枠のように囲みたい場合は、<table border="0">の数字の部分を1にしてみてください(数字を大きくすると太さが変わります)。


はい。
こんな感じで伝わりましたでしょうか……(汗)
もし同じことで躓き、同じように頭から湯気を出している方がいらっしゃれば、一度試してみていただければと思います！


スマホ版の方でも同じような感じで[広告]のフリー枠に登録してみたら、審査を通過し表示できるようになりました。
しかし、その後ちょっと改行が気になったので、１つ<br>を減らして再申請したら否決されてしまいました。謎です。


今日はこんな感じですかね。
こういった「壁にブチ当たったけど、力づくで壊せたよ！」みたいなパソコン関連の話も、時々していければと思います。



また次回もゆるっと遊びに来ていただけると嬉しいです♪


ではでは！


もしよろしければ、
こちら↓ポチッと押したってください♫


にほんブログ村