やりました！実現出来ました！
サイドバーを四角の枠で囲めました！！
↓
《サイドバーを枠で囲みたい！》
サイドバーを枠で囲む
ネットで調べても、サイドバーを囲む情報はありましたが、twenty seventeen の方法はない！(ネットに書いているプログラム部分が見つからない)
仕方ないから、ひたすらcss を眺める。
twenty seventeen のサイドバーに関するプログラム
ずっと見ているうちに、外観の変更でウィジェットを選ぶとサイドバーとヘッダー設定に飛ぶので、もしかしたら「widget」という部分がサイドバーに関係しているのでは？と思い、行間の値を変更したら、サイドバーの間隔が変わった！
【twenty seventeen のサイドバー設定css は「widget」の部分】
これを見つけるのに３日かかりました。しかし、見つかれば簡単なことです。
twenty seventeen のサイドバーを枠で囲む！
【ご注意】
プログラムを間違えると、ブログがビッグバンを引き起こし消滅する場合があります。子テーマで実施し、更に、ファイルを事前にコピーして別保存することをオススメします。
※途中なので囲む線色や太さは理想的な設定ではありません。
境界線のないサイドバーにワンポイントつきました。(パソコン表示画面)
スマホの場合は記事の下部に来るので、私としては重要ではありません。
無いよりあるほうが自分のイメージでは良くなったと思います。
twenty seventeen でサイドバーを囲む実現方法
理解を自分で全くせず、真似すると失敗した時のリカバリーもカスタマイズも出来ませんので理解することが必要です。
【実現方法】子テーマの「追加css 」に下記を追記したのみ
この方法が一番安全で、内容を理解しやすく、改造もしやすいと思います。(直接style. css に追記しても出来ますが探すの大変)
【追記したcss 】 コピペでOK
【説明】
ど素人ですので、間違いもあるでしょうが説明します。
①まず「.widget 」と書くとサイドバー及びフッダー1、フッダー2について設定するということです。設定は必ず{ }で囲まないといけません。
②margin-top: 2em 上部にスペースを確保(しないと「カテゴリー」とかのタイトル文字が上部に張り付いて格好悪い)
※各設定の後ろは ； で区切るのがcss の世界のルールです。
③margin-bottom: 3.5em 下部に3.5行のスペースを確保(ルックスの都合)
④padding: 1em 左右に一文字分？(自信なし)のスペースを確保(ルックスの都合)
※em でなくてもpxでも設定出来ます。px のほうがイメージしやすいかもしれません。
⑤border:1px solid #ccc ここが最大ポイントです。サイドバーの各パーツを囲む設定です。(ただし、左右と上だけ)1ピクセルの太さでcccの色、つまり灰色で囲みました。
⑥border-bottom: 0.5px solid #ccc 下部に灰色で線引いてます。(横と線の太さ変えているのは。。。単なる失敗ですので後に直します)
他にもshadow(つづりに自信なし)などを使って影をつけて立体的に見せたり、囲み線を点線にしたり、いろいろ出来ます。
ネットで調べたら分かるけど、css の本は一冊あるほうが勉強になると思います。
twenty seventeen 以外の改造している人のはsidebarやsubをいじるとか書いてあるけど、twenty seventeenにそんな部分はありません。「widget」でした。
結局は、ワードプレスを使う以上、改造したいなら自分でcss を理解するしかないのでしょう。
他人はたまにしか参考にならないです。
【最後にご注意】
追加css で改造しても、公開する前に、必ずプレビューで確認して下さい。記述間違えると、ブログがブラックホールになり、脱出不能になりかねません。(簡単になりますよ)
子テーマでブラックホールになっても、オールリセットにはなりますが、親テーマに戻せば何とかなります。(ただし、状況によってはログインすら不可能な場合があります)
私は実際になりましたが、偶然パソコンとスマホで両方開いていたため、スマホが古いプログラムの状態だったため戻して助かったことがあります。
サーバーに入って修復も可能でしょうが、素人には更にハードルが高いので難しいと思います。
【サイドバーを囲む問題点】
サイドバーを囲むことは出来ましたが問題もありました。
パソコンの時は、アドセンスの自動広告がやりたい放題して、どでかいバーナーを貼り付けてくれる。
一方、スマホは囲みより自動広告がはみ出してみっともない。
非常に悩ましい状態です。
ルックス良くしたのに、予想外の悪さをされてしまった。
広告なんて誰も気にしないから、いいかと。。。(目障りだと良くないけど)
とりあえず、やりたいことが実現出来た。
だから良し。
