オカンTECH

全国のオカンのITリテラシーを底上げだ!

f:id:beaber:20211122011912p:plain
 音楽聞き放題の無料体験もう試した?

【2022年現役】おしゃれサイトに多い!?テキストの左右に横棒を入れる方法【WordPress風】

 


f:id:beaber:20210628164354p:plain













はてなブログでもWordPressみたいにテキストの両サイドに横棒を入れることはできるのかしら?

f:id:beaber:20210628164402p:plain







CSS文を書くことで実現できるよ。イメージがガラッと変わるのでおすすめのカスタマイズだよ。

 

このページでは「はてなブログでテキストの左右に横棒を入れる方法」を中心に紹介。

単純なCSSのみで簡単に使える手順を説明していきます。

 

 

教えるのはこんな人
 

f:id:beaber:20211128071130p:plain

おかぺー(@DemoOkan)

 

この記事をおすすめしたい人
  • はてなブログでもおしゃれな横棒を引きたい
  • はてなブログっぽくない装飾をしたい
  • おしゃれな横棒って何!?

 

f:id:beaber:20211117154746p:plain

 

はじめに

このブログのコンセプトはオカンに伝わるITブログです。

 

そのため、専門用語など難しい言葉は最大限排除して紹介していきます。それでも分からない表現があれば、問合せフォームかTwitterよりご質問ください。

 

f:id:beaber:20210628164407p:plain







Twitter、コメント欄で感想などいただけると泣いて喜びます!

完成イメージ

 

「はてなブログでおしゃれな横棒を引く」

 

文字を装飾し、トップページのメニューの区切りに使ったり目立たせたいときに使用する横棒です。

 

 

スマホ表示だと以下の「新着記事」のようなイメージです。

 

f:id:beaber:20211130235238j:plain

図:おしゃれ横棒イメージ(スマホ表示)

 

 

パソコンだと以下の「人気記事」のようなイメージです。

画面の横幅にあわせて横棒が伸びています。

 

f:id:beaber:20211130235130p:plain


図:おしゃれな横棒イメージ(PC表示)

 

 

今回はこの横棒の引き方を紹介します。

 

WordPressに多い横棒スタイル

横棒スタイルは、WordPressの特にデザイナー向けのテーマでよく見かけます。

 

ためしにGoogleで「css 文字左右 横棒」で画像検索するとデザイナーが書いた記事が多いことが分かります。

 

f:id:beaber:20211201001201p:plain



f:id:beaber:20210628164402p:plain





シンプルかつおしゃれな横棒はデザイン性が高いよ。

テキストの左右に横棒を入れる手順

事前準備(CSS入力)

※この先の手順はパソコンで操作してください。

STEP
設定画面を開く
はてなの管理ページから設定を押す。

f:id:beaber:20211125002858p:plain

STEP
詳細設定画面を開く
「詳細設定」を押す。

f:id:beaber:20211125002922p:plain



STEP
テキストボックスを選択する
下の方へ行き、「<head>要素にメタデータを追加」を押す。

f:id:beaber:20211125002955p:plain



STEP
CSSコードを入力する
以下をコピペして貼り付ける。

 

STEP
変更内容を保存
一番下へ行き、「変更する」を押す。以上で事前準備は完了です。お疲れさまでした。

f:id:beaber:20211125003203p:plain

 

f:id:beaber:20210628164402p:plain





あくまで当ブログに対応した文字サイズや文字色になっているから必要に応じて変更してね。

 

記事に挿入

※この先の手順はパソコンで操作してください。

STEP
デザイン画面を開く
はてなブログの管理画面から「デザイン」を押す。

f:id:beaber:20211201221203p:plain

STEP
カスタマイズ画面を開く
左上のスパナアイコン「カスタマイズ」を押す

f:id:beaber:20211201221251p:plain

STEP
ヘッダ編集画面を開く
メニューからヘッダを押す。

f:id:beaber:20211201221324p:plain

STEP
フッタ編集画面にCSS貼り付け
フッタのテキストボックスを選択し、以下のHTMLコードを貼り付ける。

f:id:beaber:20211201222430p:plain

STEP
表示確認
HTMLコードの貼り付け後、テキストボックスの外(赤枠個所など)を押して変更が反映されたことを確認する。

f:id:beaber:20211201222447p:plain

STEP
保存
「変更を保存する」を押す。以上で横棒を入れることができました。お疲れさまでした。

f:id:beaber:20211201222614p:plain

まとめ

おしゃれはコピペで作れます。笑

はてなブログでも今風のCSSを組んでやればWordPressのような雰囲気を演出することができます。

 

僕の場合はトップページのデザインに横棒を採用しましたが、記事の「見出し」に使ってもシンプルな印象になって相性が良いです。

 

最後に関連記事のご紹介。はてなブログでも少しは稼げるんだよ

といった記事です。

 

www.okan-tech.com

 

 

最後までありがとうございました。

 

 

オカンTECH

全国のオカンのITリテラシーを向上だ!

プライバシーポリシー
広告関係のお問合せはこちら

©️ 2021 オカンTECH Powered by Hatena Blog