【はてなの話】さりげないカスタマイズをご紹介します

f:id:skyhigh1466:20180610121130j:plain

 

こんにちは。アスター@august_spica)です

 

最近はワードプレスの更新情報しか流していなかったので

久しぶりに役立ちそうな記事を書いてみました

 

 

プロフィールページにキャッチフレーズを

 

f:id:skyhigh1466:20180610122537j:plain

 

私の名前とIDの下に

『ひたすら素直に』という文字があるのがわかりますか?

 

実は使っているテーマのヘッダーが狭いので

このブログのキャッチフレーズを

プロフィールに書いてみたんですよ

 

CSSはコチラ

 

やり方はすごく簡単です!

下記のコードをコピペすれば、同じように表示されますよ

 

リンクの下線がついていますが

CSSとはまったく関係ないので

気にせず使ってみてください

 

span.id:after {
content: "ひたすら素直に";(ここにはお好みの文字を入力)
display: inline-block;
font-size: 11px;
font-weight: normal;
line-height: 1;
border: solid 1px;
border-radius: 5px;
padding: 3px 5px;
margin-left: 10px;
}

 

ただしあまり長い文章を入力すると

非常に見栄えが悪くなるので

できれば10文字以内にしておいたほうがいいです

 

行間を詰めるCSS

 

はてなブログワードプレスなどと違って

行間が広いのが特徴です

 

あまり気にならない方もいらっしゃるかと思いますが

私は行間が狭いほうが読みやすいので

以下のCSSで調整をしています

 

.entry-content p {
margin: 0.5em 0;
}

 

記事下にCTAを設置

 

これのことです

 

f:id:skyhigh1466:20180610130150j:plain

 

CTAとはCall To Action(コール トゥ アクション)の略で

「行動喚起」と訳される

Webサイトの訪問者を具体的な行動に誘導すること

もしくは、具体的な行動を喚起する

Webサイト上に設置されたイメージやテキストのことをいう

 

https://www.synergy-marketing.co.jp/glossary/cta/ より引用

 

ワードプレスにはよくある機能なんですが

はてなでも設置したくなったので、やってみました

 

www.foxism.jp

 

www.foxism.jp

 

FOXISMさんの記事を参考にすれば

カッコいいCTAが作れますよ

 

アイキャッチを丸く可愛く

 

f:id:skyhigh1466:20180610132207j:plain

 

別にデフォルトの四角でも構わないんですが

丸くなるとなんかいい感じですよね

 

www.d-3.site

 

デフォルトのコードでは角が少し変化する程度ですが

私は0.3emを2.2emに変えてまん丸にしてみました

 

まとめ

 

以上、さりげないカスタマイズのご紹介でしたが

テーマをがっつりいじるものではないので

お気軽に使えるものばかりです

 

「なんか見た目がイマイチで飽きたな・・・」という

マンネリ打破にピッタリだと思いますよ

 

最後までお読みいただき、ありがとうございます
ではまた、次の記事でお会いいたしましょう