はてなブログProからエックスサーバー+WordPressに移行しました!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

訳あってはてなブログProからエックスサーバーでサーバーを契約してWordpressに移行したのですが、まだ慣れない部分も多いので時間見つけつつじわじわ編集していきたいと思います。

ですのでしばらくサイトデザインが頻繁に変わったり、ページが表示されなかったり記事が見れなかったりすると思いますがよろしくお願いします!

はてなブログProからWordpressに移行した方法や、Wordpressテーマのデザイン編集方法などは別記事でまとめたいと思います。

使用テーマなど

デザインはかの有名なバズ部さんが提供している無料テーマ「Xeory」のブログ向けテーマ「Xeory Base」を利用して、子テーマを編集してカスタマイズしております。

Xeoryは無料テーマの中ではSEOに強いといわれており、シンプルなデザインとなっており使いやすいです。

 

しかし、凝ったデザインにするには多少知識が必要だったり、どこをいじる必要性があるか調べる時間が必要そうです。

ですので、デザイン重視のブログにしたい場合は初めからデザイン重視のテーマを利用するほうがよさそうです。

当サイト(ゲマゲマ)と元のXeory Baseがどう違うかは「Xeory Baseのサンプルページ」と見比べてみてください。

 

デザインに関して質問等ありましたらコメントまたはツイッターにてどうぞー。

この記事はテストを兼ねているので文章が変わったり何かよくわからないものが設置されると思いますがご容赦を(´・ω・`)

目次デザイン確認用1

WordPressでの目次デザイン確認用h2サンプルです。

テスト

目次デザイン確認用2

WordPressでの目次デザイン確認用h2サンプル2個目です。

テスト

目次デザイン確認用2-1

WordPressでの目次デザイン確認用h3サンプルです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメント

  1. 匿名 より:

    トップページで、アイキャッチと題名だけ(カード型)を表示するのはどうやってやっているんですか?

    1. https://my-turbulence.com/how-to-blog-entry-parallel-notation
      こちらのサイト様を参考にカード型を取り入れましたが、最終ページが奇数記事数になるとレイアウトが崩れるなどありましたのでそこを以下のように自分なりに調整しました。

      すべてのCSSの記述は「外観」→「カスタマイズ」ページの一番下にある「追加CSS」で記述しています。
      ※テーマのCSSを直接調整してもいいですが、バックアップしておきましょう。
      ※また、追加CSSの記述もローカルでメモ帳などにコピーしてバックアップしておくと安心です。
      ※phpはそれぞれのphpファイルをいじってますのでこちらもバックアップしておくといいでしょう。

      記事一覧の2列化(カード型縦2列並び)の記述。

      /* 記事一覧2列化・ここから */
      .post-loop-wrap article{
      width: 47%;
      max-height: 350px;
      overflow-y: hidden;
      margin: 0 0 16px 16px;
      padding: 0px;
      float: left;
      position: relative;
      }

      .end-loop-wrap{
      clear:both;
      }
      /* 記事一覧2列化・ここまで */

      トップページの記事一覧のアイキャッチ画像を以下の記述で調整(フルサイズ化、余白調整)、サイズや余白は好みで調整してください。
      ※.archiveの記述はカテゴリー別の記事一覧ページ用ですので、トップページのみなら不要。

      /* トップページアイキャッチ調整・ここから */
      .home .post-thumbnail, .archive .post-thumbnail{
      width: auto;
      height: auto;
      margin-top: 0px;
      margin-left: -30px;
      }

      .home .post-header{
      margin-bottom: 0px;
      }

      .home h2, .archive h2{
      margin-bottom: 0px;
      }

      ※以下はレスポンシブ化用の記述です。
      /* アイキャッチ崩れレスポンシブ化・ここから */
      @media screen and (max-width: 767px) {
      /* tablet */
      .home .post-header{
      padding-bottom: 0px;
      }
      .home .post-thumbnail, .archive .post-thumbnail{
      width: 100%;
      margin-left: 0;
      }
      .home .post-content{
      padding-top: 0px;
      margin-top: -20px;
      }
      }

      @media screen and (max-width: 640px) {
      /* phone */
      .home .post-thumbnail{
      width: 112%;
      margin-left: -16px;
      }
      }
      /* アイキャッチ崩れレスポンシブ化・ここまで */
      /* トップページアイキャッチ調整・ここまで */

      ■■■以下はアイキャッチ画像を記事タイトルの上に持ってくる調整。■■■
      ※アイキャッチ画像を記事タイトルの上に持っていきたいページのphpをそれぞれ変更する。
      index.php(トップページ一覧のサムネイルを調整する場合)
      archive.php(カテゴリ一覧のサムネイルを調整する場合)
      shingle.php(個別記事ページのサムネイルを調整する場合)
      single-lp.php(LPページのサムネイルを調整する場合)

      ※ヘッダー要素にこの記述を入れるとレイアウトが崩れるので元の位置のままにしておく。
      < ?php if( get_the_post_thumbnail() ) : ?>

      以下3行をヘッダー要素に移動(個別ページはSNSボタンの上に移動するよう注意※これは自分用のメモですが念のため記述したままにしてます)
      ※コメントだとdivタグが表示されないようなので<>を全角にしてますが、実際は半角にしてください。

      <div class=”post-thumbnail”>
      < ?php the_post_thumbnail('full'); ?> ※(”)の部分を(‘full’)にすることでアイキャッチ画像を記事幅サイズにする。
      </div>

      の様に、post-title直下へコードを移動する。
      ■■■※アイキャッチ調整の関係はここまで■■■

      ※IEはアイキャッチ画像が崩れるので個別で以下のような記述が必要。
      /* IEアイキャッチ崩れ調整 */
      @media all and (-ms-high-contrast: none){
      .post-thumbnail *{
      width: 100%; /* IE10以上 */
      margin: 0;
      padding-bottom: 10px;
      }
      }
      .post-thumbnail *{
      width: 100%\9; /* IE10以下 */
      }

      ほとんど独学でやってるので記述が汚いと思われるので、その点は個人で調整お願いします。
      Wordpressテーマをバズ部様の「Xeory Base」を元にしているので別のテーマではうまく反映されない、細かな部分が違う可能性がありますが参考にしてみてください!
      需要があるようならレイアウトの記事をまた時間あるときに書こうと思います。

      ※抜けなどあればまたコメントにて返信します。うまくいかない場合はまたコメント頂ければわかる範囲でお答えします。

    2. コメントに空白改行とスペースが反映されないようなので見づらい点ご了承ください。

      要約すると、Xeory Baseの初期状態から
      ・アイキャッチ画像の全体化
      ・記事一覧の2列化
      ・アイキャッチ画像を記事タイトル上に移動
      ・記事一覧の記事内容を非表示化
      しております。

      自分も当時試行錯誤して色々いじったのでたぶん抜けがあったりすると思います。
      また、余白などや投稿日時の位置・サイズなど細かく調整しているので、レイアウトがこのサイトとは違う感じになると思います。

  2. コメント表示確認用テストコメント投稿です。

    1. コメントに対しての返信コメントのテスト投稿です。

コメントを残す