注意事項
情報を正確に提供するための努力をしておりますが、掲載している情報の正確性や完全性を保証するものではありません。また、アップデートでユーザーインタフェースが変更されたり、設定項目が追加・削除されている可能性もあります。
間違った情報等に気づかれましたら、ページ下部のコメント欄及びお問い合わせから教えて頂けるとうれしいです。すぐに修正致します。
WordPressの始め方
初期設定
記事の編集
その他
エックスサーバーの設定
プラグインの設定
- 2FAS Prime – Two Factor Authentication:ログインを二段階認証にする
- AddQuicktag:クラシックエディターにタグボタンを追加
- Akismet:コメントスパムのブロック
- Bing Webmaster Url Submission:BingインデックスへのURL自動送信
- Category Order and Taxonomy Terms Order:カテゴリーの順番を入れ替える
- Classic Editor:クラシックエディターの復元
- Contact Form 7:お問い合わせページの作成
- Easy WP Cleaner:データベースの最適化
- Enable Media Replace:画像の置き換え
- Health Check & Troubleshooting:トラブルシューティング
- Highlighting Code Block:記事内にソースコードを表示
- Limit Modified Date:更新日を変更せず記事を更新
- Meta Slider:スライドショーの設置
- Intuitive Custom Post Order:投稿・カテゴリー・タグの並び順を変更
- No Category Base:カテゴリーページのURLからcategory表記を削除
- Permalink Redirect:パーマリンク構成を変更した時の301リダイレクト
- Phoenix Media Rename:メディアのファイル名変更
- Plugins Garbage Collector:データベースの不要なテーブルを削除
- Recent Posts Widget Extended:新着記事一覧をサムネ付きで表示
- Regenerate Thumbnails:サムネイルの再生成
- Remove “Powered by WordPress”:公式テーマからproudly powered by wordpressを消去
- Rich Table of Contents:記事にお洒落な目次を設置
- SEO SIMPLE PACK:SEOの一括管理と最適化
- Shortcoder:ショートコードの追加と編集
- Simple 301 Redirects by BetterLinks:301リダイレクト
- Simple Local Avatars:アバター(プロフィール画像)の変更
- Table of Contents Plus:記事にシンプルな目次を設置
- Twenty20 Image Before-After:2枚の画像を重ねてスライドで比較
- Urvanov Syntax Highlighter:記事内にソースコードを表示
- Widget Logic:ウィジェットの表示・非表示を条件分岐で指定
- WP Downgrade:WordPressのダウングレード
- WP External Links:リンク設定の一括管理
- WPFront Scroll Top:画面上部へスクロールするボタンの設置
- WP Rollback:公式プラグインとテーマのダウングレード
SWELLの設定
- デザイン着せ替えファイルの使い方の使い方
- コンテンツ幅の設定
- サイドバーの表示・非表示の設定
- コメントエリアの設定
- 画像拡大機能の設定
- 目次の設定
- ピックアップバナーの設定
- 記事一覧のタブ切り替え設定
- ページャーの形とデザインの設定
- グローバルナビ(ヘッダーメニュー)の設定
- スマホ用固定フッターメニューの設定
- 抜粋文の設定と文字数の変更
- 投稿のタイトル横と下に表示される日付の設定
- 著者情報エリア「この記事を書いた人」の設定
- テキストカラーと背景色の変更
- グループ化の使い方
- ブログパーツの使い方
- キャプションボックスブロックの使い方
- リッチカラムブロックの使い方
- フルワイドブロックの使い方
- 関連記事ブロックの使い方
- ボタンブロックの使い方
- ふきだしブロックの使い方
- バナーリンクブロックの使い方
- 商品レビューブロックの使い方
- ABテストブロックの使い方
- FAQブロックの使い方
- アコーディオンブロックの使い方
- ステップブロックの使い方
- タブブロックの使い方
- 投稿リストブロックの使い方
- ボックスメニューブロックの使い方
- ランキング形式の広告の作り方
- PR表記の設定
- SNSシェアボタンのカラー変更
- アイコンリストのカラー変更
- ads.txtファイルの編集と設置方法
- <head>セクションにHTMLタグを挿入する方法
- クラシックエディターで使える機能と挿入されるタグ一覧
- テーマをダウングレードする方法
- 高速化とPageSpeed Insightsのスコア改善
- SWELL設定の初期値一覧
- アフィリエイトプログラムに参加する
- シンプルなのに、高機能 -
ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。
ブロックエディター完全対応のWordPressテーマ。
コメント
コメント一覧 (4件)
はじめまして。
swellを購入したので、関連記事を読ませていただきました。
スマホで見ると、アイキャッチが画面幅いっぱいになっていて、すごくオシャレだと感じています。
よかったら設定方法など、教えていただけないでしょうか。
どうぞ、よろしくお願いいたします
コメントありがとうございます。
やり方は他にもあると思いますが、このブログでは下記のCSSを追加しています(カスタマイザーの「追加CSS」 or 子テーマの「スタイルシート (style.css)」に追記)。
@media (max-width: 480px) {
.p-articleThumb {
position: relative;
left: calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
}
}
CSSの詳細については、Google等で検索して頂ければ詳しく解説されているサイトが出てくると思いますが、横幅480px以下の時に適用、計算式を入れられるプロパティ「clac」を使用、ウィンドウサイズの値「vw」を使用しています。width: 100vwを指定しているので、max-width: 100vwはなくても問題ないのかもしれません。
丁寧に教えていただき、ありがとうございます
アイキャッチの見せ方だけで、印象が全然違うので、やってみようと思います
僕もスマホ閲覧時はアイキャッチ画像両サイドの余白はない方が綺麗に見える&本文の画像と差別化できる気がしたのでCSSで編集しています。コピペするだけですが、反映されない時はブラウザ及びSWELLのキャッシュを削除してみて下さい。ブラウザのキャッシュは使用しているブラウザの設定から、SWELLのキャッシュはSWELL設定から削除できます。