2021年06月29日

BloggerのテーマNotableで1文字目が大きくならないようにしたい

BloggerのテーマでNotableを選ぶと、記事の最初の1行の文字色が違って、1文字目が大きくなってしまいます。
英語の記事でこういうデザインを見たことがあって、ちょっとカッコいいとも思うのですが、自分のブログには合わない気がします。
SC20210629163009.png


こうなるのを回避して、1行目も2行目以降と同じフォントサイズと色にする方法を考えてみました。


1行目を改行してしまう


NotableのテーマのHTMLを調べてみると、どうやら「first-line」・「first-letter」というところで、こうなるように設定してあることが分かりました。
(first-line → 最初の行、first-letter → 最初の文字、という意味でしょう)


であれば、記事の最初の1行に改行タグ(<br />)を入れて、2行目から文章が始まるようにしてしまえばいいということになります。
全ての記事の1行目が空いている状態になるので、ちょっと見た目がイマイチですが、気にならない人はこれが一番簡単です。
ただし、そういうやり方をして検索エンジンに嫌われるとか、ひょっとしたらあるかもです。


HTMLを編集する


やはりちゃんと対処しておきたいので、HTMLを編集することにします。
HTMLを編集といっても、最初の行の色と1文字目のフォントサイズは、CSSで書かれています。
ただ、現在のBloggerは、CSSも含めてHTML編集となっているので、[HTMLを編集]で編集することになります。


1)Bloggerの[テーマ]ページを開いて、[カスタマイズ]ボタンの右側の[▼]部分をクリックします。
SC20210629174506.png


2)開いたメニューの中の[HTMLを編集]をクリックします。
SC20210629174700.png


3)「body.item-view .Blog .post-body::first-letter」を探して、その部分7行を /* と */ ではさみます。
2048行目辺りにあります。
「body.item-view .Blog .post-body::first-letter」は、最初の1文字の書式を設定している部分です。
/* と */ ではさむことで、これを無効化できます。
(このとき /* と */ の「 * 」と「 / 」が逆になっていることに注意してください)
SC20210629173242.png


4)次に「body.item-view .Blog .post-body::first-line」を探して、同じようにその部分3行を /* と */ ではさみます。
2062行目辺りにあります。(上の画像を参照)
「body.item-view .Blog .post-body::first-line」は、1行目の書式を設定している部分です。
ここまでで、パソコンで表示される場合の書式は設定完了です。


5)タブレットやスマホで表示される場合の書式の設定も、1行目の色については、ここまでの作業で設定完了ですが、最初の1文字はHTMLの別の場所を無効にする必要があります。
2741行目辺りに、もう一つ「body.item-view .Blog .post-body::first-letter」があるので、そこの4行も /* と */ ではさんで無効化します。
SC20210629173530.png


6)右上の[保存]アイコンをクリックして、作業完了です。
SC20210629204737.png


記事の1行目が、2行目以降と同じフォントになったはずです。
SC20210629175746.png




にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/10825620

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
ブログ内を検索
ファン

最新記事
カテゴリー
最新コメント
ツイッター
広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール