So-net無料ブログ作成

So-netブログのトップページ「続きを読む」をボタンっぽくする方法 [ノウハウ]

このソネットブログで、長い記事を書くとトップページにそのまま表示されて、
トップページがすごく長くなってしまいますよね。

そこでソネットブログの「追記リンク」という機能で
トップページには記事の初めの数行だけ表示されるように設定できます。

「続きを読む」等とあるところをクリックすると、記事の続きが読める機能です。

ただ、使っているデザインにもよりますが、
そのままだと「続きを読む」という文字が表示されるだけでちょっと味気ない・・・。

 ↓ こんな感じ。
 続きを読む

そこで、「続きを読む」をボタンっぽく表示するやり方を紹介します!

 ↓ こんな感じです。(クリックして続きを読めます!)
続きを読む


●「追記リンク」(続きを読む)機能を有効にする方法

まずは、いつも記事を書くときに使う管理ページに行きましょう。

上の方はこうなっていると思いますので、「設定」をクリック。

kanri-top.PNG

すると「基本設定」というページになりますので、

少し下にスクロールして「記事の初期設定」というところへ。

kiji-syokisettei.PNG

そこの「追記リンク文言」というところに、
ボタンとして表示したい文言を記入しましょう。

上の画像のように「続きを読む」がオーソドックスですが、
「続きはここをクリック」「続き!」など、なんでも大丈夫です。

もちろん、後で変えることもできますし、
記事毎に個別の文言にすることもできます(後述)。

そして、下の「設定を保存する」をクリックするのを忘れずに。



続いては、記事を書くときに設定します。

記事のなかで、トップページに表示する最初の数行と、
トップページに表示しない記事の後半部分
(「続きを読む」をクリックして読む部分)をわけて書きます。


まず、トップページに表示する最初の数行は、
いつも記事を書いているところと同じ場所に書きます。

honbun.PNG

「続きを読む」機能を使っていない方は、記事を全てここに書いているので
全部トップページに表示される、というわけです。


そして、上の画像の下の方に「追記(続きを読む)」というのがありますよね。

ここをクリックしましょう。

するとこのような場所が開きます。

tuiki.PNG


「追記リンク文言」に、さっき設定した文言があると思います。
ここで、この記事のボタンは別の文言にしたければ、ここで記入もできます。

そして、トップページに表示しない記事の後半部分をここに記入します。


これで、いつも通り記事を公開すれば
トップページには前半部分の文章の後に「続きを読む」というリンクが表示されます。


ただ、これだとトップページに表示される

「続きを読む」はクリックできるリンクにはなりますが
ただの文字の場合が多いと思います。

こんな感じ↓
tuduki-text.PNG


なので、ここからはこれをボタンっぽくする方法を説明します。

こんな感じ↓
tuduki-button.PNG


最初からボタンっぽくなっている方は、もうやることはありません。



●「続きを読む」をボタンっぽくする方法

これには、ブログのデザインを少しだけいじる必要があります。

いじると言っても、適用前に確認できるプレビュー機能や、
よくわからなくなったときに「初期値に戻す」機能があるのでご安心ください。


まずは管理ページから「デザイン」、「テンプレート管理」とクリックします。

template.PNG

すると、使っているテンプレートによって内容は人それぞれですが、
テンプレートが出てきます。

適用に黒丸が付いているテンプレートの[編集]をクリックしましょう。
画像のようにテンプレートが一つだけならそれでOKです。


するとこんな画面に。

stylesheet.PNG

下の「保存」ボタンを押すまで変更は反映されません。
「保存」を押す前に右の「プレビュー」でどう変わるか確認するようにしましょう。

何か変になっていたら「初期値に戻す」でリセットできます。


それでは、矢印がある「a:hover」とある行と、「body { 」とある行の間に、
この内容をコピーペーストしましょう!

a.readMoreLink {
padding:3px 12px;
margin:16px;
font-size: 14px;
background:#f3f3f3;
color:#7777aa;
border-left: #000000 solid 1px;
border-right: #000000 solid 1px;
border-bottom: #000000 solid 1px;
border-top: #000000 solid 1px;
}

↓こんな感じになります。
readmorelink.PNG

これでプレビューするとわかりますが、私と同じようなボタンになっていると思います。
(ちなみに、トップページの記事作成時に上の「追記(続きを読む)」に文を書いた記事がないとボタンは表示されませんよ。)

ただ、私と同じでは、色などがご自身のブログに合わない方が多いと思います。

プレビュー時点では本物のページはまだ変わっていないのでご安心ください。

自分のブログに合うように上で貼り付けたテキストを修正しましょう。

テキストは全部意味があるのですが、主なものだけピックアップすると、

font-size: 14px;  ⇒文字の大きさ 14を変えると文字の大きさが変化します。
background:#f3f3f3; ⇒ボタンの色  #f3f3f3を変えると色が変化します。
color:#7777aa;   ⇒文字の色   #7777aaを変えると色が変化します。

ボタンと文字の色を変えれば、それぞれのブログに合ったボタンになりそうですね。

この「#f3f3f3」「#7777aa」の暗号のようなものは「カラーコード」と言うものです。

https://www.colordic.org/
こちらのサイトで、自分のブログに合う色を探しましょう!

そしてそのカラーコードにテキストを変更して、プレビューで確認、を繰り返し、
納得のいく色になったら「保存」!

これが出たら設定変更完了です。
finished.PNG

ブログのトップページに行くと、「続きを読む」ボタンが記事にあるはずです。




最後に、こちらはあくまでやり方の一例で、トラブル等があっても責任を負うことはできません。

何かうまくいかない、などあればコメントや自己紹介のアドレスに連絡を頂ければ、
お助けできることはあるかもしれません。


それでは、この方法でトップページをすっきりさせてみましょう!




スポンサーリンク






nice!(154)  コメント(5) 

nice! 154

コメント 5

レインボーゴブリンズ

ご訪問いただき、ありがとうございます(^-^)
いつかやってみたいですね。
by レインボーゴブリンズ (2019-09-12 01:17) 

ぽちの輔

面白そうですね。
やってみよう^^
by ぽちの輔 (2019-09-12 06:23) 

koo

レインボーゴブリンズさん、 ぽちの輔さん
コメントありがとうございます。
ぜひぜひ!トップページがすっきりして、ページの読み込みも早くなりますよ。
by koo (2019-09-12 07:53) 

沖田 翼

昔、TOPページの読み込みを早くするためによく使っていました。
最近は、Photoshopでの画質調整で軽量化することが出来ているので使わなくなりましたけどね。
by 沖田 翼 (2019-09-12 21:10) 

koo

沖田 翼さん
コメントありがとうございます!
なるほど、画像自体を軽くしているのですね~
by koo (2019-09-12 23:46) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。