WP Mini Tips #1

 
WP Mini Tips #1

20141025-1

ここ数日で友人たちが相次いでレンサバへ移行しております。

ということで、小さな Tipsを書いてみようと思います。
レンサバ+WPは無料ブログとは違って自由なのですが、無料ブログでは当たり前だったことが自分で工夫しなければならないことも。
たとえばシーサーの場合、連続した改行で段落と写真の間にスペースを空けることが出来ましたが、WPでは出来ません。どうやら WPは連続した改行を無視する仕様の様です。
(シーサーの様に連続した改行を<br />へ変換してくれない)
普通に書いてダメなら工夫してスペースを空けてみましょう(笑)

クロハラアジサシ

20141025-2

前記の段落と上記の画像の間にスペースが空いていますよね。
これは写真のタイトルに工夫がしてあり、cssを使ってスペースを作っています。
以下が写真のタイトル用にテーマの style.css へ追加した部分です。

.p-cap1, .p-cap2, .p-cap3, .p-cap4, .p-cap5, .p-cap6 {
    color:        #fff;
    font-size:    14px;
    font-weight:  normal;
    padding-left: 27px;
    padding-top:  3px;
    margin-top:   120px;
}

上記の margin-top: 120px; が文と写真の間にスペースを作っているプロパティです。
で、p-cap1 ~ p-cap6 まであるのは鳥のマークや風景のマークを使い分けているから(笑)
p-cap毎に違う背景を使っているので、上記に加えて個別に作用する classも存在しています。
(上の指定は p-cap1 – 6 まで一括指定しています)

上の様なタイトルの装飾は要らない。単なるスペースが欲しい。
その場合は簡単なクラスを作ってしまえばいいと思います。

この様なクラスをつくり
.line-space { margin-bottom: 80px; }

こう使う↓
あああああああああああああ
<div class="line-space"></div>
いいいいいいいいいいいいい

するとこうなる↓
あああああああああああああ
いいいいいいいいいいいいい

margin-bottom: 80px; の数値を変えれば 1px単位で調整できます。
p class=”line-spase” で段落を囲うのが王道だと思いますが、あたしゃ面倒なので一行で済ませています。閉じるのを忘れる事も有るし。
webの先生から怒られそうな手法ですね(笑)



  1. ask-evo

    しかも、編集モードをテキストとビジュアルで切り替えると、勝手にタグがいじられますね(^^;
    どうすればいじられない書き方になるか、ようやく分かりましたw
    まぁ、ビジュアル表示はあまり正確ではないので、結局「投稿を表示」で確認した方が良いのですがw

    ちなみに「 」を書くと改行になるよう、連続改行も可能でした。
    ただし、にーさんのクラス設定のように幅は自由にならないのと、
    クラスで設定しておけば、後から一括で修正も利くので、
    それぞれにうまく使い分けていきたいと思います。

    1. ask-evo

      しまった
      「」内表示されていないですね(^^;

    2. delphian

      ask-evoさん、こんばんは。

      ビジュアル表示はWPのNG部分だと思います(笑)
      レイアウトに拘りがあるとあれは使わなくなりますね。
      連続改行技の文字が見えないのですが、スペースじゃないですか?
      消えるので全角で書きますが「 」ですよね。実は秘密基地も以前はそれでやっていました。
      でもそれは手法として美しくないので、クラスでやることにし、過去記事も全てクラスで書き換えましたよ(笑)

  2. iMovie

    こんばんは
    1.style.cssに、「.line-space { margin-bottom: 80px; }」書き込む(後半の任意の場所)
    2.投稿の編集画面で、追加したクラスを呼び出して、適用させる <div class=”line-space”></div>
    という事かな?
    シーサーブログですが、無事、テスト環境へ移行できました。
    ツールの提供およびご支援頂きありがとうございました。
    今、FC2ブログのデータを抜きだしています。
    シーサー経由で、WordPressへ移行します。
    質問なのですが、シーサーから移行済の環境へ、さらにシーサーから移行した場合、WordPressは上書き処理になるのでしょうか?それとも、後ろへ追加するのでしょうか?

    1. delphian

      iMovieさん、こんばんは。

      その手順でOKですね。 挿入時にタグを覚えなくてもよい便利なプラグインもあるので、活用するといいです。
      WPへ更に取り込むと上書きではなく、追記になります。

  3. bluem

    おはようございます(^^
    こういう記事も助かります。
    会社のWPで試してみます♪

    私の場合、移行するとしてseesaaに置いてある写真との関連はどうなるんでしょ?
    折角の庭付き一戸建てなので、移行するなら写真データも持っていきたい
    処ですが、その辺が良く分からんですw

    1. delphian

      bluemさん、こんにちは。

      WEBページはチョットした事を知っているだけで表現力が上がりますね。
      ブログ仲間もWPへ移行中なので、この様な Mini Tips も時々書こうと思います。

      seesaaの写真は問題無しです。
      シーサーへアップしてある画像を根こそぎダウンロードするツールを作ってありますよ。
      それをレンサバへ一括で送り込み、記事のリンク元を一括置換すればOK。
      問題は初期の頃の画像リンクでしょうか。
      FC2は外部からの画像呼出に制限をかけているので、FC2のみ別の方法で画像をDLです。
      ググると方法が出てくると思いますよ。

  4. jerry

    CSSをどこでいじるのかもわからない初心者ですww
    先ほどググって見つけたよさげな情報をもとに「Jetpack」なるプラグインをインストールしました。
    これで簡単にCSS編集ができるらしい(^^;

    FC2からの画像DL、巡集というソフトを使ってやっております。
    先日、一度に500ずつURLを貼ってDLしてたんですが、一度に500はできないようで、
    先ほどその事に気づいて400ずつDLし直しております。
    全てDLし終えたら引っ越し作業に着手できます

    1. delphian

      Jerryさん、こんにちは。

      cssが分からなくてもブログの運営は出来ますが、分かると更に楽しめます。
      触っていれば少しずつ分かってくるので、ちょっとだけ勉強して下さいな。
      何となく分かるだけでもデザインの改造が出来る様になりますよ。

      FC2の画像、400ずつってのは時間がかかるな~
      がんばれーー!

  5. teltel

    こんばんは。
    何となく難しそう・・・。

    運動会ではいい写真が撮れましたか?

    1. delphian

      teltelさん、こんばんは。

      最初は難しく思いますが、慣れるものですよ。
      運動会は明日だす! どうなるかねぇ~(笑)

  6. teltel

    明日ですか。
    ジェリィさんちのブログ、やはり私のコメント反映されないようです。
    なんでだろ~なんでだろ~♪♪

    1. delphian

      そそ、明日っす。

      Jerryさんち、作ったばかりなので、まだ学習してないんだね。
      こっちからJerryさんに伝えておきますので、表示されるようになります。
      で、1度コメントしたら公開保留になっているので、2度目は書かなくていいっすよ。
      WPの学習が進めば普通通りになるので、めげないでね。