Blogger

Bloggerのモバイル表示で、サイドバーの背景が透明になってしまうためなんとかする（荒技） 原因はよくわからないが、以下のように「Theme」> 「Customize」で設定したWidgetの背景が、PC表示では反映されるのに、モバイル表示ではうまく反映されず、透明になってしまう現象にぶち当たった こんな感じで、文字が読みづらい、、 そこで、無理矢理ではあるが、WidgetのHTML部分にCSSを記載することで背景を無理矢理表示させた 「Layout」>『（表示させたいWidetの）Edit」に記載する この部分にCSSも書いてしまう 記載内容は以下 これで多少は見やすくなった 以上。

Bloggerではデフォルトで、モバイル表示ではサイドバーが非表示となっているので、 表示したい場合は、設定を加える必要がある 前提として、こちらを参考にモバイル表示でもHTMLをカスタマイズする設定をしておく 参考：BloggerでHTMLとCSSを編集する方法 HTMLを見ると、サイドバーの各Widgetは「b:widget」のタグで囲まれている 設定としては、表示したいWidgetを部分を探し出して（Jump to widgetのボタンを使うと簡単）、「mobile=’yes’」を書き足すだけ。 例えば「HTML5（About me）」のWidgetの場合、以下のような表記になっているので、「mobile=’yes’」を書き足す これが こうなる すると、モバイルでもサイドバーのWidgetが表示されている状態となる

BloggerでHTMLとCSSを編集する方法 目次 （下準備）Mobile表示についてもHTMLを編集できるようにする設定 HTMLを編集する方法 CSSを編集する方法 （下準備）Mobile表示についてもHTMLを編集できるようにする設定 モバイルで閲覧する際に、モバイル専用の画面表示を想定する場合は以下の設定をしておく 「Theme」>「Mobile（歯車マーク）」をクリック 「Yes, Show mobile theme on mobile devices.」のラジオボタンを選択 「Choose mobile theme」から「Custome」を選択 「Save」を押下し完了 HTMLを編集する方法 まずは、BloggerでHTMLを編集する方法 「Theme」>「Edit HTML」をクリック こちらの画面で自由に編集できる 編集し終わったら「Save theme」で終了する 長いので、「Jump to widgeet」から編集したい場所に一発で飛ぶことも可能 CSSを編集する方法 次は、BloggerでCSSを編集する方法 「Theme」>「Customize」をクリック 「Advanced」>「Add CSS」を選択し、出てきた白い枠の中に記載することでCSSの設定を反映することができる 以上