Amazonギフトカード1000円プレゼント

【WordPressカスタマイズ】CSSコピペ・SANGOカスタマイズ

WordPressを開設して、デザインカスタマイズをやるようになり、CSSのコピペだけでできる調整をいろいろやりましたので、共有したいと思います。基本的にSANGO(有料WordPressテンプレート)のカスタマイズです。
コピペの詳細は随時更新します。

コピー&ペーストする場所

SANGOをインストールした状態で
管理画面>外観>カスタマイズ>追加CSS
にコピー&ペーストを行います。

「SHARE」ボタンを「共有する」ボタンに文字変更

画像はボタンサイズも変更しています
CSS
.fab-btn i:after{content:"共有する"}

PCヘッダーに検索ボタンを追加(スマホと同じ動作)

CSS
@media (min-width:768px){#inner-header{position:relative}.desktop-nav{margin-right:60px}.header-search__open{display:inherit;cursor:pointer}}

現在表示されている記事のカテゴリに下線を引く

CSS
body.home .desktop-nav li.menu-item-home:after{transform:none}.desktop-nav .current-menu-item:after,.desktop-nav li.current-post-ancestor:after{transform:none}.mobile-nav li.current-post-ancestor{border-bottom-color:#FFF;border-bottom-style:solid;opacity:1;border-bottom-width:2px}

スマホ時に更新時間非表示

CSS
@media (max-width:767.98px){.updated.entry-time{display:none}}

スマホ時のメインナビアニメーション削除

CSS
.mobile-nav ul{animation:none}

PC時追従ヘッダー

CSS
@media (min-width:768px){#container{padding-top:62px}.header{position:fixed;left:0;top:0;width:100%}.logged-in .header{top:32px}}

バグ?NOT FOUNDページの幅調整

CSS
@media (min-width:1030px){.notfound{margin-right:6%}}

ロゴの後ろに任意の文字を追加

CSS
@media (min-width:768px) and (min-width:855px){#logo:after{content:"なんでそれ買ったの?";position:relative;left:5px;top:-4px;font-size:14px;color:rgba(255,255,255,0.6)}}

※コピペコードは「なんでそれ買ったの?」を任意の文字に変えて使用してください。

PC時も詳細ページアイキャッチを横幅いっぱいに変更

CSS
@media (min-width:1030px){#entry .post-thumbnail{margin-left:-40px;margin-right:-40px}}@media (max-width:1029px) and (min-width:768px){#entry .post-thumbnail{margin-left:-25px;margin-right:-25px}}

この他にも追加があれば随時更新していきます。
WordPressカスタマイズは面白い。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です