【SANGOカスタマイズしてみた】参考リンクのデザインを変えてみる

参考リンクのデザインをカスタマイズ

この記事では 参考リンクのデザインをカスタマイズした方法を説明。

みなさんのアレンジ
2018.10.10追加 バビさんverへジャンプ 2018.10.12追加 りんごさんverへジャンプ
追記
2018.10.9 参考リンクはデフォルトで最大幅450pxが指定されています。横幅を80%から100%にするとスッキリするかもです。お好みでお願いします。僕は100%にしました。

カスタマイズは自己責任でやろう!

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

CUSTOM POINT
内部リンクに似たようなデザインにしてみました。「新しいタブで開く」の文字を追加しました。文字数が長くても被らないです。

こんな感じで変更

Before
編集前
After
編集後

ほんまもんのリンク

参考 外部リンクとはferret

このサイトの環境

テーマ
子テーマ
プラグイン

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズの準備

追加方法難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

カスタマイズを加速させる追加CSSブログのカスタマイズを加速させる「追加CSS」の使い方

夏だし髪を斬りに行こう!

夏だしどっか行こう!

カスタマイズコードの追加

 

確認の手順

  1. カスタマイズコードを保存
  2. カスタマイズしたページを開く
  3. cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

 
横幅
このカスタマイズでは、横幅を80%にしています。ただ、それだとタブレット表示のときに450pxまでしか幅が縮小されません。気になる方は100%にしておくといいかもです。それとmax-widthも700pxにしておくといつでも横幅MAXになります。 reference{width:100%; max-width:700px;}これを追記してください。
こんなパターンも
別パターン 背景色がぴっしり入ったバージョンです。これにしたい場合は以下のコードを追加してください。

みなさんのアレンジ集

バビさんver

バビさんver
MENくん
シュッとしてコンパクトにアレンジしています!
デフォルトの浮き上がるバージョンにしているので、関連記事カード型を使っている方のデザインとなじみますね。

りんごさんver

MENくん
りんごさんのブログにマッチしたカラーです!!
ブログのカラーに合わせるとすごくなじみますね♪ CSSのカラーコードを変更すると自分のサイトに合ったものにアレンジできます。
りんごさん(@ringox365

   

まとめ

追加CSSのまとめ
手順をザクッと説明
変更手順
  • FTPソフトとテキストエディタを開いて準備OK。
  • 追加のコードを書き込んで、保存。アップロード。
  • 更新して確認。
MENくん
SANGOサポーターがあると参考リンクを簡単に貼れるよ!